【电商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>      /* 行内元素可以放行内，strong*/
                                <a href="#"><strong>【重磅】</strong>这是快报的劲爆消息！！</a>
                                <a href="#"><strong>【重磅】</strong>这是快报的劲爆消息！！</a>
                                <a href="#"><strong>【重磅】</strong>这是快报的劲爆消息！！</a>
                                <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;
}
.news-bd li a {
    display: block;     /*为啥他能自动按行分开，我就这样操作一波*/
}

标签：重磅,12,快报,height,h5,news,电商,hd
来源： https://www.cnblogs.com/icemiaomiao3/p/14171832.html