【小练习06】HTML+CSS--电影公告

最新推荐文章于 2022-12-22 20:03:14 发布

weixin_30764771

最新推荐文章于 2022-12-22 20:03:14 发布

阅读量270

点赞数

原文链接：http://www.cnblogs.com/TCB-Java/p/6853957.html

版权

要求实现如下效果图：

这里写图片描述

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            h3,h4,p{
                margin: 0;
            }
            ul{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            a{
                text-decoration: none;
            }
            .clearfix:after{
                content: '';
                display: block;
                clear: both;
            }


            section{
                width: 310px;
            }
            section h3{
                height: 28px;
                background: url(images/head_bg.gif);
                font: bold 12px/28px '宋体';
                color: #4c5354;
                padding-left: 38px;
            }
            .imgWrap{
                height: 131px;
                margin: 14px 0;
            }
            .imgLink{
                float: left;
            }
            .imgWrap img{
                padding: 2px;
                margin-right: 12px;
                border: 1px solid #c8c4d3;
            }
            .imgWrap div{
                float: left;
                width: 176px;
            }
            .imgWrap div h4{
                height: 27px;
                line-height: 27px;
            }
            .imgWrap div h4 a{
                font-size: 12px;
                color: #333;
            }
            .imgWrap div span,.imgWrap div p{
                font: 12px/20px "宋体";
                display: block;
                color: #666;
            }

            section li{
                height: 22px;
                font: 12px/22px "宋体";
                background: url(images/ico_01.gif) no-repeat 17px 9px;
                padding: 0 18px 0 31px;
            }
            section li a{
                color: #333;
            }
            section li span{
                color: #888;
                float: right;
            }
        </style>
    </head>
    <body>
        <!--
            划分结构
                1、看边框
                2、看距离
                3、看颜色块
                4、看背景图片

            结构书写的顺序：从上到下，从左往右

            h1          首先，一个页面中只能有一个h1标签，整个页面中找到大标题。如果没有的话，可以选择给logo

            浮动
                1、如果想让两个元素在一行中显示，就用浮动
                2、用完了必需要清，给父级加清除浮动

            一行中所有的元素都浮动了，如果换行的话，那就是父级的宽度不够了
        -->

        <section>
            <h3>明星荐片</h3>
            <div class="imgWrap clearfix">
                <a href="#" class="imgLink"><img src="images/img_01.jpg" alt="" /></a>
                <div>
                    <h4><a href="#">让子弹飞一会</a></h4>
                    <span>导演：姜文</span>
                    <span>主演：姜文 姜文 姜文</span>
                    <p>点评：我最近喜欢的要算我最近喜欢的要算我最近喜欢的要</p>
                </div>
            </div>
            <ul>
                <li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
                <li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
                <li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
                <li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
                <li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
                <li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
            </ul>
        </section>
    </body>
</html>