步做,不会做的就去看第四节,这里我就直接把代码发出来供大家学习
HTML代码: <div id="Nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">PHOTOS</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">LINKS</a></li> <li><a href="#">CONTACT</a></li> </ul> </div>
CSS代码 #Nav{height:42px;} #Nav ul{ height:42px; list-style:none; background:#56990c; } #Nav ul li{height:42px; float:left;} #Nav ul li a{ display:block;/*转化成块状元素,因链接是内链元素,若想给它定义下面的属性,必须将它转化成块状元素,*/ height:42px; color:#FFF; padding:0 10px; line-height:42px; font-size:14px; font-weight:bold; font-family:Arial; text-decoration:none;/*去除链接样式,默认是有下划线的,加上这句就没有任何样式,下划线也没有了*/ float:left;/*这句一定要加,不然在IE6中会出现,这种效果*/ } #Nav ul li a:hover{background:#68acd3;}
【第四步 Banner布局】 这个就更简单了,有两种方法 第一种:将图片作为<div id="Banner"></div>背景 第二种:直接将图片插入<div id="Banner"></div>之间,代码:<div id="Banner"><img src="" /></div> 大家可以根据需求和实际情况选择用哪一种,在这里我们用第一种 HTML代码没有什么变化,只需要在CSS里面定义一下就OK了
CSS代码: #Banner{ height:290px; background:url(../Images/banner.jpg) no-repeat; }
怎么样做到这里比较简单吧,好,接着来 【第五步 内容Content板块布局】 从图片上我们看到,内容板块分为左右两个区域,左边ContentL宽度是600px,右边ContentR宽度是300px,但是由于我们要将内边距设置成15px(这样才会好看),所以ContentL的宽度在CSS中就要设置成600-15*2=570px,而右侧的ContentR则需要设置成300-15*2=270px;
HTML代码: <div id="Content"> <d
|