<div class="m-demo"> <ul> <li> <div class="cnt"> <div class="img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div> <div class="txt"> <h3><a href="#">標題標題標題標題</a></h3> <p>內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明</p> </div> </div> </li> <li> <div class="cnt"> <div class="img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div> <div class="txt"> <h3><a href="#">標題標題標題標題</a></h3> <p>內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明</p> </div> </div> </li> <li> <div class="cnt"> <div class="img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div> <div class="txt"> <h3><a href="#">標題標題標題標題</a></h3> <p>內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明</p> </div> </div> </li> </ul> </div> <div class="m-demo m-demo-1"> <ul> <li> <div class="cnt"> <div class="img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div> <div class="txt"> <h3><a href="#">標題標題標題標題</a></h3> <p>內容說明內容說明內容說明內容說明</p> </div> </div> </li> <li> <div class="cnt"> <div class="img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div> <div class="txt"> <h3><a href="#">標題標題標題標題</a></h3> <p>內容說明內容說明內容說明內容說明</p> </div> </div> </li> <li> <div class="cnt"> <div class="img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div> <div class="txt"> <h3><a href="#">標題標題標題標題</a></h3> <p>內容說明內容說明內容說明內容說明</p> </div> </div> </li> <li> <div class="cnt"> <div class="img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div> <div class="txt"> <h3><a href="#">標題標題標題標題</a></h3> <p>內容說明內容說明內容說明內容說明</p> </div> </div> </li> <li> <div class="cnt"> <div class="img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div> <div class="txt"> <h3><a href="#">標題標題標題標題</a></h3> <p>內容說明內容說明內容說明內容說明</p> </div> </div> </li> <li> <div class="cnt"> <div class="img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div> <div class="txt"> <h3><a href="#">標題標題標題標題</a></h3> <p>內容說明內容說明內容說明內容說明</p> </div> </div> </li> </ul> </div> <div class="m-demo m-demo-2"> <ul> <li> <div class="cnt"> <div class="img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div> <div class="txt"> <h3><a href="#">標題標題標題</a></h3> <p>內容說明內容說明內容說明內容說明內容說明</p> </div> </div> </li> <li> <div class="cnt"> <div class="img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div> <div class="txt"> <h3><a href="#">標題標題標題</a></h3> <p>內容說明內容說明內容說明內容說明內容說明</p> </div> </div> </li> <li> <div class="cnt"> <div class="img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div> <div class="txt"> <h3><a href="#">標題標題標題</a></h3> <p>內容說明內容說明內容說明內容說明內容說明</p> </div> </div> </li> <li> <div class="cnt"> <div class="img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div> <div class="txt"> <h3><a href="#">標題標題標題</a></h3> <p>內容說明內容說明內容說明內容說明內容說明</p> </div> </div> </li> <li> <div class="cnt"> <div class="img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div> <div class="txt"> <h3><a href="#">標題標題標題</a></h3> <p>內容說明內容說明內容說明內容說明內容說明</p> </div> </div> </li> <li> <div class="cnt"> <div class="img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div> <div class="txt"> <h3><a href="#">標題標題標題</a></h3> <p>內容說明內容說明內容說明內容說明內容說明</p> </div> </div> </li> <li> <div class="cnt"> <div class="img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div> <div class="txt"> <h3><a href="#">標題標題標題</a></h3> <p>內容說明內容說明內容說明內容說明內容說明</p> </div> </div> </li> <li> <div class="cnt"> <div class="img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div> <div class="txt"> <h3><a href="#">標題標題標題</a></h3> <p>內容說明內容說明內容說明內容說明內容說明</p> </div> </div> </li> <li> <div class="cnt"> <div class="img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div> <div class="txt"> <h3><a href="#">標題標題標題</a></h3> <p>內容說明內容說明內容說明內容說明內容說明</p> </div> </div> </li> <li> <div class="cnt"> <div class="img"><a href="#"><img src="http://nec.netease.com/img/s/3.jpg"></a></div> <div class="txt"> <h3><a href="#">標題標題標題</a></h3> <p>內容說明內容說明內容說明內容說明內容說明</p> </div> </div> </li> </ul> </div>
/* 四周不留白列表 */
.m-demo:after,.m-demo li .cnt:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
.m-demo,.m-demo li .cnt{zoom:1;}
.m-demo{width:640px;margin:0 0 1em;overflow:hidden;background:#dfedf0;}
.m-demo ul{padding:0;margin:-11px 0 -10px;}
.m-demo li{padding:10px 0;border-top:1px dashed #999;}
.m-demo .img{float:left;width:100px;height:100px;padding:5px;border:1px solid #ccc;margin-right:-112px;background:#eee;}
.m-demo .img img,.m-demo .img a{display:block;width:100px;height:100px;}
.m-demo .txt{line-height:18px;color:#666;margin-left:122px;}
.m-demo .txt h3{margin:0 0 3px;font-size:14px;}
.m-demo .txt a,.m-demo .txt a:hover{color:#f60;}
.m-demo .txt p{font-size:12px;margin:0;}
/* 橫向左圖右文 */
.m-demo-1 ul{margin:-21px 0 0 -20px;}
.m-demo-1 li{float:left;display:inline;width:200px;overflow:hidden;margin:1px 0 -11px;padding:20px 0 10px 20px;border-top:none;border-bottom:1px dashed #999;}
/* 橫向上圖下文 */
.m-demo-2 ul{margin:-20px 0 0 -20px;}
.m-demo-2 li{float:left;display:inline;width:112px;padding:0;border:none;margin:20px 0 0 20px;overflow:hidden;}
.m-demo-2 .img{float:none;}
.m-demo-2 .txt{margin:6px 0 0 0;}http://nec.netease.com/library/141125