静态网页制作

首页 > 代码库 > 静态网页制作

2024-07-13 05:40:28 230人阅读

总结下工作。问，为什么开始看到这个作业的时候不知道如何下手呢？

现在完成了，知道该怎么去分解这个网页，以图中的分割线为准，可以这样细分：

这样，再根据每个模块去细分，首先看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="http://www.mamicode.com/#"><img src="http://www.mamicode.com/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好点，有很多地方不一样，不太好控制。

看看内容的右边，这块比较好控制，没什么难点。