对hao123进行重构(2)


下来是酷站秀,它和上面的导航列表包含在了一个层里面并且使用了float left 。这部分就是一个标题图片不好处理,刚开始指定成了#coolsite 的背景图片 可这样一来没有了绿色背景衬托,只好又加了一个<span>标记。右边的几个链接处理成为列表,针对底部的两个不同颜色的链接单独指定一个绿色的样式。


最重要的部分是名站导航、酷站精选。 这部分和下面的 四个门户网站一起放在了一个<div id=”right”>里面处理 使用了float:left ,
“名站导航” 和“酷站精选” 我处理成了<h1> 标题,只要重新定义<h1>即可。名站导航下面的五列内容 每一列里的链接都改为一个列表,指定其长宽,向左浮动,最后有一点尺寸的差异,所以对最后一列的宽度重新定义使之能填满外围图层。这样和原来的外观就一致了。名站导航下面还有一行链接单独定义了一个样式。
接下来的“酷站精选”标题直接应用了<h1>,整个网页处理过程中最难的就是酷站精选的内容,还没有考虑好的时候我只是将原来的内容进行了简单的复制,然后处理后面的部分。回过头来思考怎么处理这部分,两个字的标题是一个颜色,中间的内容和右面的“更多〉〉”倒是基础的链接颜色,每一部分之间还有细线分割,如果对每一部分简单的处理成<div>或者<span>的话就失去了重构的意义了。最后我这样做处理:每一行还是一个列表,两个字的小标题应用一个样式并向左浮动,中间部分包含在<span>里并向左浮动,右面的“更多〉〉”不再指定样式。这样的话比每一部分都包含在块里面要好得多,最好的方法还不是这个,对两个字的小标题应用一个重新定义过的<h2>样式才是最好的,这样文档的结构要更好一些。


这部分里行与行的背景色是相间的,只要指定两个颜色样式,对相应的列表指定就行了。
中部还剩下最后一块:四个门户网站的链接。每一个门户包含在一个<div>里,然后应用左浮动。由于外层的<div>指定了宽度,四个方框排成两行,第一行是绿色边框,第二行是蓝色边框,写边框样式的时候以上面两个的颜色为主,另外两个在内联样式中改写一下。边框中的内容都改在列表里。列表第一行是标题,需要应用标题样式再向左浮动,哈哈效果比原来的还好。列表第二行还需要定义clear:right;这样就使剩下的三行不产生浮动。

在修改过程中遇到了的一些莫名其妙的问题,还想特别说明一下:

左右两部分始终对不齐

这是一开始的左侧部分样式:

#mainleft1 ul {
 font-size: 10px;
}
#mainleft1 li {
 line-height: 24px;
}

在这个样式下预览的时候不同的浏览器显示的效果是不一样的,

无法对齐

后来我将样式修改了问题才解决了:

#mainleft1 li {
 font-size: 10px;
}
#mainleft1 a {
line-height:24px;
}


看上去这两个样式实现的功能是一样的。但是效果不一样,也许是默认样式的问题吧!


IE 的bug


这个问题的的确确是莫名其妙,看一下效果:

ie bug


仔细看一下多出来四个字,会让人很惊讶哦。在其他的浏览器里倒是没有个问题,如果四个方框的间距设的小一些也没有这个问题,最后没有办法只好设置了overflow:hidden 将其隐藏。
到此,中间部分的处理就结束了。

第三步尾部处理
修改过前两部分后,这一部分就容易多了,制定一个#bot1,每一个框应用一次,再应用几个无序列表,构成基本外观。在这一部分遇到的问题是:链接不能左对齐,指定了text-align:left;也不能,最后只好对每一行设置不同的边界、填充,达到对齐的效果。

这样整体就基本完成了。剩下的工作就是细致的调整边框对齐和各部分的空白了。整个工程我花了三天的时间,两天完成基本任务,最后一天用来做细致的调整。最后的文档大小为48.8k比原来的大小整整小了30k呢

最后的完成源文件可以在我的网站找到,点击浏览。

最新的修改2005-10-13

2005-10-28日修改,修正了在ie下显示不正常的部分

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzdjdz.html