自适应新闻列表

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻列表</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        h1 {
            font-weight: normal;
        }

        body {
            padding: 20px;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        /*清除浮动*/
        .clearfix {
            zoom: 1;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both;
        }

        /*ellipsis*/
        .ellipsis {
            display: block;;
            white-space: nowrap; /*文本不换行*/
            -o-text-overflow: ellipsis; /* Opera */
            text-overflow: ellipsis;
            overflow: hidden; /*不允许出现滚动条*/
        }

        /* 自适应新闻列表 左标题右日期 */
        .news1 {
            width: 100%;
        }

        .news1 > li > a {
            padding: 10px 0;
            display: block
        }

        .news1 > li > a:hover {
            color: red;
        }

        .news1 > li > a > .title {
            float: left;
            margin-right: -100px;
            width: 100%;
        }

        .news1 > li > a > .title > p {
            margin-right: 100px;
        }

        .news1 > li span {
            display: block;
            float: right;
            text-align: center;
            width: 80px;
        }

        /*自适应新闻列表 左日期右标题*/
        .news2 {
            width: 100%;
        }

        .news2 > li > a {
            padding: 10px 0;
            display: block;
        }

        .news2 > li > a:hover {
            color: red;
        }

        .news2 > li p {
            font-size: inherit;
            font-weight: normal;

        }

        .news2 > li span {
            float: left;
            display: block;
            text-align: center;
            width: 100px;
        }
    </style>
</head>
<body>

<h1>自适应新闻列表
    <small>左标题右日期</small>
</h1>
<ul class="news1">
    <li>
        <a href="#" class="clearfix">
            <div class="title">
                <p class="ellipsis">CSS高效开发实战</p>
            </div>
            <span>2017-4-2</span>
        </a>
    </li>
    <li>
        <a href="#" class="clearfix">
            <div class="title">
                <p class="ellipsis">Web前端开发最佳实践</p>
            </div>
            <span>2017-4-2</span>
        </a>
    </li>
    <li>
        <a href="#" class="clearfix">
            <div class="title">
                <p class="ellipsis">图解CSS3核心技术与案例实战</p>
            </div>
            <span>2017-4-2</span>
        </a>
    </li>
</ul>

<h1>自适应新闻列表
    <small>左日期右标题</small>
</h1>
<ul class="news2">
    <li>
        <a href="#" class="clearfix">
            <span>2017-4-2</span>
            <p class="ellipsis">CSS高效开发实战</p>
        </a>
    </li>
    <li>
        <a href="#" class="clearfix">
            <span>2017-4-2</span>
            <p class="ellipsis">Web前端开发最佳实践</p>
        </a>
    </li>
    <li>
        <a href="#" class="clearfix">
            <span>2017-4-2</span>
            <p class="ellipsis">图解CSS3核心技术与案例实战</p>
        </a>
    </li>
</ul>
</body>
</html>

 

 

兼容 IE7+，火狐，谷歌

 

posted @ 2017-04-02 12:18  linyongqin  阅读(296)  评论(0)  编辑  收藏  举报