
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
三、网页的布局元素设计
下面的工作是在容器里设计网页的头部、banner和脚部。
在容器里装入三个div:
在body中的HTML代码如下:
<div id="container"> <div id="header">此处显示 id "header" 的内容</div> <div id="banner"> <img src="images/banner.jpg" width="100%"> </div> <div id="footer">此处显示 id "banner" 的内容</div> </div>
可以看出在banner中插入了一个图片,如图2-39所示,这个图片放在了网页所在目录的images文件夹下。

图2-39 网页结果
同时把它们的CSS样式进行了设计:
body { margin: 0px; } #header { height: 100px; width: 100%; background-color: #999; } #banner { height: 280px; width: 100%; } #footer { height: 50px; width: 100%; background-color: #999; }
再在banner下面插入一个aside边栏和一个main主内容区(图2-40),我们把aside边栏的宽度设为200px、主内容区宽度设为780px,高度都设为140px。

图2-40 aside和main的float属性缺省的情况
我们发现,aside区和main区没在一行上。而它们的宽度又没超过container的宽度(200px+780px=980px)。这样如何解决呢?
我们可以把aside的Float属性改为Left,把Main的Float属性也改为Left就可以了(图2-41),这样这两个DIV就排在了一行,如图2-42所示。为了防止footer也跟在main右边,我们需要把footer的Clear属性设为both。
#aside { height: 140px; width: 200px; float: left; background-color: #AAA; } #main { height: 140px; width: 780px; float: left; background-color: #CCC; }

图2-41 定义Float属性

图2-42 排版结果
我们把所有CSS样式放在style.css文件中,最终网页body部分的HTML代码如下:
<div id="container"> <div id="header">此处显示 id "header" 的内容</div> <div id="banner"> <img src="images/banner.jpg" width="980"> </div> <div id="aside">此处显示 id "aside" 的内容</div> <div id="main">此处显示 id "main" 的内容</div> <div id="footer">此处显示id "footer" 的内容</div> </div>
可以看出代码内容非常简单,这就是当今网页内容与样式分离的网页制作理念。尽量把所有与内容无关的CSS样式代码放在CSS文件中。