开发者学堂课程【移动 Web 前端开发:新闻-布局 &标题】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/594/detail/8472
新闻-布局 &标题
目录:
一、 新闻布局
二、 新闻模块
三、 效果图
一、 新闻布局:全部新闻
1. 用“container”进行布局。
2.代码如下:
<
!—
新闻-->
<
h3 class=”wjs_news_title”>
全部新闻<
/h3>
2
3
/div>
二、新闻模块
代码如下:
/*新闻模块*/
.wjs_news{
padding: 30px o;
border-bottom: 1px solid #ccc;
}
.
wjs_news .wjs_news_title{
font-size: 20px;
line-height: 50px;
height: 5opx;
border-bottom: 1px solid #ccc;
text-align: center;
position: relative;
}
.wjs_news .wjs_news_title: : after{
content: "";
position: absolute;
right: -6px;
bottom: -3px;
width: 6px;
height: 6pX;
border-radius : 3px;
border: 1px solid #ccc;
}
三、效果图