【电商12】newsflash news

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

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

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

【电商12】newsflash  news

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;     /*为啥他能自动按行分开,我就这样操作一波*/
}


上一篇:第六篇 Mysql数据库


下一篇:6.获取环球时报关键词新闻--动态网页Ajax