demo25-今日头条案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .today{
                width: 285px;
                height: 310px;
                border-top: 1px solid #C8DCF2;
                border-bottom: 1px solid #C8DCF2;
            }
            .today .today-title{
                width: 285px;
                height: 40px;
            }
            .today .today-title h3{
                font-size: 16px;
                font-family: "微软雅黑";
                color: #172C45;
                float: left;
                line-height: 40px;
                /*
                 margin:表示外边框,默认情况下,使用了文字,系统会帮助我们自动添加16px宽度的边框
                 * */
                margin: 0px;
            }
            .today .today-title a{
                font-size: 12px;
                font-family: "微软雅黑";
                color: #172C45;
                float: right;
                /*
                 text-decoration: none;去掉下划线
                 * */
                text-decoration: none;
                line-height: 40px;
                margin: 0px;    
            }
            p{
                font-size: 12px;
                font-family: "微软雅黑";
                line-height: 20px;
                text-indent: 2em;
            }
        </style>
    </head>
    <body>
        <!--整个大盒子-->
        <div class="today">
            <!--顶部盒子-->
            <div class="today-title">
                <h3>今日头条</h3>
                <a href="#">更多>>></a>
            </div>
            <div class="img">
                <img src="img/banner.jpg" />
            </div>
            <!--底部文字-->
            <div class="bottom">
                <p>
                    9月27日，XXX开始在辽宁考察。一次考察跨越三省，这在党的十八大以来是头一回。在辽宁，XXX首先来到中国东北地区建城最早的城市——辽阳。他走访了哪里，传递了什么样的信息，《时政新闻眼》为您解析。
                </p>
            </div>
        </div>
    </body>
</html>
演示效果;
demo25-今日头条案例

猜你喜欢
