开发者学堂课程【移动 Web 前端开发：新闻-响应式】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8475
新闻-响应式
此时的页面还是与标准的有些不同，所以可以设置它的距离
.wjs_news.wjs_news_line{
position: absolute;
top: 0;
left: 45px;
width: 1px;
height: 100%;
border-left: 1px dashed #ccc;
}
.wjs_news.wjs_news_content{
list-style: none;
}
.wjs_news.wjs_news_content li{
Padding: 15px;
接下来则需要查看这个新闻是否享用符合各终端的能力，如发现有部分无法显示则根据情况修改
这时用户有两个需求
.wjs_news .nav-tabs > li > a {
margin-right: 0;
width: 60px;
height: 60px;
line-height: 60px;
background: #ccc;
border-radius: 30px;
border: none;
margin-bottom: 60px;
padding: 0;
text-align: center;
1.页签 在小屏设备 要求固定间距 没有虚线
2.页签 在超小屏 要求自适应间距 没有虚线
@media (min-width:768px) and (max-width: 992px){
. wjs_news .nav-tabs > li > a {
Margin: 30px 40px;
}
}
<div class=”col-md-1”>
<div class=”wjs_news_line hidden-sm hidden-xs”>
(没有虚线)
超小屏
@media (max-width:768px) {
. wjs_news .nav-tabs > li
width: 25%;
}
. wjs_news .nav-tabs > li > a {
Margin: 30px auto;
}
}
至此 需求完成。
