当前位置： 移动技术网 > IT编程>网页制作>CSS > 在CSS中，如何编写新闻列表？

在CSS中，如何编写新闻列表？

2017年12月18日  | 移动技术网IT编程  | 我要评论
在CSS中，如何编写新闻列表？ 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻列表</title>
    <style>
        .new_list_con{
            width: 600px;
            height: 290px;
            border: 1px solid #ddd;
            margin: 50px auto;
            /*  多余的部分，进行裁剪 */
            overflow: hidden;
        }

        .new_list_con h3{           
            width: 560px;
            height: 50px;   
            /* 设置下划线 */
            border-bottom: 1px solid #ddd;
            /*  居中，对齐 */
            margin: 0 auto;

        }

        .new_list_con h3 span{
            /*  转换为内联块元素 */
            /*display: inline-block;*/
            float: left;
            height: 50px;
            border-bottom: 2px solid red;
            font: 18px/50px 'Microsoft Yahei';
            color: #000;
            /* 清除span的padding的上下属性 */
            padding:0 15px;
            position: relative;
        }


        .new_list_con h3 a{
            float: right;
            font: 14px/14px 'Microsoft Yahei';
            color: #666;
            text-decoration: none;
            margin-top: 25px;
        }

        .new_list_con h3 a:hover{
            color: red;
        }

        .new_list_con ul{
            /* 清除链接前面的“小圆点” */
            list-style: none;
            /* 清除ul的padding属性 */
            padding: 0;
            width: 560px;
            height: 238px;
            /*  设置左右间距 */
            margin: 7px auto 0;
        }

        .new_list_con ul li{
            /*float: left;*/
            /*  设置每一行的行高，行宽由内容撑开 */
            height: 38px;
            /*  设置每一行的下划线 */
            border-bottom: 1px solid #ddd;
        }

        .new_list_con ul a{
            /*  向左浮动 */
            float: left;
            /*  设置字体大小，行宽，字号 */
            font: 14px/38px 'Microsoft Yahei';
            /*  清除下划线 */
            text-decoration: none;
            /*  设置字体颜色 */
            color: #000;
            text-indent: 30px;
            background: url(2.jpg) 3px center no-repeat;
        }

        .new_list_con ul span{
            /*  日期，向右浮动 */
            float: right;
            /* 设置行宽 */
            height: 38px;
            /* 居中对齐 */
            line-height: 38px;
            color: #000;
        }

/*      .new_list_con ul li:before{
             在文字前面加“小圆点” 
            content: '· '
        }*/

        .new_list_con ul a:hover{
            /* 触摸变色 */
            color: red;
        }

    </style>


</head>
<body>
    <p class="new_list_con">
        <h3><span>新闻列表</span><a href="#">更多&gt;&gt;</a></h3>
        <ul>
            <li><a href="">原因并不只有天气</a><span>2017-12-15</span></li>
            <li><a href="">原因并不只有天气</a><span>2017-12-15</span></li>
            <li><a href="">原因并不只有天气</a><span>2017-12-15</span></li>
            <li><a href="">原因并不只有天气</a><span>2017-12-15</span></li>
            <li><a href="">原因并不只有天气</a><span>2017-12-15</span></li>
            <li><a href="">原因并不只有天气</a><span>2017-12-15</span></li>
        </ul>
    </p>

</body>
</html>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网