首页 » CSS » 用CSS,制作“新闻标题”案例

用CSS,制作“新闻标题”案例

原文 http://blog.csdn.net/mr_muli/article/details/78816286

2017-12-16 02:00:13阅读(555)

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>

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹