总结下工作。问,为什么开始看到这个作业的时候不知道如何下手呢?
现在完成了,知道该怎么去分解这个网页,以图中的分割线为准,可以这样细分:
这样,再根据每个模块去细分,首先看header这个模块,可以看到有个logo大图标,然后紧跟着是导航条。
刚开始想把这两部分作为两个平级div嵌套在div header里面,不过后面因为,哪个黄色的背景图要嵌套在logo字下面,所以最后的布局是这样的。
这里调试ul中的float:left,不是很清楚为啥会出现这种情况。这里让ul,li设置为float:left,然后注意下标签a设置其为块级元素display:block;并设置其高度和宽度,这是为了背景图片能完整的显示,当鼠标移到相应的标签时显示图片,我是这样设置的:
#headernav ul li a:hover{
color: #000000;
background-image:url(image/nav_btn.png);
}
OK,接着看中间的设置,首先看大概布局。
picture 图片div的布局算是比较简单的,就是开始想为什么当图片的宽度没有那么宽时,它是如何自动居中的,这是个问题,当宽度足够长时,它是填充的,这个当然明了。
接着分析下面的内容:
contentleft里面就是一个左侧导航栏,这个也花了一点时间去琢磨。
本来哪个框框我都不知道怎么出来呢? 然后问别人才知道要怎么设计,首先是一个列表的形式因此想到ul和li的使用,ul中给它一个这样的属性 list-style-type: none;就可清除每个列表前的圆点。
看下具体列表里面的内容要怎么去设计,首先每个列表前面有一个导航的图标,这个图标刚开始是用了img标签,每个li里面都放一个:
<li><a href="#"><img src="image/liicon2.png"/> 公司咨询</a></li> 。
不过当鼠标移到标签上时,不知道如何更改img的src属性了,因此这种方式导致功能不完善,所以后面就改成给li一个背景图。这样设置:
#contentleft ul li{
width:170px;
height:33px;
line-height:30px;
float:left;
border:1px solid #D0D0D0;
margin-bottom:-1px;
background-image:url(image/liicon2.png);
background-repeat:no-repeat;
background-position:38px 12px;
}
注意这两个属性:
background-repeat:no-repeat;
background-position:38px 12px;
这是图标正确呈现出原图样子的关键。
OK,这样设置好后,注意最后一个li框,它里面是没有任何东西的,你这样添加背景图,会把最后一个li框也加一张图,所以又出现问题了,我要怎样使最后一个li跟前面的不一样,刚开始想的是用last-child属性,也就是这样设置:
#contentleft ul li:last-child{
background:none;}
不过这样在IE8中是不识别的,所以,最后选了这种方案
#contentleft ul li.lastchild{
background:none;}<li class="lastchild"></li>
给最后一个li加个lastchild类。这样的话,最后一个li框中就没有背景图了。
然后再看下,鼠标移到标签上,背景图换了的效果怎么写的:
#contentleft ul li:hover{
background-image:url(image/liicon.png);
background-repeat:no-repeat;
background-position:38px 12px;}#contentleft ul li.lastchild:hover{
background:none;
}//由于没有将图片放在a标签里,所以要分开控制其颜色,这其实是不太合理的。。。
#contentleft ul li a:hover{
color: #2C8AC9;
}
主要是对图片的处理,刚刚想了下,为什么不把图片放在a的背景图中,这样可以更好地控制效果,照理来说,应该放在一起的,不过刚刚反复折腾,没做到,暂时还是以这种方法算了。
由于关于绿化这一栏跟其它的不一样,所以我用了个div,这种处理方式其实不太好,正常情况下,应该是跟最后一个li的处理方式一样的,这里再折腾下试试。
试了下,结果还是重新分出个div好点,有很多地方不一样,不太好控制。
看看内容的右边,这块比较好控制,没什么难点。
最后看下底部的控制:
一根横线,一个底部导航条。
横线是这样设计的:
#line {
background-color: #B2D00F;
border: 1px solid #B2D00F;
height: 3px;
margin-top: 8px;}
底部导航条就是几个a标签然后让他们居中text-align: center;就OK了。
OK,页面完成:
对了,注意有个背景图抠出来了。PS抠图,切图会了点了。
静态网页制作