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