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;
}

云从科技AI开放平台
云从科技AI开放平台

云从AI开放平台

下载

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

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

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

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

24

2026.03.13

Python异步编程与Asyncio高并发应用实践
Python异步编程与Asyncio高并发应用实践

本专题围绕 Python 异步编程模型展开,深入讲解 Asyncio 框架的核心原理与应用实践。内容包括事件循环机制、协程任务调度、异步 IO 处理以及并发任务管理策略。通过构建高并发网络请求与异步数据处理案例,帮助开发者掌握 Python 在高并发场景中的高效开发方法,并提升系统资源利用率与整体运行性能。

41

2026.03.12

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

174

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

50

2026.03.10

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开,重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析,帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系,提升团队协作效率与项目迭代速度。

92

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

102

2026.03.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

227

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

529

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

171

2026.03.04

热门下载

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

精品课程

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

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