4.13.新闻列表tab栏布局完成
templates/news/index.html
<div class="list-outer-group">
<ul class="list-tab">
<li class="active" ><a href="#">最新资讯</a></li>
<li><a href="#">热点</a></li>
<li><a href="#">深度报道</a></li>
<li><a href="#">干活分享</a></li>
<li><a href="#">投资人说</a></li>
</ul>
</div>
src/css/index.scss
.main{
.wrapper{
.news-wrapper{
.list-outer-group{
background: #fff;
.list-tab{
width: 100%;
height: 66px;
overflow: hidden;
border: 1px solid #eee;
border-left: none;
border-right: none;
li{
float: left;
padding: 0 10px;
margin-top: 20px;
a{
color:#878787;
font-size: 16px;
}
&:first-of-type{
border-left: 5px solid #5c87d9;
}
&.active{
a{
color: #212121;
}
}
}
}
}
}
}
}
4.14.新闻列表页布局完成
templates/news/index.html
<ul class="list-inner-group">
<li>
<div class="thumbnial-group">
<a href="">
<img src="https://static-image.xfz.cn/1561031505_57.jpg-website.news.list" alt="">
</a>
</div>
<div class="news-group">
<p class="title"><a href="#">印度人摩托车上的帝国</a></p>
<p class="desc">近些年印度市场涌现出一批摩托车创业公司,摩托车
是否能够解决印度人最后一公里的出行难题？印度的创业者又是否
能在摩托车上建立起自己的商业帝国。
</p>
<p class="more">
<span class="category">深度报告</span>
<span class="pub-time">一小时前</span>
<span class="author">zhang_derek</span>
</p>
</div>
</li>
<li>
<div class="thumbnial-group">
<a href="">
<img src="https://static-image.xfz.cn/1561246883_290.jpg-website.news.list" alt="">
</a>
</div>
<div class="news-group">
<p class="title"><a href="#">早报：爱奇艺会员规模破1亿</a></p>
<p class="desc">中国氢能第一股亿华通拟申请上科创板 3年估值翻10倍</p>
<p class="more">
<span class="category">爱奇艺</span>
<span class="pub-time">两小时前</span>
<span class="author">zhang_derek</span>
</p>
</div>
</li>
</ul>
src/css/index.scss
.list-inner-group {
li {
padding: 20px;
border-bottom: 1px solid #eee;
overflow: hidden;
.thumbnial-group {
float: left;
height: 162px;
width: 226px;
img {
width: 100%;
height: 100%;
}
}
.news-group {
float: right;
width: 504px;
height: 162px;
position: relative;
.title{
font-size: 22px;
a{
color: #212121;
&:hover{
color: #5c87d9;
}
}
}
.desc{
color: #878787;
font-size: 14px;
margin-top: 10px;
}
.more{
position: absolute;
left: 0;
right: 0;
bottom: 0;
font-size: 14px;
color: #878787;
.category{
color: #5c87d9;
}
.pub-time{
float: right;
margin-left: 20px;
}
.author{
float: right;
}
}
}
}
4.15.加载更多按钮布局和样式
templates/news/index.html
<div class="load-more-group">
<button class="load-more" >查看更多</button>
</div>
src/css/index.scss
.load-more-group{
padding: 20px 0;
text-align: center;
.load-more{
width: 402px;
height: 40px;
background: #d2dcea;
border: none;
outline: none;
cursor: pointer;
}
}
效果
原文地址：https://www.cnblogs.com/derek1184405959/p/11069571.html
时间： 2024-10-07 20:47:25