网页主体制作
实现设计草图中的banner
<div id="banner"></div>
在css.css中加入以下样式:
#banner { background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/ width:730px; /*设定层的宽度*/ margin:auto; /*层居中*/ height:240px; /*设定高度*/ border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/ clear:both /*清除浮动*/ }
通过border很容易就绘制出一条实线了,并且减少了图片下载所占用的网络资源,使得页面载入速度变得更快。
clear:both,表示清除左、右所有的浮动。在这里添加clear:both是由于之前的ul、li元素设置了浮动,如果不清除则会影响banner层位置的设定。
<div id="pagebody"><!--页面主体--> <div id="sidebar"><!--侧边栏--> </div> <div id="mainbody"><!--主体内容--> </div> </div>
在css.css中添加以下样式:
#pagebody { width:730px; /*设定宽度*/ margin:8px auto; /*居中*/ } #sidebar { width:160px; /*设定宽度*/ text-align:left; /*文字左对齐*/ float:left; /*浮动居左*/ clear:left; /*不允许左侧存在浮动*/ overflow:hidden; /*超出宽度部分隐藏*/ } #mainbody { width:570px; text-align:left; float:right; /*浮动居右*/ clear:right; /*不允许右侧存在浮动*/ overflow:hidden }
为了可以查看到效果,建议在#sidebar和#mainbody中加入以下代码,预览完成后可以删除这段代码:
border:1px solid #E00; height:200px
保存预览效果,可以发现这两个层完美的浮动,达到了我们布局的要求。
其它部分请童鞋们自己实现,不懂的可以加网页设计交流群:208047327。
125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/2371.html