新闻-布局 &标题 |学习笔记

简介: 快速学习 新闻-布局 &标题

开发者学堂课程【移动 Web 前端开发:新闻-布局  &标题】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/594/detail/8472


新闻-布局  &标题

 

目录:

一、 新闻布局

二、 新闻模块

三、 效果图

 

一、 新闻布局:全部新闻

image.png

 

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;

}

 

三、效果图

image.png


相关文章
|
3月前
标题和段落标记
【8月更文挑战第22天】
41 3
|
4月前
|
前端开发
wordpress主题导航菜单栏目增加角标
wordpress主题导航菜单栏目增加角标
66 1
|
6月前
|
前端开发
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
40 1
|
搜索推荐 前端开发 开发者
标题| 学习笔记
快速学习标题。
标题| 学习笔记
html+css实战196-标题-新品布局
html+css实战196-标题-新品布局
88 0
html+css实战196-标题-新品布局
html+css实战192-标题
html+css实战192-标题
179 0
html+css实战192-标题
html+css实战108-新闻列表-标题
html+css实战108-新闻列表-标题
241 0
html+css实战108-新闻列表-标题
【Discuz】实现主题标题和正文同时显示(2)
【Discuz】实现主题标题和正文同时显示
95 0
【Discuz】实现主题标题和正文同时显示(2)
|
PHP
【Discuz】实现主题标题和正文同时显示(1)
【Discuz】实现主题标题和正文同时显示
127 0
【Discuz】实现主题标题和正文同时显示(1)
|
搜索推荐
【博客美化】02.公告栏显示个性化时间
【博客美化】02.公告栏显示个性化时间
136 0
【博客美化】02.公告栏显示个性化时间