NEC學習 ---- 模組 - 左圖右文圖文列表

該模組效果圖:

這個模組也是在開發中經常使用的一種:

HTML程式碼:

<div class="container">
    <div class="m-list3 m-list3-x"><!-- 這裡的 m-list3-x 是什麼類呢, 我們下面來揭曉! -->
        <ul class="f-cb">
            <li>
                <div class="u-img"><a href="#"><img width="100" height="100" src="http://lorempixel.com/100/100/transport/1/Text1/" alt="" /></a></div>
                <div class="txt">
                    <h3><a href="#">標題1</a></h3>
                    <p>內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述</p>
                </div>
            </li>
            <li>
                <div class="u-img"><a href="#"><img width="100" height="100" src="http://lorempixel.com/100/100/transport/2/Text2/" alt="" /></a></div>
                <div class="txt">
                    <h3><a href="#">標題2</a></h3>
                    <p>內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述</p>
                </div>
            </li>
            <li>
                <div class="u-img"><a href="#"><img width="100" height="100" src="http://lorempixel.com/100/100/transport/3/Text3/" alt="" /></a></div>
                <div class="txt">
                    <h3><a href="#">標題3</a></h3>
                    <p>內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述</p>
                </div>
            </li>
        </ul>
    </div>
</div>

CSS程式碼:

<style type="text/css">
　　.container{
　　　　color:#777;
　　　　width:90%;
　　　　margin:45px auto;
　　}
　　.m-list3 {
　　　　padding:1px 0 0 0;
　　　　zoom:1;
　　　　overflow:hidden;
　　　　color:#777;
　　}
　　.m-list3 ul {
　　　　margin:-11px 0 0 0;//margin中的top值是11的由來是, li中margin-top是10px, 加上父元素.m-list3 的padding-top:1px; 正好是 top方向是11px;
　　}
　　.m-list3 li {
　　　　display:inline;//為什麼是inline呢, 其實這裡是為了方便我們調整橫向, 如下一個例子中的示例圖效果.
　　　　float:left;//li 左浮動,配合下面的 width: 100%; 讓li單獨為一行.
　　　　margin-top:10px;
　　　　width:100%;
　　}

　　.m-list3 .u-img {/*圖片的容器*/
　　　　float:left;//做浮動, 並且確定該圖片容器的寬和高, 一般這種模組中的圖片都是定高, 定寬的, 所以容器一定有寬和高.
　　　　width:100px;
　　　　height:100px;
　　}
　　.m-list3 .txt {/*文字容器*/

　　　　float:right;//float和圖片容器相反, 配合width:100%, 這時會讓文字在圖片之下, 讓該容器的margin-left(即是圖片位置,且為圖片寬度):100px;使之和圖片在一行
　　　　width:100%;
　　　　height:95px;//給文字確定高,這裡根據實際確定,有可能也不需要.
　　　　overflow:hidden;
　　　　margin-left:-100px;
　　　　position:relative;//相對定位,配合下面的z-index:-1, 需要圖片顯示在上, 可以點選圖片到指定連結位置
　　　　z-index:-1;
　　}
　　.m-list3 h3, .m-list3 p{/*之後的程式碼是處理文字中的標題和內容*/
　　　　margin-left:110px;
　　　　overflow:hidden;
　　　　line-height:18px;
　　}
　　.m-list3 h3 {
　　　　margin-bottom:5px;
　　}
　　.m-list3 h3 a:hover{
　　　　text-decoration:underline;
　　}
</style>

這裡應用的方式和文章 和 文章 "NEC學習 ---- 佈局 -兩列， 左側定寬，右側自適應" 是一樣的, 可以參考!

而有時候, 我們的需求可能是這種, 如下圖:

這種情況也很常見, 那麼怎麼實現呢? 

其實只需要對上面的程式碼進行稍微的新增就可了.

首先我們找到類.m-list3 會發現有2個類, 多的一個類似.m-list3-x, 我們用這個類來控制橫向

我們增加的css程式碼是:

/*橫排*/
 .m-list3-x li {
    margin:10px 0 0 10px;
    width:230px;//這裡確定每個列表的寬度,根據具體環境決定
}
.m-list3-x ul{
    margin:-11px 0 0 -10px;//間隙根據具體情況決定
}

NEC的佈局和模組真的很方便重新認識自己HTML和CSS的程式碼設計, 這些學習我相信對後臺開發同樣重要.