Pemfaktoran semula hao123_Pertukaran pengalaman

受朋友之托，我对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 ，
“名站导航” 和“酷站精选” 我处理成了

标题，只要重新定义

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

，整个网页处理过程中最难的就是酷站精选的内容，还没有考虑好的时候我只是将原来的内容进行了简单的复制，然后处理后面的部分。回过头来思考怎么处理这部分，两个字的标题是一个颜色，中间的内容和右面的“更多〉〉”倒是基础的链接颜色，每一部分之间还有细线分割，如果对每一部分简单的处理成

或者的话就失去了重构的意义了。最后我这样做处理：每一行还是一个列表，两个字的小标题应用一个样式并向左浮动，中间部分包含在里并向左浮动，右面的“更多〉〉”不再指定样式。这样的话比每一部分都包含在块里面要好得多，最好的方法还不是这个，对两个字的小标题应用一个重新定义过的

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

Dalam bahagian ini, warna latar belakang baris dan baris adalah berselang-seli Hanya tentukan dua gaya warna dan nyatakan senarai yang sepadan.
Terdapat satu bahagian terakhir yang tinggal di tengah: pautan ke empat portal. Setiap portal disertakan dalam

dan kemudian dibiarkan terapung. Oleh kerana lebar bahagian luar

ditetapkan, empat kotak disusun dalam dua baris Baris pertama ialah sempadan hijau, dan baris kedua ialah sempadan biru, warna di atas dua adalah yang utama. Dua lagi ditulis semula dalam gaya sebaris. Kandungan dalam sempadan ditukar kepada senarai. Baris pertama senarai ialah tajuk Ia perlu menggunakan gaya tajuk dan kemudian mengapungkannya ke kiri Kesannya lebih baik daripada yang asal. Baris kedua senarai juga perlu mentakrifkan clear:right supaya baki tiga baris tidak terapung.

Saya menghadapi beberapa masalah yang tidak dapat dijelaskan semasa proses pengubahsuaian, dan saya ingin menerangkannya secara khususnya:

Bahagian kiri dan kanan sentiasa tidak sejajar

Ini ialah gaya bahagian kiri awal:

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

Penyemak imbas yang berbeza memaparkan kesan yang berbeza apabila melihat pratonton dalam gaya ini,

Kemudian saya menukar gaya untuk menyelesaikan masalah:

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

Nampaknya fungsi yang dilaksanakan oleh kedua-dua gaya ini adalah sama. Tetapi kesannya berbeza, mungkin ia adalah masalah dengan gaya lalai!

Pepijat IE

Masalah ni memang membingungkan tengok kesannya:

Perhatikan dengan teliti empat perkataan tambahan, anda akan terkejut. Tidak ada masalah dalam pelayar lain Jika jarak antara empat kotak ditetapkan lebih kecil, tidak akan ada masalah Pada akhirnya, saya tidak mempunyai pilihan selain menetapkan overflow:hidden untuk menyembunyikannya.
Pada ketika ini, pemprosesan bahagian tengah telah tamat.

Langkah ketiga pemprosesan ekor
Selepas mengubah suai dua bahagian pertama, bahagian ini akan menjadi lebih mudah Buat #bot1, gunakannya sekali pada setiap kotak, dan kemudian gunakan beberapa senarai tidak tertib . Masalah yang dihadapi dalam bahagian ini ialah: pautan tidak boleh dijajarkan ke kiri, dan penjajaran teks: kiri tidak boleh ditentukan Pada akhirnya, saya perlu menetapkan sempadan dan padding yang berbeza untuk setiap baris untuk mencapai kesan penjajaran.

Dengan cara ini, semuanya pada dasarnya selesai. Kerja selebihnya ialah melaraskan penjajaran sempadan dan ruang putih setiap bahagian dengan teliti. Keseluruhan projek mengambil masa tiga hari, dua hari untuk menyelesaikan tugas asas, dan hari terakhir untuk membuat pelarasan terperinci. Saiz dokumen akhir ialah 48.8k, iaitu 30k penuh lebih kecil daripada saiz asal

Fail sumber akhir yang lengkap boleh didapati di tapak web saya, klik untuk menyemak imbas.

Pengubahsuaian terkini 2005-10-13

Diubah suai pada 28 Oktober 2005, membetulkan paparan abnormal dalam IE .

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：第5天:head区的其他设置_基础教程Artikel seterusnya：标准布局应用：显示/隐藏侧边栏 [附详细注解]_经验交流

Artikel berkaitan

Lihat lagi

• Ringkasan perkara yang perlu anda perhatikan tentang Border semasa menulis CSS
• Bagaimana untuk merealisasikan pemilihan berbilang gaya dan penukaran masa nyata gaya_Pertukaran pengalaman
• Analisis penggunaan terperinci marquee
• CSS标题线（删除线贯穿线效果）实现
• CSS3中优雅降级和渐进增强的区别

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kitaPenafianSitemap

© php.cn All rights reserved