一、列表案例-今日头条
上一节中我们已经完成了基本结构的搭建,接下来我们就可以一个个的设置样式了。
设置新闻标题序号的样式
首先来设置新闻标题的序号的样式,可以通过浏览器的检查工具查看原样式有哪些,具体如下:
原样式中对序号元素进行了宽和高的设置,因此一定要设置 display 为 inline-block,这样设置的宽高才能生效,另外就是文字居中的设置以及文字加粗、颜色等,具体 CSS 代码如下:
ul > li .no {
/*修改为 inline-block,设置宽和高*/
display: inline-block;
width: 24px;
height: 24px;
text-align: center;
/*设置文字居中*/
line-height: 24px;
font-weight: 700;
color: #999;
}
在浏览器中打开 HTML 页面,效果如下:
设置新闻标题右边的图标
接着我们再来设置新闻标题右边的图标,原图标所包含的样式可以通过浏览器的检查工具查看得到,具体如下:
原样式中通过 background-img
来设置背景图片,并更改了 i 元素的属性为 inline-block 这样就可以已设置宽高了,还有就是需要设置一个 margin-lef
,也就是设置图标与新闻标题之间的间距,具体添加的 CSS 代码如下:
ul > li .icon {
display: inline-block;
width: 16px;
height: 16px;
margin-left: 6px;
background-size: contain;
background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/hotboard/new.png);
}
刷新页面,效果如下:
可以看到图标已经出现,但是位置有一点点偏差,这里我们可以使用相对定位来进行微调,具体代码如下:
ul > li .icon {
/*调整位置*/
position: relative;
top: 2px;
left: 4px;
display: inline-block;
width: 16px;
height: 16px;
margin-left: 6px;
background-size: contain;
background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/hotboard/new.png);
}
刷新页面,效果如下:
设置多条新闻的样式
前面我们已经添加了一条新闻,可以拷贝多条新闻,查看下效果,具体 HTML 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
ul > li {
margin-top: 15px;
}
ul > li > a {
display: inline-block;
}
ul > li .no {
/*修改为 inline-block,设置宽和高*/
display: inline-block;
margin-right: 3px;
width: 24px;
height: 24px;
text-align: center;
/*设置文字居中*/
line-height: 24px;
font-weight: 700;
color: #999;
}
ul > li .icon {
/*调整位置*/
position: relative;
top: 2px;
left: 4px;
display: inline-block;
width: 16px;
height: 16px;
margin-left: 6px;
background-size: contain;
background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/hotboard/new.png);
}
ul > li .content {
display: inline;
}
</style>
</head>
<body>
<ul>
<li class="item">
<a href="">
<span class="no">1</span>
<div class="content">
神十七乘组进行航天技术试验亮点
</div>
</a>
<i class="icon"></i>
</li>
<li class="item">
<a href="">
<span class="no">2</span>
<div class="content">
幼儿园防暴演练厨师抄锅铲追进教室
</div>
</a>
<i class="icon"></i>
</li>
<li class="item">
<a href="">
<span class="no">3</span>
<div class="content">
专家称低价不应成为直播代名词
</div>
</a>
<i class="icon"></i>
</li>
<li class="item">
<a href="">
<span class="no">4</span>
<div class="content">
美针对哈马斯和伊朗实施新一轮制裁
</div>
</a>
<i class="icon"></i>
</li>
<li class="item">
<a href="">
<span class="no">5</span>
<div class="content">
亚残运会有哪些硬核科技
</div>
</a>
<i class="icon"></i>
</li>
<li class="item">
<a href="">
<span class="no">6</span>
<div class="content">
幼儿园防暴演练厨师抄锅铲追进教室
</div>
</a>
<i class="icon"></i>
</li>
<li class="item">
<a href="">
<span class="no">7</span>
<div class="content">
哈马斯代表团与伊朗副外长在俄会见
</div>
</a>
<i class="icon"></i>
</li>
<li class="item">
<a href="">
<span class="no">8</span>
<div class="content">
广州地铁禁止万圣节恐怖妆容
</div>
</a>
<i class="icon"></i>
</li>
<li class="item">
<a href="">
<span class="no">9</span>
<div class="content">
台媒:解放军无人机“绕台一圈”
</div>
</a>
<i class="icon"></i>
</li>
</ul>
</body>
</html>
在浏览器中打开 HTML 页面,效果如下:
头条官网上的第一条新闻左边会有一个置顶的图标,并且下面的第一二三条新闻序号的颜色是不一样的;我们先来查看一下指定图标的样式,具体如下:
指定图标也是通过背景图片实现,并且有一定的宽高。
在设置指定图标以及第一二三条新闻序号的颜色前,先给他们添加 class 属性,具体如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
ul > li {
margin-top: 15px;
}
ul > li > a {
display: inline-block;
}
ul > li .no {
/*修改为 inline-block,设置宽和高*/
display: inline-block;
margin-right: 3px;
width: 24px;
height: 24px;
text-align: center;
/*设置文字居中*/
line-height: 24px;
font-weight: 700;
color: #999;
}
ul > li .icon {
/*调整位置*/
position: relative;
top: 2px;
left: 4px;
display: inline-block;
width: 16px;
height: 16px;
margin-left: 6px;
background-size: contain;
background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/hotboard/new.png);
}
ul > li .content {
display: inline;
}
</style>
</head>
<body>
<ul>
<li class="item">
<a href="">
<i class="no top"></i>
<div class="content">
神十七乘组进行航天技术试验亮点
</div>
</a>
<i class="icon"></i>
</li>
<li class="item">
<a href="">
<span class="no first">1</span>
<div class="content">
幼儿园防暴演练厨师抄锅铲追进教室
</div>
</a>
<i class="icon"></i>
</li>
<li class="item">
<a href="">
<span class="no second">2</span>
<div class="content">
专家称低价不应成为直播代名词
</div>
</a>
<i class="icon"></i>
</li>
<li class="item">
<a href="">
<span class="no third">3</span>
<div class="content">
美针对哈马斯和伊朗实施新一轮制裁
</div>
</a>
<i class="icon"></i>
</li>
<li class="item">
<a href="">
<span class="no">4</span>
<div class="content">
亚残运会有哪些硬核科技
</div>
</a>
<i class="icon"></i>
</li>
<li class="item">
<a href="">
<span class="no">5</span>
<div class="content">
幼儿园防暴演练厨师抄锅铲追进教室
</div>
</a>
<i class="icon"></i>
</li>
<li class="item">
<a href="">
<span class="no">6</span>
<div class="content">
哈马斯代表团与伊朗副外长在俄会见
</div>
</a>
<i class="icon"></i>
</li>
<li class="item">
<a href="">
<span class="no">7</span>
<div class="content">
广州地铁禁止万圣节恐怖妆容
</div>
</a>
<i class="icon"></i>
</li>
<li class="item">
<a href="">
<span class="no">8</span>
<div class="content">
台媒:解放军无人机“绕台一圈”
</div>
</a>
<i class="icon"></i>
</li>
</ul>
</body>
</html>
首先来给置顶图标添加 CSS 样式,具体 CSS 代码如下:
ul > li .top {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 3px;
/*background 缩写属性*/
background: url(https://lf9-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/icon_hot_board_stick.svg) no-repeat 50%;
background-size: contain;
}
刷新 HTML 页面,效果如下:
置顶图标有一点点偏上,可以通过绝对定位来微调位置,具体的 CSS 代码如下所示:
ul > li .top {
position: relative;
top: 6px;
left: 2px;
display: inline-block;
width: 24px;
height: 24px;
margin-right: 3px;
background: url(https://lf9-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/icon_hot_board_stick.svg) no-repeat 50%;
background-size: contain;
}
刷新 HTML 页面,效果如下:
接着给第123序号设置不同的颜色,通过浏览器检查工具查看第一二三条新闻标题左边序号的颜色,如下图所示:
分别对它们设置颜色,具体 CSS 代码如下:
ul > li .first {
color: #a82e2e;
}
ul > li .second {
color: #f04142;
}
ul > li .third {
color: #ff9a03;
}
刷新页面,效果如下:
当然也可以在不添加 first second third
等 class 属性的情况下,直接使用结构伪类也可以实现,具体 CSS 代码如下所示:
ul > li:nth-child(2) .no {
color: #a82e2e;
}
ul > li:nth-child(3) .no {
color: #f04142;
}
ul > li:nth-child(4) .no {
color: #ff9a03;
}
刷新页面,效果如下:
可以看到基本的样式我们已经实现了。