
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 回應:
請問站長
BLOGGER的文章列表是否可以改成像這樣圖文並茂的兩欄呢?
張貼留言