美文网首页
新闻列表

新闻列表

作者: 幸而0407 | 来源:发表于2018-09-13 20:31 被阅读0次
  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js</title>
    <style type="text/css">
        .total{
            width: 602px;
            height: 292px;
            border:1px solid #d1d1d1;
            margin:50px auto;
            position:relative;
            
        }

        p{
            padding-left:20px;
            font-color:#000 ;
            font-family: '微软雅黑';
            font-size:18px;
            border-bottom: 2px solid red;
            display: inline-block;
            margin:0px 0px;
            position: absolute;
            top:28px;

        }

        .list_box1{
            width: 580px;
            height: 40px;
            margin-top:50px;
            margin-left: 10px;
            margin-right: 10px;
            border-top:2px solid #d1d1d1;
            border-bottom:1px solid #d1d1d1;
            vertical-align: center;
            clear :top;
        }
        .list_box2{
            width: 580px;
            height: 40px;
            margin-left: 10px;
            margin-right: 10px;
            border-bottom:1px solid #d1d1d1;
            vertical-align: center;
        }
        .list_box3{
            width: 580px;
            height: 40px;
            margin-left: 10px;
            margin-right: 10px;
            border-bottom:1px solid #d1d1d1;
            vertical-align: center;
        }
        .list_box4{
            width: 580px;
            height: 40px;
            margin-left: 10px;
            margin-right: 10px;
            border-bottom:1px solid #d1d1d1;
            vertical-align: center;
        }
        .list_box5{
            width: 580px;
            height: 40px;
            margin-left: 10px;
            margin-right: 10px;
            border-bottom:1px solid #d1d1d1;
            vertical-align: center;
        }
        .list_box6{
            width: 580px;
            height: 40px;
            margin-left: 10px;
            margin-right: 10px;
            vertical-align: center;
        }
        span{display:block;
            float:right;
            vertical-align: center;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="total">
        <p>新闻列表</p>
        <div class="list_box1 .clearfix">
            <img src="image/Image 1.png" alt="">崔龙洙解苏宁因何打动他 要以学习的姿态去中超
            <span>2016-06-23</span>
        </div>
        <div class="list_box2">
                    <img src="image/Image 1.png" alt="">崔龙洙解苏宁因何打动他 要以学习的姿态去中超
                    <span>2016-06-23</span>
                </div>
        <div class="list_box3">
                    <img src="image/Image 1.png" alt="">崔龙洙解苏宁因何打动他 要以学习的姿态去中超
                    <span>2016-06-23</span>
                </div>
        <div class="list_box4">
                    <img src="image/Image 1.png" alt="">崔龙洙解苏宁因何打动他 要以学习的姿态去中超
                    <span>2016-06-23</span>
                </div>
        <div class="list_box5">
                    <img src="image/Image 1.png" alt="">崔龙洙解苏宁因何打动他 要以学习的姿态去中超
                    <span>2016-06-23</span>
                </div>
        <div class="list_box6">
                    <img src="image/Image 1.png" alt="">崔龙洙解苏宁因何打动他 要以学习的姿态去中超
                    <span>2016-06-23</span>
                </div>





</body>
</html>
  • 效果图


    Image 2.png

相关文章

网友评论

      本文标题:新闻列表

      本文链接:https://www.haomeiwen.com/subject/zlpggftx.html