SOURCE

<!-- 1. 普通列表 -->
<div class="m-txt">
    <ul class="block">
        <li class="item">
            <div class="inner">
                <h3 class="tit"><a href="">响应式网站如何设计？</a></h3>
                <div class="desc">响应式网站越来越流行，那么设计图如何设计出优秀体验的响应式网页呢？</div>
            </div>
        </li>
        <li class="item">
            <div class="inner">
                <h3 class="tit"><a href="">一个周六，一群人，一座山</a></h3>
                <div class="desc">三月底是看花季不是登山季</div>
            </div>
        </li>
    </ul>
</div>



<!-- 2. 底部边框通栏 -->
<div class="m-txt layout2">
    <ul class="block">
        <li class="item">
            <div class="inner">
                <h3 class="tit"><a href="">响应式网站如何设计？</a></h3>
                <div class="desc">响应式网站越来越流行，那么设计图如何设计出优秀体验的响应式网页呢？</div>
            </div>
        </li>
        <li class="item">
            <div class="inner">
                <h3 class="tit"><a href="">一个周六，一群人，一座山</a></h3>
                <div class="desc">三月底是看花季不是登山季</div>
            </div>
        </li>
    </ul>
</div>



<!-- 3. 包含右侧信息 -->
<div class="m-txt">
    <ul class="block">
        <li class="item">
            <div class="inner">
                <h3 class="tit layout2">
                    <span class="date">2018-05-14</span>
                    <a href="">标题包含右侧信息，右侧信息始终固定在右边。超出时，左侧内容自动加省略号。标题包含右侧信息，右侧信息始终固定在右边。超出时，左侧内容自动加省略号。</a>
                </h3>
            </div>
        </li>
        <li class="item">
            <div class="inner">
                <h3 class="tit layout2">
                    <span class="date">2018-05-14</span>
                    <a href="">标题包含右侧信息，右侧信息始终固定在右边。超出时，左侧内容自动加省略号</a>
                </h3>
            </div>
        </li>
    </ul>
</div>



<!-- 4. 右侧信息跟随，超出时左侧自动隐藏 -->
<div class="m-txt">
    <ul class="block">
        <li class="item">
            <div class="inner">
                <h3 class="tit layout3">
                    <a href="">右侧信息跟随左侧标题，超出时，左侧内容自动隐藏。右侧信息跟随左侧标题，超出时，左侧内容自动隐藏。右侧信息跟随左侧标题，超出时，左侧内容自动隐藏。</a>
                    <span class="date">2018-05-14</span>
                </h3>
            </div>
        </li>
        <li class="item">
            <div class="inner">
                <h3 class="tit layout3">
                    <a href="">右侧信息跟随左侧标题，超出时，左侧内容自动隐藏</a>
                    <span class="date">2018-05-14</span>
                </h3>
            </div>
        </li>
    </ul>
</div>



<!-- 5. 包含小图标 -->
<div class="m-txt">
    <ul class="block">
        <li class="item">
            <div class="inner">
                <h3 class="tit">
                    <a href="">
                        <span>标题右侧可以跟着一些小角标</span>
                        <span class="badget-hot">HOT</span>
                    </a>
                </h3>
            </div>
        </li>
        <li class="item">
            <div class="inner">
                <h3 class="tit">
                    <a href="">
                        <span>标题右侧可以跟着一些小角标</span>
                        <span class="badget-new">NEW</span>
                    </a>
                </h3>
            </div>
        </li>
                <li class="item">
            <div class="inner">
                <h3 class="tit layout2">
                    <a href="">
                        <span class="icon icon-home"></span>
                        <span>标题左侧可以放置不同的图标，右侧可以跟着一些小角标</span>
                        <span class="badget-new">NEW</span>
                    </a>
                </h3>
            </div>
        </li>
    </ul>
</div>

/* 最外层 */
.m-txt { overflow: hidden; position: relative; margin: 20px; padding: 0 15px; background: #fff; font-size: 14px; }
    /* 列表 */
    .m-txt > .block {}
        .m-txt > .block > .item { margin: 0; padding: 0; }
            /* 单个 */
            .m-txt .inner { overflow: hidden; padding: 10px 0; border-bottom: 1px solid #eee; }
            .m-txt > .block > .item:last-child .inner { border-bottom: none; }
                /* 标题 */
                .m-txt .tit { overflow: hidden; font-size: 14px; font-weight: normal; }
                /* 标题：包含右侧信息列表 */
                .m-txt .tit.layout2 { text-overflow: ellipsis; white-space: nowrap; }
                    .m-txt .tit a { color: #03a9f4; }
                    .m-txt .date { float: right; font-size: 12px; color: #999; }
                /* 标题：右侧信息跟随，超出时左侧自动隐藏 */
                .m-txt .tit.layout3 { float: left; position: relative; height: 20px; line-height: 20px; padding-right: 80px; }
                    .m-txt .tit.layout3 a {}
                    .m-txt .tit.layout3 .date { float: none; position: absolute; top: 50%; right: 0; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
                /* 角标 */
                .m-txt .tit span { display: inline-block; vertical-align: middle; }
                .m-txt .tit .badget-hot, .m-txt .tit .badget-new { padding: 0 5px; background: red; color: #fff; font-size: 12px; -webkit-border-radius: 5px 5px; border-radius: 5px 5px; -moz-transform: scale(.75); -ms-transform: scale(.75); -webkit-transform: scale(.75); transform: scale(.75); }
                .m-txt .tit .badget-new { background-color: #03a9f4; }
                .m-txt .tit .icon { width: 20px; height: 20px; background-repeat: no-repeat; background-position: 100% 50%; background-size: auto 100%; }
                    .m-txt .tit .icon-home { background-image: url(http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png); }
                /* 简介 */
                .m-txt .tit + .desc { margin-top: 5px; font-size: 12px; }

/* 底部边框通栏 */
.m-txt.layout2 { padding: 0; }
    .m-txt.layout2 .inner { padding: 15px; }