HTML网页布局实例

HTML网页布局实例

在没有学习div之前，网页布局是件非常麻烦的事情，由于缺乏足够多的规则对网页的内容进行组织，因此，显得十分麻烦。而div便是为网页布局而生。div最大的特点便是可以进行任意的嵌套，并且嵌套的div之间互相独立，互不影响，这便使得网页中的内容相对位置不会发生改变。div有三种重要的位置方式（position）:relative, absolute和fixxed。其中需要注意的是，如果要使嵌套的div的postion生效，必须在它嵌套的上一层div中声明position，三种方式皆可。另外，借助于盒子模型，也能够加深我们对于布局的理解。如下图（图片来自于百度百科）：

图1 盒子模型

实例效果：

图2 网页实例效果

 

代码地址：https://github.com/JiasenLee/javaweb_in_action/tree/master/HTML实战任务5作业

 

转载于:https://www.cnblogs.com/Jason404/p/9533800.html