受朋友之托，我对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 、后去掉表格，预览时，发现这一部分被撑开了，原来是没有对
