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

樣式



HTML 結構

原始碼

1. <ul class="Img2HList ClearIt"> 
2.  <li class="List Odd"> 
3.    <div class="Container"> 
4.      <strong class="Title"> 
5.        <a><span class="Image"><img src="圖片網址" /></span>標題文字</a> 
6.      </strong> 
7.  
8.      <!--其他相關資訊--> 
9.      <p class="Info">描述文字</p> 
10.      <div class="Meta">文字</div> 
11.      <blockquote>文字</blockquote> 
12.    </div> 
13.  </li> 
14.  <li class="List"> 
15.    <div class="Container"> 
16.      <strong class="Title"> 
17.        <a><span class="Image"><img src="圖片網址" /></span>標題文字</a> 
18.      </strong> 
19.  
20.      <!--其他相關資訊--> 
21.      <p class="Info">描述文字</p> 
22.      <div class="Meta">文字</div> 
23.      <blockquote>文字</blockquote> 
24.    </div> 
25.  </li> 
26. </ul> 

<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 設定

原始碼

1. ul.Img2HList { 
2.    margin: 1em 0; 
3.    overflow: hidden; 
4. } 
5. ul.Img2HList li.List { 
6. position:relative; 
7.    display: block; 
8.    float: left; 
9.    width: 49%; 
10.    margin: 0 0 30px 0; 
11.    font-size: 11px; 
12. } 
13. ul.Img2HList .Container { 
14.    padding: 0 0 0 79px; 
15. } 
16. ul.Img2HList li.Odd { 
17.    clear: left; 
18. } 
19. ul.Img2HList li.Odd .Container{ 
20.    margin-right: 30px; 
21. } 
22. ul.Img2HList strong.Title { 
23.    display: block; 
24. font-size:1.1em; 
25.    border-bottom: 1px solid #ccc; 
26. } 
27. ul.Img2HList strong.Title span.Image { 
28.    float: left; 
29.    margin: 0 0 0 -79px; 
30.    cursor: pointer; 
31. } 

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