css实战设置新闻内容

示例图
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
/*父级上增加属性overflow：hidden*/
/*在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）*/
/*使用成熟的清浮动样式类，clearfix*/
/*.clearfix:after,.clearfix:before{ content: "";display: table;}*/
/*.clearfix:after{ clear:both;}*/
/*.clearfix{zoom:1;}*/
/*清除浮动的使用方法：*/
/*.con2{... overflow:hidden}*/
        .news_list_con{
            width:600px;
            height: 290px;
            border:1px solid #ddd;
            margin: 50px auto;
            overflow: hidden;
            /*overflow: hidden;   将多余的内容清除掉 */
        /*}*/}
    .news_list_con h3{
        height: 50px;
        width:560px;
        border-bottom: 1px solid #ddd;
        margin: 0px auto;
        color: #000;

    }
        .news_list_con h3 span{
            display: inline-block;
            height:50px;
            border-bottom: 2px solid red;
            /*font: 18px/50px 'Microsoft Himalaya';    字体大小 行高 和字体微软雅黑*/
            font: 18px/50px 'Microsoft Himalaya';
            padding: 0 15px;
            position: relative;

            
        }
        .news_list_con ul{
            list-style: none;
            /*list-style: none; 清除ul的点*/
            padding: 0;
            width: 560px;
            height: 238px;
                margin: 6px auto;
        }
        .news_list_con ul li{
            height:38px;
            border-bottom: 1px solid #ddd;

        }
         .news_list_con ul a{
             float: left;
             height:38px;
             font: 14px/38px 'Microsoft Himalaya';
             color: #000;
             text-decoration: none;
             /*text-decoration: none; 清除多余的线条*/

         }
         .news_list_con ul span{
             float: right;
             height:38px;
                 font: 13px/38px 'Microsoft';
             color: #000;

         }
        .news_list_con ul a:before{
            /*content: '. '; 再前面加点*/
            content: '. '; 
        }
        .news_list_con ul a:hover{
            color: red;
        }
    </style>

</head>
<body>
<div class="news_list_con">
    <h3><span>新闻列表</span></h3>
    <ul>

        <li><a href="#">特征布局：新闻列表所需知识点：盒子模型浮动</a><span>2017-09-29</span></li>
        <li><a href="#">特征布局：新闻列表所需知识点：盒子模型浮动</a><span>2017-09-29</span></li>
        <li><a href="#">特征布局：新闻列表所需知识点：盒子模型浮动</a><span>2017-09-29</span></li>
        <li><a href="#">特征布局：新闻列表所需知识点：盒子模型浮动</a><span>2017-09-29</span></li>
        <li><a href="#">特征布局：新闻列表所需知识点：盒子模型浮动</a><span>2017-09-29</span></li>
        <li><a href="#">特征布局：新闻列表所需知识点：盒子模型浮动</a><span>2017-09-29</span></li>
    </ul>





</div>

</body>
</html>
posted on 2017-09-29 10:18 喵吉欧尼酱阅读(283) 评论(0) 收藏举报
刷新页面返回顶部
喵吉欧尼酱

公告
