新闻列表、侧边栏、footer
- 31.新闻列表tab栏布局完成
- 32.新闻列表页布局完成
- 33.加载更多按钮的布局和样式
- 34.侧边栏-标题和广告位布局完成
- 35.侧边栏-关注第三方平台盒子布局和样式
- 36.侧边栏-热门推荐完成
- 37.footer布局和样式(1)
- 38.footer布局和样式(2)
新闻列表tab栏布局完成
<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>
.main{
.wrapper{
.main-content-wrapper{
.list-outer-group{
background: #fff;
margin-top: 14px;
.list-tab{
width: 100%;
height: 66px;
overflow: hidden; //比较重要
border: 1px solid #eeeeee;
border-left: none;
border-right: none;
li{
float: left;
padding: 0 10px;
margin-top: 20px;
a{
color: #878787;
}
&:first-of-type{
border-left: 5px solid $themeColor; //加个竖线
}
&.active{
a{
color: #212121;
}
}
}
}
}
}
}
}
新闻列表页布局完成
<ul class="list-inner-group">
<li>
<div class="thumbnail-group">
<a href="#">
<img src="http://static-image.xfz.cn/1516169692_914.jpg-website.news.list" alt="">
</a>
</div>
<div class="news-group">
<p class="title">
<a href="#">王健林卖掉进军海外首个项目:17亿售伦敦ONE六成股权</a>
</p>
<p class="desc">
外界关于万达要出售此前在海外投资项目的消息一直不断。
</p>
<p class="more">
<span class="category">深度报道</span>
<span class="pub-time">1小时前</span>
<span class="author">知了课堂</span>
</p>
</div>
</li>
<li>
<div class="thumbnail-group">
<a href="#">
<img src="http://static-image.xfz.cn/1516010894_546.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">2小时前</span>
<span class="author">知了课堂</span>
</p>
</div>
</li>
</ul>
.list-inner-group{
@include news_list;
}
加载更多按钮的布局和样式
<div class="load-more-group">
<button class="load-more">查看更多</button>
</div>
.load-more-group{
padding: 20px 0;
text-align: center;
.load-more{
width: 402px;
height: 40px;
background: #d2dcea;
color: #6d85ac; //字体颜色
border: none; // 去除边框
outline: none;
cursor: pointer;
}
}
侧边栏-标题和广告位布局完成
<div class="sidebar-wrapper">
<div class="title-group">
<span class="title">在线课堂</span>
<a class="more" href="#">更多</a>
</div>
<div class="advertise-group">
<a href="#">
<img src="http://www.xfz.cn/static/build/images/side-gift-banner.png" alt="">
</a>
</div>
</div>
侧边栏-关注第三方平台盒子布局和样式
<div class="platform-group">
<div class="title-group">
<span class="title">关注小饭桌</span>
</div>
<div class="focus-group">
<ul class="left-group">
<li class="zhihu">
<a href="#" target="_blank">小饭桌创业课堂</a>
</li>
<li class="weibo">
<a href="#" target="_blank">小饭桌创业课堂</a>
</li>
<li class="toutiao">
<a href="#" target="_blank">小饭桌</a>
</li>
</ul>
<div class="right-group">
<p class="desc">扫码关注小饭桌微信公众平台xfz008</p>
</div>
</div>
</div>
侧边栏-热门推荐完成
footer布局和样式(1)
<footer class="footer">
<div class="top-group">
<div class="top-inner-group">
<div class="logo-box"></div>
<div class="detail-group">
<div class="line1">
<ul class="links">
<li><a href="#">关于小饭桌</a></li>
<li><a href="#">创业课堂</a></li>
<li><a href="#">寻求报道</a></li>
<li><a href="#">创业礼包</a></li>
</ul>
<div class="about-us">
<span class="title">关于我们:</span>
<ul class="social-group">
<li class="weixin">
<div class="wx-qrcode"></div>
<span class="text">xfz008
</span>
</li>
<li class="weibo">
<a class="text" href="#">小饭桌创业课堂</a>
</li>
</ul>
</div>
</div>
<div class="line2">
<p class="address">地址:北京市朝阳区东三环北路38号院1号楼17层2001内1、16室</p>
<p class="contact">联系方式:400-810-1090(工作日10点-18点)</p>
</div>
</div>
</div>
</div>
<div class="bottom-group">
©2017 北京子木投资顾问有限公司 京ICP备15051289号-1
</div>
</footer>
@import "constants.scss";
.footer{
font-size: 14px;
color: #c9c9c9;
padding-top: 20px;
.top-group{
background: #555e67;
height: 100px;
padding-top: 26px;
box-sizing: border-box;
.top-inner-group{
width: $pageWidth;
margin: 0 auto;
//overflow: hidden;
position: relative;
.logo-box{
width: 168px;
height: 54px;
float: left;
background: url("http://xfz.cn/static/build/images/foot-logo.png");
background-repeat: no-repeat;
background-size: 100%;
}
.detail-group{
float: left;
margin-left: 84px;
.line1{
overflow: hidden;
.links{
float: left;
overflow: hidden;
li{
float: left;
padding: 0 10px;
a{
color: #c9c9c9;
}
&:first-of-type{
padding-left: 0;
}
&:last-of-type{
border-right: none;
}
border-right:1px solid #c9c9c9;
}
}
.about-us{
float: left;
margin-left: 40px;
.title{
float: left;
}
.social-group{
float: left;
overflow: hidden;
li{
float: left;
color: #fff;
.text{
margin-left: 24px;
}
}
.weixin{
background: url("https://www.xfz.cn/static/build/images/wx-icon.png");
background-repeat: no-repeat;
background-size: 30%;
cursor: pointer;
&:hover .wx-qrcode{
display: block;
}
.wx-qrcode{
width: 204px;
height: 204px;
background: url("https://www.xfz.cn/static/build/images/wxQr.jpg");
background-size: 100%;
position: absolute;
right: 360px;
top: -220px;
display: none;
}
}
.weibo{
margin-left: 20px;
background: url("https://www.xfz.cn/static/build/images/xl-icon.png");
background-repeat: no-repeat;
background-size: 18%;
a{
color: #fff;
}
}
}
}
}
.line2{
overflow: hidden;
margin-top: 20px;
.address{
float: left;
}
.contact{
float: left;
margin-left: 40px;
}
}
}
}
}
.bottom-group{
background: #383e44;
height: 60px;
text-align: center;
line-height: 60px;
}
}
footer布局和样式(2)
<footer class="footer">
<div class="top-group">
<div class="top-inner-group">
<div class="logo-box"></div>
<div class="detail-group">
<div class="line1">
<ul class="links">
<li><a href="#">关于小饭桌</a></li>
<li><a href="#">创业课堂</a></li>
<li><a href="#">寻求报道</a></li>
<li><a href="#">创业礼包</a></li>
</ul>
<div class="about-us">
<span class="title">关于我们:</span>
<ul class="social-group">
<li class="weixin">
<div class="wx-qrcode"></div>
<span class="text">xfz008
</span>
</li>
<li class="weibo">
<a class="text" href="#">小饭桌创业课堂</a>
</li>
</ul>
</div>
</div>
<div class="line2">
<p class="address">地址:北京市朝阳区东三环北路38号院1号楼17层2001内1、16室</p>
<p class="contact">联系方式:400-810-1090(工作日10点-18点)</p>
</div>
</div>
</div>
</div>
<div class="bottom-group">
©2017 北京子木投资顾问有限公司 京ICP备15051289号-1
</div>
</footer>
@import "constants.scss";
.footer{
font-size: 14px;
color: #c9c9c9;
padding-top: 20px;
.top-group{
background: #555e67;
height: 100px;
padding-top: 26px;
box-sizing: border-box;
.top-inner-group{
width: $pageWidth;
margin: 0 auto;
//overflow: hidden;
position: relative;
.logo-box{
width: 168px;
height: 54px;
float: left;
background: url("http://xfz.cn/static/build/images/foot-logo.png");
background-repeat: no-repeat;
background-size: 100%;
}
.detail-group{
float: left;
margin-left: 84px;
.line1{
overflow: hidden;
.links{
float: left;
overflow: hidden;
li{
float: left;
padding: 0 10px;
a{
color: #c9c9c9;
}
&:first-of-type{
padding-left: 0;
}
&:last-of-type{
border-right: none;
}
border-right:1px solid #c9c9c9;
}
}
.about-us{
float: left;
margin-left: 40px;
.title{
float: left;
}
.social-group{
float: left;
overflow: hidden;
li{
float: left;
color: #fff;
.text{
margin-left: 24px;
}
}
.weixin{
background: url("https://www.xfz.cn/static/build/images/wx-icon.png");
background-repeat: no-repeat;
background-size: 30%;
cursor: pointer;
&:hover .wx-qrcode{
display: block;
}
.wx-qrcode{
width: 204px;
height: 204px;
background: url("https://www.xfz.cn/static/build/images/wxQr.jpg");
background-size: 100%;
position: absolute;
right: 360px;
top: -220px;
display: none;
}
}
.weibo{
margin-left: 20px;
background: url("https://www.xfz.cn/static/build/images/xl-icon.png");
background-repeat: no-repeat;
background-size: 18%;
a{
color: #fff;
}
}
}
}
}
.line2{
overflow: hidden;
margin-top: 20px;
.address{
float: left;
}
.contact{
float: left;
margin-left: 40px;
}
}
}
}
}
.bottom-group{
background: #383e44;
height: 60px;
text-align: center;
line-height: 60px;
}
}