静态网页制作
总结下工作。问，为什么开始看到这个作业的时候不知道如何下手呢？
现在完成了，知道该怎么去分解这个网页，以图中的分割线为准，可以这样细分：
这样，再根据每个模块去细分，首先看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抠图，切图会了点了。
