day 10

小练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        width: 1000px;
        height: 96px;
        background-color:#F4F3F2;
        margin: 100px auto;
        padding:15px 0;
    }
    .box .pic{
        width: 289px;
        height: 96px;
        padding: 0 20px;
        float: left;
        border-right: 1px solid #D0CDC7;
    }
    .box .pic .top{
        height: 65px;
    }
    .box .pic .top img{
        width: 83px;
        float: left;
    }
    .box .pic .top .wz{
        float: left;
        width: 196px;
        padding-left:10px ;
        font-size: 14px;
        font-family:"Simson";
    }
    .box .pic .top .wz .tit{
        line-height:24px;
    }
    .box .pic .top .wz .des{
        font-size:12px;
        line-height:22px;
    }
    .box .pic .top .wz .tit span{
        color:red;
    }
    .box .pic .bottom{
        font-size:14px;
        line-height:34px;
    }
    .box .news{
        float: left;
    }
    .box .news ul{
        list-style:none;
        padding-left:32px;
        font-size:14px;
        line-height:24px;
    }
</style>
<body>
    <div class="box">
       <div class = "pic">
           <div class = "top">
               <img src="images/cctvpic1.jpg" alt="">
               <div class = "wz">
                   <p class = "tit"><span>快看|</span>2019我们一起向她表白</p>
                   <p class = "des">新中国70华诞，为祖国母亲而歌。</p>
               </div>
           </div>
           <div class = "bottom">
               <p>解放军最新地空导弹车曝光！战力惊人</p>
           </div>
       </div>
       <div class = "pic">
        <div class = "top">
            <img src="images/cctvpic2.jpg" alt="">
            <div class = "wz">
                <p class = "tit"><span>中国梦实践者|</span>大国工匠 行业先锋 创业圆梦</p>
            </div>
        </div>
        <div class = "bottom">
            <p>“家国情怀”是新时代一支“强心剂”</p>
        </div>
       </div>
       <div class = "news">
           <ul>
               <li>第七届中国网络视听大会</li>
               <li>聚焦2019数博会</li>
               <li>壮丽70年 奋斗新时代</li>
               <li>2019中国北京世界园艺博览会</li>
           </ul>
       </div>
    </div>
</body>
</html>

 

 

posted @ 2021-03-11 18:39  Viper7  阅读(38)  评论(0)    收藏  举报