拿到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 、后去掉表格，预览时，发现这一部分被撑开了，原来是没有对<form>标签重定义。（做过网页的人可能都知道应该怎么处理只要把<form>标签移动到<td>的外面就行了）。但在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;
}