练习5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻列表</title>
    <style type="text/css">
        *{
    padding: 0;
    margin:0;
}
.box1{
    width: 602px;
    height: 50px;
    border: 1px  solid rgb(209,209,209);
    border-bottom: none;
    margin: 10px auto;
}
.box2{
    width: 562px;
    height: 50px;
    border-bottom: 1px rgb(209,209,209) solid;
    margin: auto;
}
.box2 h1{
    width: 100px;
    color: #000;
    text-align: center; 
    font: bold 18px "微软雅黑";
    border-bottom: 1px solid red ;  
    padding: 13px 15px;
}
.box2 a{
    display: inline-block;
    color: rgb(166,166,166);
    float: right;
    padding-top: 13px;
    text-decoration: none;
}
.box3{
    width: 602px;
    height: 242px;
    border: 1px  solid rgb(209,209,209);
    border-top: none;
    margin: -10px auto;
}
.list1{
    float: left;
}
.list2{
    float: right;
}
.list1 li{
    list-style: none;
    color: #000;
    font:14px "微软雅黑";
    margin: 20px; 
}
a{
    text-decoration: none;
    color: black;
}
.list2 li{
    list-style: none;
    color: #000;
    font:14px "微软雅黑";
    margin: 20px; 
}
.img1{
    display: inline-block;
    width: 2px;
    height: 2px;
    position: relative;
    top: -6px;  
}
.img2{
    margin-right: 2px;
}
a:hover{
    color:red;
}

    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            <a href="#">更多></a>
            <h1>新闻列表</h1>
        </div>
    </div>
    <div class="box3">
        <ul class="list1">
            <li>
                <img class="img1" src="dot.gif" alt="项目符号">
                <img class="img2" src="icon.jpg" alt="video">
                <a href="">以后出租车不用在地面上走了？不知道出租车司机怎么想？</a>
            </li>
            <li>
                <img class="img1" src="dot.gif" alt="项目符号"> 
                <img class="img2" src="icon.jpg" alt="video">
                <a href="">以后出租车不用在地面上走了？不知道出租车司机怎么想？</a>
            </li>
            <li>
                <img class="img1" src="dot.gif" alt="项目符号"> 
                <img class="img2" src="icon.jpg" alt="video">
                <a href="#">以后出租车不用在地面上走了？不知道出租车司机怎么想？</a>
            </li>
            <li>
                <img class="img1" src="dot.gif" alt="项目符号">
                <img class="img2" src="icon.jpg" alt="video">
                <a href="#">以后出租车不用在地面上走了？不知道出租车司机怎么想？</a>
            </li>
            <li>
                <img class="img1" src="dot.gif" alt="项目符号">
                <img class="img2" src="icon.jpg" alt="video">
                <a href="#">以后出租车不用在地面上走了？不知道出租车司机怎么想？</a>
            </li>
            <li>
                <img class="img1" src="dot.gif" alt="项目符号">
                <img class="img2" src="icon.jpg" alt="video">
                <a href="#">以后出租车不用在地面上走了？不知道出租车司机怎么想？</a>
            </li>
        </ul>
        <ul class="list2">
            <li>2016-06-23</li>
            <li>2016-06-23</li>
            <li>2016-06-23</li>
            <li>2016-06-23</li>
            <li>2016-06-23</li>
            <li>2016-06-23</li>
        </ul>
    </div>

</body>
</html>
12983195-51afc79dcec6bed6.png
推荐阅读更多精彩内容
