css实战设置新闻内容

时间：2017-09-29 11:02:03 阅读：187 评论：0 收藏：0 [点我收藏+]

标签：方法 text logs code 新闻 block bsp ack log

示例图

技术分享

<!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>

css实战设置新闻内容

标签：方法 text logs code 新闻 block bsp ack log

原文地址：http://www.cnblogs.com/Mjonj/p/7609823.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行