2009-12-22

CSS 部屬經驗-圖文列表樣式

樣式



HTML 結構

<ul class="Img2HList ClearIt">
<li class="List Odd">
<div class="Container">
<strong class="Title">
<a><span class="Image"><img src="圖片網址" /></span>標題文字</a>
</strong>

<!--其他相關資訊-->
<p class="Info">描述文字</p>
<div class="Meta">文字</div>
<blockquote>文字</blockquote>
</div>
</li>
<li class="List">
<div class="Container">
<strong class="Title">
<a><span class="Image"><img src="圖片網址" /></span>標題文字</a>
</strong>

<!--其他相關資訊-->
<p class="Info">描述文字</p>
<div class="Meta">文字</div>
<blockquote>文字</blockquote>
</div>
</li>
</ul>



CSS 設定

ul.Img2HList {
margin: 1em 0;
overflow: hidden;
}
ul.Img2HList li.List {
position:relative;
display: block;
float: left;
width: 49%;
margin: 0 0 30px 0;
font-size: 11px;
}
ul.Img2HList .Container {
padding: 0 0 0 79px;
}
ul.Img2HList li.Odd {
clear: left;
}
ul.Img2HList li.Odd .Container{
margin-right: 30px;
}
ul.Img2HList strong.Title {
display: block;
font-size:1.1em;
border-bottom: 1px solid #ccc;
}
ul.Img2HList strong.Title span.Image {
float: left;
margin: 0 0 0 -79px;
cursor: pointer;
}



參考頁面:
Last.fm
Wacanai.com

1 回應:

Frank 王 提到...

請問站長

BLOGGER的文章列表是否可以改成像這樣圖文並茂的兩欄呢?