欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-03-29 20:41:24
利用CSS制作新闻标题代码教程 ...
利用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>
    <p 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>


    </p>


</body>
</html>

 

上一篇： 使用Redis锁处理数据库并发问题

下一篇： Lucene .NET 全文检索

推荐阅读