爱奇艺视频显示列表CSS实现

css:

body{margin:0;font-size: 12px;font-family: "宋体"；}
    ul{margin:0;padding:0;list-style: none;}
    img{border:none;}
    a{text-decoration: none;vertical-align: top;color:#1a1a1a;}
    .clear{zoom:1}
    .clear:after{display: block;content: "";clear:both}

    .wrap{padding-top:18px;border:1px solid #d9d9d9;margin:30px auto;width:680px;height:448px;}
    .header{height:28px;background: url("headerBg.gif") no-repeat 20px 0;}
    .header ul{padding-top: 13px;padding-left:120px;}
    .header li{float:left;padding-right: 18px;line-height:12px; }
    .header .more{float: right;padding-right:24px;}
    .picList{padding-top: 19px;}
    .picList li{float:left;width:112px;padding-left: 20px;}
    .picList strong{display: block;line-height: 32px;padding-bottom: 9px;text-align: center;}

html:

<div class="wrap">
    <div class="header clear" >
        <ul >
            <li><a href="#">电视剧频道</a></li>
            <li><a href="#">韩剧</a></li>
            <li><a href="#">TVB</a></li>
            <li><a href="#">台剧</a></li>
            <li><a href="#">美剧</a></li>
            <li><a href="#">最新片花</a></li>
        </ul>
        <span class="more"><a href="#">更多&raquo</a></span>
    </div>
    <div class="picList clear">
        <ul>
            <li>
                <a href="#">
                    <img src="pic1.gif"/>
                    <strong>笑傲江湖</strong>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="pic2.gif"/>
                    <strong>贤妻</strong>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="pic1.gif"/>
                    <strong>笑傲江湖</strong>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="pic2.gif"/>
                    <strong>贤妻</strong>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="pic1.gif"/>
                    <strong>笑傲江湖</strong>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="pic2.gif"/>
                    <strong>贤妻</strong>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="pic1.gif"/>
                    <strong>笑傲江湖</strong>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="pic2.gif"/>
                    <strong>贤妻</strong>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="pic1.gif"/>
                    <strong>笑傲江湖</strong>
                </a>
            </li><li>
            <a href="#">
                <img src="pic1.gif"/>
                <strong>笑傲江湖</strong>
            </a>
        </li>
        </ul>
    </div>
</div>