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

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

开发者学堂课程【移动 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


相关文章
|
5月前
|
前端开发
wordpress主题导航菜单栏目增加角标
wordpress主题导航菜单栏目增加角标
75 1
|
5月前
|
前端开发
WordPress主题底部纯文本文章列表
WordPress主题底部纯文本文章列表
31 0
|
7月前
|
前端开发
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
46 1
|
搜索推荐 前端开发 开发者
标题| 学习笔记
快速学习标题。
标题| 学习笔记
|
JSON JavaScript 数据格式
显示新闻详情|学习笔记
快速学习显示新闻详情
显示新闻详情|学习笔记
|
JSON JavaScript 小程序
HackerNews新闻列表功能描述|学习笔记
快速学习 HackerNews新闻列表功能描述
HackerNews新闻列表功能描述|学习笔记
html+css实战196-标题-新品布局
html+css实战196-标题-新品布局
91 0
html+css实战196-标题-新品布局
html+css实战108-新闻列表-标题
html+css实战108-新闻列表-标题
246 0
html+css实战108-新闻列表-标题
html+css实战192-标题
html+css实战192-标题
182 0
html+css实战192-标题