新闻列表

作者: neko233 | 来源:发表于2018-09-14 09:15 被阅读0次

新闻列表
新闻列表
新闻列表
新闻列表
新闻列表
新闻列表
新闻列表
新闻列表
新闻列表
ul


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻列表</title>
    <style type="text/css">
        *{
    margin: 0;
    padding: 0;
}
.box1{
    width: 602px;
    height: 292px;
    border: 1px solid #cccccc;
    margin: 50px auto;
}
#s1{
    display: inline-block;
    font: bold 18px 微软雅黑;
    color: #000;
    padding: 13px 30px;

}
#s2{
    margin: 0 20px 0 390px;
    font: bold 14px 微软雅黑;
    color: #cccccc;
}
.box2{
    width: 562px;
    height: 242px;
    border-top: 1px solid #cccccc;
    margin: 0 20px;
    position: relative;


}
.box3{
     width: 100px;
    border-top: 2px solid red;
    position: absolute;
    left: 0;
    top: -1px;

}
.box2 ul{
    list-style: none;
    margin-top: 10px;
}
.box2 li{
    position: relative;
    border-bottom: 1px solid #fcfcfc ;
}
.pic1{
    margin: 15px 8px 15px 0;
}
.pic2{
    margin: 5px 2px 8px 0px;
}
.box2 a{
    text-decoration: none;
}
.span1{
    font:14px 微软雅黑;
    color: #000;
    padding: -1px;
    display: inline-block;
    position: absolute;
    top:7px
}
.span2{
    font:14px 微软雅黑;
    color: #000;
    padding: -1px;
    display: inline-block;
    position: absolute;
    left: 482px;
    top:6px
}
</style>
</head>
<body>
<div class="box1">
    <span id="s1">新闻列表</span>
    <span id="s2">更多>></span>
    <div class="box2">
        <div class="box3"></div>
        <ul>
            <li><a href="#"><img class="pic1" src="img/dot.gif"><img class="pic2" src="img/icon.jpg"><span class="span1">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</span><span class="span2">2018-09-13</span></a></li>
            <li><a href="#"><img class="pic1" src="img/dot.gif"><img class="pic2" src="img/icon.jpg"><span class="span1">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</span><span class="span2">2018-09-13</span></a></li>
            <li><a href="#"><img class="pic1" src="img/dot.gif"><img class="pic2" src="img/icon.jpg"><span class="span1">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</span><span class="span2">2018-09-13</span></a></li>
            <li><a href="#"><img class="pic1" src="img/dot.gif"><img class="pic2" src="img/icon.jpg"><span class="span1">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</span><span class="span2">2018-09-13</span></a></li>
            <li><a href="#"><img class="pic1" src="img/dot.gif"><img class="pic2" src="img/icon.jpg"><span class="span1">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</span><span class="span2">2018-09-13</span></a></li>
            <li><a href="#"><img class="pic1" src="img/dot.gif"><img class="pic2" src="img/icon.jpg"><span class="span1">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</span><span class="span2">2018-09-13</span></a></li>
        </ul>

    </div>
</div>
</body>
</html>

新闻列表.png