--div+css レイアウトの例に移動します。淘宝網分析_html/css_WEB-ITnose

转自 http://www.dayanmei.com/blog.php/BlogID_12.htm

对于刚入门学DIV,CSS布局的朋友来说,不知道从那里下手,我以为从分析优秀网站的源代码来学习div,css布局是一个不错的方法,这篇div+ css布局教程是我自己在边分析边学习中总结出来的,如果你要转载请注明出处,另外本人特别声明:本教程只是分析淘宝网站的HTML,CSS源代码,作为 一个教程的例子,达到学习DIV+CSS排版的效果,请勿模仿淘宝,或者仿照淘宝制作网站,谢谢,这是第一篇,淘宝顶部排版方式

我们看看原始图片



通过观察,我们把它分为如下图所示块


具体的HTML,DIV+CSS排版样式为



我们一行一行分析,

1.全部的代码均在一个DIV容器(我暂时这样称呼) Head里面,我们来看看Head的写法
#Head{
    text-align:center;
}
为什么Head前面有一个"#"号呢?
而有的却是在前面加一个"．"比如 "．Head",有时候写css的时候干脆什么也不加,比如 td,body,他们有什么区别,具体怎么用,如果仔细你就会发现在HTML代码的DIV容器里面,有的是

而有的是这样

id と class の文字通りの意味から、id は一意であり、class は複数回再利用できるコンテナに適したクラスであり、CSS にある先頭には何もないことも理解しました。デフォルトの説明は通常、HTML コードに使用されます。つまり、HTML のコードにグローバルな影響を与えます。たとえば、 td は、HTML テーブル内のすべての列に作用します。これは、このコンテナー内のすべてのテキストを意味します。配置は、行の後にセミコロン「;」があることに気づきました。
値の説明: left | left :?左揃え
右揃え :? 中央揃え
両端揃え
#HeadTop{
位置: 相対;
余白: 10px; text-align: left;
}
#HeadTop の前に #Head があるのはなぜですか?
Head の設定を HeadTop にも反映させるために、#headTop がネストされていることがわかりました。ヘッドビハインド
位置: 静的 | 相対
値: 静的:?特別な配置はありません。オブジェクトは HTML の配置ルールに従います
絶対 :? オブジェクトをドキュメント フローの外にドラッグし、left、right、top、bottom およびその他の属性を使用して、最も近い親オブジェクトを基準にして、最も多くの配置設定を使用して絶対配置を実行します。 。そのような親オブジェクトが存在しない場合は、body オブジェクトが使用されます。そして、そのカスケードは z-index 属性を通じて定義されます
修正済み: サポートされていません。オブジェクトの位置決めは絶対方式に従います。ただし、いくつかの仕様に従う必要があります
相対: オブジェクトは積み重ねることはできませんが、左、右、上、下およびその他のプロパティに基づいて通常のドキュメント フロー内でオフセットされます
width: auto | length
auto:?特別な配置はなく、HTML の配置ルールに従って割り当てられます。
length :? 浮動小数点数と単位識別子で構成される長さの値。パーセンテージは親オブジェクトの幅に基づいています。負の値は指定できません。 相対的な長さのピクセル単位 px または単位として絶対的な長さを使用できます (1in = 2.54cm = 25.4 mm = 72pt = 6pc)

margin:10px auto 10px; の 4 辺の外側のパッチを取得または設定します。オブジェクト
4 つすべてが指定されている場合、パラメータ値は上下左右 (時計回り) の順序で 4 つの辺に適用されます。 1 つだけ指定した場合は、4 面すべてで使用されます。 2 つ指定した場合、1 つ目は上下に使用され、2 つ目は左右に使用されます。 3 つ指定した場合、1 つ目は上、2 つ目は左右、3 つ目は下になります。

text-align:left;
Head でテキストの配置が中央に設定されていることがわかりますが、ここではテキストが左に配置されるように定義されています。では、矛盾する定義がある場合、CSS はどのようにテキストを配置するのでしょうか? What color am I? など、HTML と同じ定義が実行されます。
3.
#Head #Logo{
width: 240px;
height: 31px;
margin-left: 2px;
width (幅)、高さ (高さ) は指定されません
float:なし | 左 | 右
値:
デフォルト値。オブジェクトは浮いていません
左:? テキストはオブジェクトの右側に流れます
右:? テキストはオブジェクトの左側に流れます
左の説明は左から配置することになります
left: 2px; maign:0px;0px;0px; と同等
ここでのロゴコンテナの説明は、幅 240px、高さ 31px、左側のパッチで配置されています。 ) 幅は 2 ピクセルです

4. HeadNavBar の左ナビゲーション バー
#Head #HeadNavBar{
float: right;
clear: right;
background: url(images/header_mm_bk.gif) left top no-repeat;
width: 510px;
}

クリア: right; 右側にコンテナが存在できないことを示す、右側のフロート
クリア : なし 左 両方
背景: url(images/header_mm_bk.gif) left top no-repeat | ;
(背景画像が左揃えで繰り返されないことを意味します)
背景 : 背景-画像 || 背景-位置
背景色:シルバー; 背景色
background-image:url(http://www.dayanmei.com/images/space.gif);
背景画像がある場合 背景色を追加すると背景色が上書きされます
background-繰り返し: 繰り返しなし | 繰り返し-x | 繰り返し-y
デフォルト値。背景画像は垂直方向と水平方向に並べて表示されます
no-repeat :? 背景画像は並べて表示されません
repeat-x :? 背景画像は水平方向にのみ並べて表示されます
背景画像は垂直方向にのみ並べて表示されます
background-添付ファイル: 固定
値:
スクロール:? デフォルト値。背景画像はオブジェクトのコンテンツとともにスクロールします
固定 :? 背景画像は固定されています
背景位置 : 長さ || 長さ
背景位置 : 位置 || コンポジションの長さの値。
位置 :? 上 | 左 | 左 | 右
文全体は、幅 510 ピクセルのコンテナーが右から左に配置されることを意味します
#Head ul{
: なし;
パディング:0;
リスト スタイル : リスト スタイル タイプ || リスト スタイル タイプ- style-image: url (url); リストのスタイルを画像に変更できます。 | なし
値: リストを他のスタイルに変更できます
CSS1 のデフォルト値。実線の円
円 :? CSS1 中空の円
10 進数 :? CSS1 アラビア数字
大文字のローマ数字 :? CSS1小文字の英字
upper-alpha :? CSS1 大文字の英字
なし :? CSS1 箇条書きなし
#HeadNavBar li{
height:31px;
背景: url(images / header_mm_sep.gif) 左中央 no-repeat;
display:inline; }
inline オブジェクトのデフォルト値。オブジェクトを強制的にインライン オブジェクトとしてレンダリングし、オブジェクトから行を削除します (行内に表示され、それ以降は表示されません)
表示 : block none inline |
7.
#Head #HeadNavBar li.NoSep{
background: none;
margin-left: 5px;
}
リストブロックのマーククラスが NoSep の場合、背景色はありません "background: url(images/header_mm_sep.gif) left center no- #MyTaoBao {
padding-left: 14px! important;
margin-left: 9px! important;
margin-left: 4px;
background:transparent url(images) /header_mm_mytb_icon.gif) no-repeat left center;
padding:lenth; 内側のパッチ、使用基準マージン、
padding-left: 14px の値を指し、背景を配置するために使用されます。左中央の画像
!重要; 仕様の強化 スタイル ルールの適用優先​​度。
9. リストのリンクスタイルを設定します
#Head #HeadNavBar li a{
padding: 0 6px 0 7px;
line-height:31px; color : #0f3a66;
font-size: 13px;

ブロック形式で表示されます
内側のパッチはそれぞれ 7px、6px です
color: #0f3a66;リンク時の色は # 0f3a66; です
リンクの完全な定義には、背景色、リンク スタイル テキスト装飾 (text-decoration: none[装飾なし] || 下線[下線] || 点滅[テキスト フラッシュ]) も含めることができます。 || overline[upperline] || line-through[through line])
リンクの順序は次のようになります (LVHA)
a:link
a :visited
a :hover
a :active


#Head # HeadNavBar li a:hover{
color: #e60; }

10.
#Head #HeadNavBar li#AdvanceBox {
background: none;
margin-left: 10px;
AdvanceBox はブロック li 内にあるので、順序は #Head #HeadNavBar li#AdvanceBox です。この文は背景なし、左外側のパッチ (左マージン) は 10px です

11. #AdvanceBox で他のフォーム要素を定義します
#Head #HeadNavBar li#AdvanceBox form {

マージン:0;
マージン-トップ: 5px;
#Head#HeaderSearchBox {
float: left; :112px ;
高さ: 15px!
高さ /*ie55*/: 21px;
ボーダー: 1px ソリッド #7ad2ff; header_mm_srch_ bk.png) いいえ - 繰り返します
カラー: #000;}

#Head #HeadNavBar li#AdvanceBox input.DC {
color: #90B1C5 !重要; }

#Head #HeadNavBar li#AdvanceBox .HeaderSearchBtn {
float:left ;
width :750px;
margin-top:6px;
margin-right:6px;
右にフロート、幅は 750px、上部と右側のパッチはそれぞれ 6px です
13. #Head #QuickLinks のリスト li スタイルを定義します
#Head #QuickLinks li{
margin-left:10px;
line-height:21px;

14. #Head #QuickLinks li 内部リンクを定義します。 style, 複数の同一の定義は「,」で区切ることができ、パスは完全に記述する必要があります
#Head #QuickLinks li a:link, #Head #QuickLinks li a:visited {
font-style:normal; : 通常;
font-size: 12px;
color:#04d;

#Head #QuickLinks li a:hover, #Head #QuickLinks li a:active {
color:#e60;

15.
.HackBox{
border-top:1px ソリッド 透明 !重要;
クリア:両方;
2 つの繰り返し定義されたボーダートップがあります (上のボーダー、!重要が優先されます)は 1px 、透明です
クリア: 両方; 行を変更するのと同様に、左右のフロートをクリアします
タオバオのヘッド ナビゲーションは基本的に分析されました:

(1) など、コンテナの div はネストできます。

として、ネストするときにコンテナを記述する方法: コンテナの名前を追加する必要があります#Head #Logo のように前にあると、ロゴが見つかりました。 HeadTop にはロゴに関する制限がないため、コンテナ「HeadTop」に #Head #HeadTop #Logo を記述する必要はありません

(2) シンボルを追加します。一意のコンテナ名の前に「#」を追加し、ユニバーサル名の前に記号「ピリオド」を追加します。 "

(3)。コンテナの基本パラメータには、外側パッチのマージン、内側パッチのパディング、幅、背景が含まれます。 、floating float、clear の使用法を覚えておく必要があります。

(4) 改行が必要です。 表示する場合は、clear:both; の順でリンク スタイルを定義できます。 LVHA (a:link、a:visited、a:hover、a:active)、リンクスタイルのいくつかのパラメータ背景、パディング、幅、テキスト装飾、テキストカラーなど、表示されるリンクを設定できます。ブロック形式

その他まとめられていないものについては、ソースコードを読んでください