div+cssレイアウト例 タオバオ分析(2)_html/css_WEB-ITnose

先ほどは淘宝ウェブページのトップコードを分析しましたが、今回は淘宝網ウェブページのナビゲーションバーを分析します。DIV と CSS レイアウトを学び始めたばかりの人にとって、どこから始めればよいのかわかりません。優れた Web サイトのソースを分析することから始めます。これは、コードを通じて div と css のレイアウトを学ぶ良い方法です。この div + css レイアウトのチュートリアルは、私が分析して学習しながらまとめたものです。転載したい場合は、ソースを明記してください。さらに、特別に宣言します：このチュートリアルは、淘宝網ウェブサイトの HTML および CSS ソースコードを分析するだけであり、DIV+CSS レイアウトを学習するためのチュートリアルの例として使用されます。タオバオを模倣することにより生じた紛争と責任はあなたが負うものとします。 ありがとうございます。 パート 2 では、タオバオのナビゲーション バーのレイアウト方法について説明します

まずは Web ページのスタイルを見てみましょう。それを 2 つのブロック (実際には 3 つのブロック) に分割します


以下は、まだ Head コンテナを使用しているソース コードのスクリーンショットです。見やすくするために、多くの無関係なコードは省略しています

HTML ソース内の div と CSS の分析コード

1. #Head は前のセクションですでに述べましたが、text-align:center; はテキストの中央揃えです
#Head {
text-align:center; 2. #ChannelMenu は幅を次のように定義します760px、外側パッチの上下、左右は0pxで、テキストは中央揃えです
#Head #ChannelMenu{
margin: 0 auto ;
text-align:center;
}

3. #ChannelMenuItems コンテナは #ChannelMenu 内にありますが、 #ChannelMenu には制限がないので #Head コンテナ直下に書いても同様です もちろん #Head #ChannelMenu のように書くこともできます。この #ChannelMenuItems {}効果は同じです。
#Head #ChannelMenuItems{
width:520px;
height:33px;
margin:0 auto;
ここで定義されているのは幅 520px、高さ 33px、外側のパッチです。 0px

4.ul は #ChannelMenuItems と同じですが、UL を制限していないため、#Head の直下に記述できます。以前の #Head
#Head ul{
を削除することもできます。 list-style-type: none;
margin:0;
padding:0;
}
ここで、リストのスタイルを none、つまり、外側のパッチ、内側のパッチを 0px に設定します。特定のコンテナ内 #Head #ChannelMenuItems 内のスタイル
#Head #ChannelMenuItems li{
float:left;
margin-right:1px;
左からフロート、高さは 33 ピクセル1px
6. リンクスタイルを設定します
#Head #ChannelMenuItems a{
display:block;
height:33px;
背景:transparent url(images/cm_l.gif) 左上 no-repeat; -decoration:none;
}
ブロックモードで表示、左フローティング、高さ 33 ピクセル、背景は左上に配置、繰り返しなし、この設定はその下の a:link、a:visited、a:hover、a:active に影響します
7. 右側の画像の背景を表示するために使用されるspan属性を追加します。
#Head #ChannelMenuItems a spat{
height:33px! important;
height / *ie55*/: 33px;
パディング:11px 12px 0;
背景: 透明 URL(images/cm_r.gif)
テキスト整列: センター;
フォントサイズ:ブロック形式の
表示モードはフローティングのままで、高さは 33 ピクセルです (私も少し混乱していますが、パディングに 3 つのパラメーターがある場合、最初のパラメーターが up、2 番目のパラメーターであることを思い出してください)。パラメータはleftとright、3番目のパラメータはleftとrightで、上の内側のパッチが11px、左右の内側のパッチが12px、背景が繰り返しなく右上に配置されることを示しています。テキストは色 #000 で中央に配置され、サイズは 14px です
左側の背景画像と右側の背景画像を見てみましょう
左:
右:
上記の利点は、2 つの背景があることです左側の画像は適切な長さであるため、画像はさまざまな幅のメニューリストに適応できます

8. アクティブ化時のスタイル
#Head #ChannelMenuItems a:hover{
background:transparent url(images/cm_hov_l.gif) left -3px no -repeat;
}
マウスを置いたときに効果を実現するには、左の背景画像を 3 ピクセル右に移動します (3 ピクセル幅の差を左揃え)、背景画像は繰り返しではなく透明になります
#Head 9. リストに ID が設定されている場合、最後に設定された ID が優先されます
body.CurHome ul#ChannelMenuItems li#MenuHome a、body.CurHome ul#ChannelMenuItems li#MenuHome a:hover{
背景:url(http://pics.taovao.com/bao/album/sys/misc/cm_act_l.gif) 左上 no-repeat;
}
body.CurHome ul#ChannelMenuItems li#MenuHome スパン、body.CurHome ul#ChannelMenuItems li#MenuHome a:ホバー スパン{
背景:透明 URL(http://pics.taovao.com/bao/album/sys/misc/cm_act_r.gif) 右上 no-repeat
font-weight:太字;
カラー:#FFF;

10.#SearchBox
text-align:left;
背景:transparent url(images/searchbox_tab_left.gif)繰り返し;
背景色:#FF9000;
}
11. #Head #SearchBoxTop{
width: 740px;
height: 34px; : 表示 | 非表示 |
値:
デフォルト値。コンテンツを切り取ったり、スクロールバーを追加したりしません。このデフォルト値が明示的に宣言されている場合、オブジェクトは、それを含むウィンドウまたはフレームの寸法にクリップされます。また、クリップ属性の設定は無効になります
auto :? 必要に応じてオブジェクトのコンテンツが切り取られるか、スクロールバーが表示されます
hidden :? オブジェクトのサイズを超えるコンテンツは表示されません
スクロールバーは常に表示されます表示されます

12. #SearchForm
#Head #SearchForm{
width:740px;
height:34px; }

13.
#Head #HotKeywords{
float:left; 8px;
width:752px;
margin-left:3px;
背景:transparent url(images/searchbox_tab_center.gif)

残りのフォームは分析することはできませんが、基本的には同じです

要約すると:

1. 2 つの背景画像を使用して、スパンを介して背景に組み合わせることができます

2.
< など、相対位置を使用してレイヤーをオーバーラップさせます。 li id="MenuInfo" style="position:relative; ">情報

このセクションの終わり、具体的な知識、パラメータについてよく理解する必要があります