静态网页制作

阿里 阅读:263 2022-06-06 13:53:26 评论:0

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

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

     这样,再根据每个模块去细分,首先看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"/>&nbsp;&nbsp;公司咨询</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抠图,切图会了点了。


标签:CSS
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号