0

0

对hao123进行重构_经验交流

php中文网

php中文网

发布时间:2016-05-16 12:10:01

|

2018人浏览过

|

来源于php中文网

原创

受朋友之托,我对hao123.com网站首页进行了div+css的重新布局,精简源码,以适应现在的形势。


拿到hao123.com的首页,首先对原来的布局进行了分析:
源文件的大小为80k,文字内容较多,图片只有6个。布局不是很复杂分上中下三行,上部有5行: logo 广告区、 一个 功能区、 邮箱登陆区、 百度搜索栏、 最后是推荐。中部有两行 每行有两列 第一行左边是分类导航, 右边是名站导航和分类精选, 有1000px高, 第二行是酷站秀 和 四个门户网站的导航链接。下部是几个专题栏目,还有 一个综合搜索引擎,最底部自然就是版权栏了。


接下来我对每一部分的布局和颜色进行了详细的分析。
Hao123以链接为主,整个网站主要的链接颜色 是#000(黑色), 鼠标经过时变为 #f00(红色)并添加了下划线, 访问过的链接为 #000无下划线, 活动链接为 #0f0 无下划线 ,还有一部分链接为橙色、绿色 。
下面是分析后的结果以及对每一部分指定的id

区域id  功能 背景色(rgb)  颜色(rgb)  尺寸(px)
Head0  logo AD  - - 743/72
head1 收藏/帮助等 #3db836 #fff    740/15
head2 邮箱入口 #f0f7ff #0f0 740/21
head3 百度搜索 #d9d9d9   #0f0  740/17
head4 推荐   #000 740/23
mainleft 分类导航  背景图片   #000   157
mainright 名站导航酷站精选 #0f0 #FFF8F0 #F0F7FF #000i橙色 红色 571
coolsite 酷站秀 绿色 黑色 157
top4 门户站  #82F43E #80cbf9   黑色
bot1 其他网址 - 绿色 740

完成了分析,接下来进行细致的改造工作!
第一步:网页顶部
对网页顶部的操作还是比较简单的,只是将每一部分改写为div的形式。#head0原来是一个表格,其实没有必要用表格的,因为没有表格时,3个图片也是排在一行,只需要对第二个图片指定水平间距就可以和原来使用表格时的外观完全一致。
下来#head1是几个功能链接。 原来的布局为四个单元格的表格,我将表格去掉,对head1的样式表指定宽度、高度、行高、背景色、前景色使之形成基本的布局,然后又添加了一个    #head1 a 的id选择器,指定该区域链接的颜色为白色,外补丁(margin)为16xp,接着又单独对第一个链接的外补丁重新定义了一下,写入内联样式。
#head2是搜索栏。定义好#head2、 #head a:link、 #head a:visited 、后去掉表格,预览时,发现这一部分被撑开了,原来是没有对

标签重定义。(做过网页的人可能都知道应该怎么处理只要把
标签移动到的外面就行了)。但在css里我们只需要重新定义form标签:form{margin:0;padding:0;},再次预览一切OK!
有了上面的处理,对#head3的修改就比较简单了,只需定义好#head3 、#head3 a。对#head4也进行同样的处理。
这样整个网页顶部就处理完毕!


第二步 中部处理
整个网页中这部分的处理是最复杂的,最耗时的。在制作过程中还走了弯路(刚开始分析的时候我将酷站秀部分和门户网站分到了尾部来处理,结果非常的糟糕,浮动后根本无法对齐,后来将这两部分改到了中部处理就没有问题了)。


左侧部分是一个两列的表格,每一个链接前有一个绿色的菱形图案 。一开始考虑将方块做成一个图片,可是最后算了一下大小,没有必要这样去做。由于网面的主链接是黑色的,而且已经定义好,仔细分析后发现只需要定义一下列表的文字颜色和字号就完全可以解决问题。


#mainleft1 {
 width: 154px;
 float: left;
 background-image: url(line.gif);
 border: 2px solid #7bd676;
 text-align: center;
 color: #3DB836;
 margin-bottom: 5px;
}
#mainleft1 li {
 font-size: 10px;
 margin-left:8px;
}


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


最重要的部分是名站导航、酷站精选。 这部分和下面的 四个门户网站一起放在了一个

里面处理 使用了float:left ,
“名站导航” 和“酷站精选” 我处理成了

标题,只要重新定义

即可。名站导航下面的五列内容 每一列里的链接都改为一个列表,指定其长宽,向左浮动,最后有一点尺寸的差异,所以对最后一列的宽度重新定义使之能填满外围图层。这样和原来的外观就一致了。名站导航下面还有一行链接单独定义了一个样式。
接下来的“酷站精选”标题直接应用了

,整个网页处理过程中最难的就是酷站精选的内容,还没有考虑好的时候我只是将原来的内容进行了简单的复制,然后处理后面的部分。回过头来思考怎么处理这部分,两个字的标题是一个颜色,中间的内容和右面的“更多〉〉”倒是基础的链接颜色,每一部分之间还有细线分割,如果对每一部分简单的处理成
或者的话就失去了重构的意义了。最后我这样做处理:每一行还是一个列表,两个字的小标题应用一个样式并向左浮动,中间部分包含在里并向左浮动,右面的“更多〉〉”不再指定样式。这样的话比每一部分都包含在块里面要好得多,最好的方法还不是这个,对两个字的小标题应用一个重新定义过的

样式才是最好的,这样文档的结构要更好一些。


这部分里行与行的背景色是相间的,只要指定两个颜色样式,对相应的列表指定就行了。
中部还剩下最后一块:四个门户网站的链接。每一个门户包含在一个

里,然后应用左浮动。由于外层的
指定了宽度,四个方框排成两行,第一行是绿色边框,第二行是蓝色边框,写边框样式的时候以上面两个的颜色为主,另外两个在内联样式中改写一下。边框中的内容都改在列表里。列表第一行是标题,需要应用标题样式再向左浮动,哈哈效果比原来的还好。列表第二行还需要定义clear:right;这样就使剩下的三行不产生浮动。

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

左右两部分始终对不齐

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

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

E购-新零售系统
E购-新零售系统

“米烁云货宝”,是一款基于云计算的Saas模式新零售系统。以互联网为基础,通过大数据、人工智能等先进技术,对商品的生产、流通、销售、服务等环节转型升级改造,进而重塑业态结构与生态圈。并对线上交易运营服务、线下体验购买及现代物流进行深度融合,所形成的零售新模式。

下载

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

 无法对齐后来我将样式修改了问题才解决了:

#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下显示不正常的部分

相关专题

更多
Golang gRPC 服务开发与Protobuf实战
Golang gRPC 服务开发与Protobuf实战

本专题系统讲解 Golang 在 gRPC 服务开发中的完整实践,涵盖 Protobuf 定义与代码生成、gRPC 服务端与客户端实现、流式 RPC(Unary/Server/Client/Bidirectional)、错误处理、拦截器、中间件以及与 HTTP/REST 的对接方案。通过实际案例,帮助学习者掌握 使用 Go 构建高性能、强类型、可扩展的 RPC 服务体系,适用于微服务与内部系统通信场景。

8

2026.01.15

公务员递补名单公布时间 公务员递补要求
公务员递补名单公布时间 公务员递补要求

公务员递补名单公布时间不固定,通常在面试前,由招录单位(如国家知识产权局、海关等)发布,依据是原入围考生放弃资格,会按笔试成绩从高到低递补,递补考生需按公告要求限时确认并提交材料,及时参加面试/体检等后续环节。要求核心是按招录单位公告及时响应、提交材料(确认书、资格复审材料)并准时参加面试。

44

2026.01.15

公务员调剂条件 2026调剂公告时间
公务员调剂条件 2026调剂公告时间

(一)符合拟调剂职位所要求的资格条件。 (二)公共科目笔试成绩同时达到拟调剂职位和原报考职位的合格分数线,且考试类别相同。 拟调剂职位设置了专业科目笔试条件的,专业科目笔试成绩还须同时达到合格分数线,且考试类别相同。 (三)未进入原报考职位面试人员名单。

58

2026.01.15

国考成绩查询入口 国考分数公布时间2026
国考成绩查询入口 国考分数公布时间2026

笔试成绩查询入口已开通,考生可登录国家公务员局中央机关及其直属机构2026年度考试录用公务员专题网站http://bm.scs.gov.cn/pp/gkweb/core/web/ui/business/examResult/written_result.html,查询笔试成绩和合格分数线,点击“笔试成绩查询”按钮,凭借身份证及准考证进行查询。

11

2026.01.15

Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

65

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

36

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

75

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

21

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

35

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
进程与SOCKET
进程与SOCKET

共6课时 | 0.3万人学习

Go语言web开发--经典项目电子商城
Go语言web开发--经典项目电子商城

共23课时 | 1.2万人学习

php初学者入门课程
php初学者入门课程

共10课时 | 0.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号