【电商12】newsflash news

• h5是块级元素呀，不然他两怎么可能放到一行上去

• news-hd 是块元素，而且没有浮动/定位，可以继承width

• 这个模块主要用到了大盒子给padding比较多

• 单行多余字数，呈现省略号形式

html

<div class="news">
                    <div class="news-hd">
                        <h5>品优购快报</h5>
                        <a href="#" class="more">更多</a>   /*链接不能少*/
                    </div>
                    <div class="news-bd">
                        <ul>
                            <li><a href="#"><strong>【重磅】</strong>这是快报的劲爆消息！！</a></li>
                            <li> <a href="#"><strong>【重磅】</strong>这是快报的劲爆消息！！</a></li>
                            <li><a href="#"><strong>【重磅】</strong>这是快报的劲爆消息！！</a></li>
                            <li><a href="#"><strong>【重磅】</strong>这是快报的劲爆消息！！</a></li>
                            <li><a href="#"><strong>【重磅】</strong>这是快报的劲爆消息！！</a></li>                       
                       </ul>
                    </div>
                </div>

index.css

.news {
    width: 246px;
    height: 165px;
    border: 1px solid #e4e4e4;
}

.news-hd {          /* 绝了，类名写错 */
    /* news-hd 是块元素，而且没有浮动/定位，可以继承width */
    height: 33px;
    line-height: 33px;
    border-bottom: 1px dotted #e4e4e4;
    padding: 0 15px;
}
.news-hd h5 {    /* h5是块级元素呀，不然他两怎么可能放到一行上去 */
    font-size: 14px;
    float: left;
}
.news-hd .more {
    float: right;
}
.more::after {
    font-family: "iconfont";
    content: "\e809";
    font-size: 1px;
}
.news-bd {
    padding: 5px 15px 0;
}
.news-bd ul li {
    height: 24px;
    line-height: 24px;
    /* 单行多余字数，呈现省略号形式 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
 /*.news-bd li a {
    display: block;    为啥他能自动按行分开，我就这样操作一波——a放不同的li哩哦
}*/