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

来源：互联网发布：哲学视频讲座视频知乎编辑：程序博客网时间：2024/06/08 08:24
用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>
阅读全文
0 0