第7章 浮动（制作电视剧详情列表页面）

<div class="div00">
        <header>
            <div class="div01">
                <h1>明星荐片</h1>
            </div>
        </header>
        <section>
            <div class="div02">
                <img src="image/3.gif" alt="">
                <h1>周秀娜荐片:让子弹飞</h1>
                <p>导演：姜文</p>
                <p>主演：姜文 周润发 葛优</p>
                <p>点评：我最喜欢的要算《让子弹飞》了,超喜欢...[详情]</p>
            </div>
            <ul>
                <li><a href="#">《巴别塔》：好的故事引人深思<span>阿朵</span></a></li>
                <li><a href="#">《洛杉矶之战》：外星人那么弱智？<span>丁子俊</span></a></li>
                <li><a href="#">《让子弹飞》：武侠里也可以有爱情<span>周秀娜</span></a></li>
                <li><a href="#">《剑雨》：好的故事引人深思<span>叶年生</span></a></li>
                <li><a href="#">《春风沉醉的夜晚》：非常真实<span>如小果</span></a></li>
                <li><a href="#">《克洛伊》：故事简单却细致<span>刘若英</span></a></li>
            </ul>
        </section>
        <footer>
    
        </footer>
    </div>

<style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .div00{
            width: 330px;
            margin: 0px auto;
        }
        .div00 header .div01{
            border: 1px solid #666;
            line-height: 30px;
            padding: 2px 40px;
            margin: 10px 0px;
            background: url(image/1.gif) no-repeat 15px 11px;
            vertical-align: middle;
        }
        .div00 header .div01 h1{
            font-size: 14px;
        }
        .div00 section .div02 img{
            float: left;
            border: 1px solid #808080;
            padding: 2px;
            margin: 8px 0px;
        }
        .div00 section .div02 h1{
            overflow: hidden;
            font-size: 12px;
            padding:20px 0px 15px 10px;
        }
        .div00 section .div02 p{
            overflow: hidden;
            font-size: 12px;
            line-height: 25px;
            padding-left: 10px;
        }
        .div00 section ul{
            list-style: none;
            overflow: hidden;
            clear: both;
            margin: 20px 0px;
        }
        .div00 section ul li a{
            text-decoration: none;
            line-height: 27px;
            font-size: 12px;
            color: #808080;
            clear: both;
            overflow: hidden;
        }
        .div00 section ul li a span{
            clear: both;
            float: right;
        }
        .div00 section ul li a:hover{
            text-decoration: underline;
            color: orange;
        }
    </style>