検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >リファクタリング hao123_Experience 交換

リファクタリング hao123_Experience 交換

WBOY
WBOYオリジナル
2016-05-16 12:10:011678ブラウズ

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

标题，只要重新定义

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

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

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


この部分では、行と行の背​​景色が交互になります。2 つの色のスタイルを指定し、対応するリストを指定するだけです。
中央には最後の部分が 1 つ残っています。それは 4 つのポータルへのリンクです。各ポータルは

で囲まれ、フロート状態のままになります。外側の
の幅を指定するので、1行目は緑の枠、2行目は青の枠で囲みます。残りの 2 つはインライン スタイルで書き換えられます。枠線内の内容がリストに変更されます。リストの最初の行はタイトルです。タイトル スタイルを適用してから、元の行よりも左にフローティングする必要があります。残りの 3 行がフローティングにならないように、リストの 2 行目も clear:right; を定義する必要があります。

修正プロセス中にいくつかの不可解な問題に遭遇しました。特にそれらについて説明したいと思います。

左右のパーツがいつもずれてしまう

これは最初の左側部分のスタイルです:

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

このスタイルでプレビューすると、ブラウザーごとに異なる効果が表示されます。

无法对齐その後、問題を解決するためにスタイルを変更しました:

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


これら 2 つのスタイルで実装される機能は同じであるようです。しかし、効果は異なります。デフォルトのスタイルに問題があるのか​​もしれません。


IE のバグ


この問題は実に不可解です。その影響を見てください: ie bug


余分な 4 つの単語を注意深く見てください。驚くでしょう。他のブラウザでは問題ありませんが、4つのボックス間の距離を小さく設定すれば、最終的にはoverflow:hiddenを設定して非表示にするしかありません。
この時点で、中間部分の処理は終了です。

末尾処理の 3 番目のステップ
最初の 2 つの部分を変更した後、この部分は非常に簡単になります。#bot1 を作成し、それを各ボックスに 1 回適用してから、いくつかの順序なしリストを適用します。 . 基本的な外観を作成します。この部分で発生する問題は、リンクを左揃えにすることができないこと、および text-align: left を指定できないことです。最終的に、配置効果を実現するには、各行に異なる境界とパディングを設定する必要があります。

このようにして、基本的に全体が完了します。残りの作業は、各パーツの境界線の位置と余白を慎重に調整することです。プロジェクト全体には 3 日かかり、基本的なタスクを完了するのに 2 日、詳細な調整に最後の 1 日を費やしました。最終的なドキュメントのサイズは 48.8k で、元のサイズよりも完全に 30k 小さくなります

最終的に完成したソース ファイルは私の Web サイトにあります。クリックして参照してください。

最新の変更 2005-10-13

2005年10月28日修正、IEでの表示異常を修正。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：5日目：ヘッドエリアのその他の設定_基本チュートリアル次の記事：5日目：ヘッドエリアのその他の設定_基本チュートリアル

関連記事

続きを見る