利用CSS制作新闻标题代码教程

17-12-16 来源：[db:作者]
收藏我要投稿
利用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;
            height: 50px;
            border-bottom: 2px solid red;
            font: 18px/50px 'Microsoft Yahei';
            color: #000;
            /* 清除span的padding的上下属性 */
            padding:0 15px;
            position: relative;
        }

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

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

        .new_list_con ul a{
            /*  向左浮动 */
            float: left;
            /*  设置字体大小，行宽，字号 */
            font: 14px/38px 'Microsoft Yahei';
            /*  清除下划线 */
            text-decoration: none;
            /*  设置字体颜色 */
            color: #000;
        }

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

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

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

    </style>


</head>
<body>
    <div class="new_list_con">
        <h3><span>新闻列表</span></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>


    </div>


</body>
</html>
点击复制链接与好友分享!回本站首页