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

在第三节第一小节我们分析了淘宝网页的主体代码的左侧部分,今天我们来分析淘宝网页的主要内容的右侧部分,对于刚入门学DIV,CSS 布局的朋友来说,不知道从那里下手,我以为从分析优秀网站的源代码来学习div,css布局是一个不错的方法,这篇div+ css布局教程是我自己在边分析边学习中总结出来的,如果你要转载请注明出处,另外本人特别声明:本教程只是分析淘宝网站的HTML,CSS源代码,作为 一个教程的例子,达到学习DIV+CSS排版的效果,请勿模仿淘宝,或者仿照淘宝制作网站,由此产生的纠纷和责任自负,谢谢,这是第三篇第二节,淘宝主体 内容右侧分析

还是来看看框架分拆图片



从分拆我们看到,右侧部分被裁成了上下两大块,然后再进行拆分,先分析上部分

1.上部分又分为左(ADList)右(NewbieGuide)两个块
#ADList{
    float:left;
    width:380px;
    height:191px;
}
定义了该容器ADlist的宽度(380px)高度(191px)以及浮动方式(左浮动)

#NewbieGuide{
    margin-bottom:10px;
    width:108px !important;
    width:100px;
    float:right;
    background-color:#EBEBEB;
    border:1px #B2D3FF solid;
    background:#E4EFFE url(images/home_login_bg.gif) 3px 3px no-repeat!important;;
    height:189px;
}
定义了容器的宽度width:108px !important;高度height:189px,底部外补丁margin-bottom:10px;,背景色为#E4EFFE,背景图片,浮动方式 为右浮动 float:right, 380+108=498px < (760-260),所以不会发生重叠现象

2.分析ADlist容器,该容器包含两个容器#ADListText,#ADListImg
#ADListText,#ADListImg{
margin-top:6px;
}
定义了顶部外补丁为6px

容器ADlist的上部分容器#ADListText
#ADList ul{
margin:0;
padding:0;
list-style-type:none;
}
定义块ul外补丁0,内补丁0,列表样式为无
其中该块ul又在ADlistText内,所以依据最近原则,那么下面的定义是生效的,即左外补丁为10px
#ADListText ul {
margin-left:10px;
}

#ADListText ul li{
float:left;
line-height:16px;
line-height:20px;
padding:0;
margin:0;
width:170px;
display:block;
padding-left:12px;
background:transparent url(images/top_icon.gif) 3px 7px no-repeat;
}
定义了块ul内的列表样式,左浮动float:left;行高line-height:20px;,当有两个重复定义时,最后一个将起作用,内补丁,外补 丁为0,但后面又设置了左内补丁padding-left:12px,说明左内补丁是12px,以块状方式显示display:block;背景图片透 明,距离列表左边的距离是3px,距离列表上边距为7px,不重复,我们看到列表是以2列多行排列的, (170+12)*2=364<380(ADlist宽度),所以 列表在从左浮动排列两列后自动换行

如果愿意,你还可以定义列表的链接样式,可以这样定义
#ADListText a{
display:block;
}
定义链接以及访问后的颜色
#ADListText a:link,#ADListText a:visited {
color:#008200;
text-decoration:none;
}
#ADListText a:hover,#ADListText a:active {
color:#002800;
text-decoration:underline;
}

清除这个容器的浮动以后继续排列下面的容器#ADListImg

ul ブロッ​​クは以下に定義されています
#ADListImg li{
width:76px;
リストの幅を定義します左から 76px になります フローティングを開始し、テキストを中央に揃えます。7*76=380 == 380px で 5 つの列が配置されます。
次に、リスト内の画像パラメーターを定義します li
#ADListImg li img{
border:1px #ご覧のとおり、画像の境界線は 1 ピクセルの実線です #ccc border : border-width || border-style || border-color
ボーダーの幅、スタイル、色を定義できます
3. 次に、右側のコンテナー (つまり、登録) を分析しましょう。 block)
NewbieGuide コンテナ全体の定義は前に述べたように、内部ブロックを分析するには ul
#NewbieGuide ul{
margin:14px 8px 0 0 ! important;
margin:14px 4px 0 0;
list-style:none;
text-align:center;
list-style-type:none; }
このブロックは外側のパッチ (上は 14 ピクセル、右は 8 ピクセル、下は左の外側パッチは 0) を定義します。 patch は 0、link style は none ですが、実際には list-style-type は既に None として定義されていると思いました。定義されていない場合はデフォルトであるため、list-style を None として定義する必要はありません

としましょう。リストのスタイルを見てみましょう
#NewbieGuide ul li{
表示: ブロック; width: 100px;
margin:0 0 4px 4px;
ブロックdisplay display:block; width 100px width: 100px, height 34px, 外側パッチ下 5 ピクセル左 4 ピクセル

画像を見ると、それが画像の配置であると思いますが、実際には、コードにはテキストが含まれています。効果はありますか？
以下は HTML コードです
​​ ;li id="NG登録">無料登録
ビデオチャット 整合性とセキュリティ
リスク< ;/a>
ul li a{
表示:ブロック;
高さ: 34ピクセル;
定義リストはブロック形式で表示されます (display:block)、幅 100px、高さ 34px、テキスト スタイルは None です
テキスト リンクを表示しない場合は、span を定義することで実現できます
#NewbieGuide ul li a span{
display:none; }

#初心者ガイド ul li#NG登録 a{
背景:透明 url(images/mfzc_index070105.gif ) 0 0 繰り返しなし;
}
#初心者ガイド ul li#NGOpenShop a{
背景:透明 url(images/splt_index070105.gif) 0 0繰り返しなし;
}
#初心者ガイド ul li#NGTrust a{
背景: 透明 URL(images/cxaq_index070105.gif) 0 0 繰り返しなし
}
#初心者ガイド ul li#NGalipay a{
背景:透明 url(

1. 複数のコンテナがある場合、フローティングフロートを介して配置を設定し、配置表示を制御できます。幅、高さなどによる方法。

2. 前と同じ内容を除いて、このセクションの特別な点は、リンクをブロックで表示し、テキストを非表示にして、画像のようなリンク効果を実現していることだと思います

3. 特定のコンテナーのネスト、パラメーター、インデントは、背景画像のインデントと配置など、具体的に理解し、適用する必要があります