0 0 3 0 - 从CSS角度领略#列表的风骚

不二如是 · 发表于 2017-1-23 11:56:19

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-8-11 09:21 编辑

在27、28我们梳理了块状元素和内联元素在定位、使用方式的差别。

在29搞定了，C3中著名的盒子模型。

现在基于他们体验下如何配置列表的外观呈现。

所谓列表，就是：

一种能够清晰表述内容并列关系或顺序关系的元素

常用来制作各种菜单和内容项。

看一下最纯粹的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<ul>
<li>小天才养殖场</li>
<li>吹水阁</li>
<li>Web开发</li>
</ul>
</body>
</html>

复制代码

效果图：

怎么样结构是不是很清晰，但是有些太原始的粗犷美了。。。

其实在16我们用过。

但是并没有深入体验下

！

这是不对滴！

So，好好看下怎样优化<ul><li>

因为过年吗，所以像“ 1 - 年庆版 #鱼C跑马灯 |【欢脱春节】 ”一样的喜庆是必须滴～

自定义列表样式，最重要的一点就是清除浏览器默认的内外边距，margin&padding！

任由使用默认数值会严重干扰，自定义的使用！

添加Css代码：

ul{
margin: 0;
padding: 0;
}

复制代码

效果图：

通过设置padding、margin属性值为0，就会让前面的小黑点不见哦～

但是，还是需要设置list-style来真正取消样式。

添加背景色#FF3333、字体白色#FFF

代码如下：

li{
background: #F33;
color: #FFF;
list-style: none;
}

复制代码

效果图：

另外所有li元素就会紧贴在一起。

所以设置padding，15px来增加li元素中文字与背景边缘的距离

li{
padding：15px；
}

复制代码

效果图：

margin属性，用来增加li元素之间的距离，顺便设置下6px的外边距

li{
margin: 6px 0;
}

复制代码

效果图：

日常的列表，往往在最前面还有个选项确认框，check。

所以我们从本地先加载check.png的logo：

代码如下：

li{
background: #F33 url(check.png) no-repeat 3px 50%;
}

复制代码

效果图：

no-repeat咱们用过很多次了，就是防止图片在网页上平铺，哪儿哪儿都是的很恶心。

3px，代表check水平方向距离左侧，3px

50%垂直方向居中。

但有一个最尬的地方，列表文字和logo重复在一起了。。。

这个很好解决，添加text-indent属性来让列表文字，像右边缩进就可以：

text-indent: 35px;

复制代码

最终效果图：

怎么样，是不是一下就性感很多？！

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

joker11111 · 发表于 2017-3-26 22:55:25

本帖最后由 joker11111 于 2017-3-26 23:10 编辑

一步步做下来，果然是好看许多了，棒极

shishunfu · 发表于 2017-4-26 09:22:10

越来越赞

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
<style type="text/css">
ul{
margin: 0;
padding: 0;
width: 30%;
}
li{
list-style: none;
padding: 15px;
margin: 6px 0;
background:beige url("http://xxx.fishc.com/forum/201701/23/114912gfpp4bc9by93tw4f.png") no-repeat 3px 50%;
/*3px，代表check水平方向距离左侧，3px 50%垂直方向居中。*/
text-indent: 35px;
}
a{
text-decoration: none;
color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="http://bbs.fishc.com/forum-337-1.html">小天才养殖场</a></li>
<li><a href="http://bbs.fishc.com/forum-33-1.html">吹水阁</a></li>
<li><a href="http://bbs.fishc.com/forum.php?mod=forumdisplay&fid=171&filter=typeid&typeid=637">Web开发</a></li>
</ul>
</body>
</html>

复制代码

不二如是 · 发表于 2017-3-27 10:35:54

joker11111 发表于 2017-3-26 22:55
一步步做下来，果然是好看许多了，棒极

那是必须滴～

aswyamato1989 · 发表于 2017-7-18 13:16:54

交作业！

likesunshine · 发表于 2018-3-22 17:22:41

像番茄加两个蛋 · 发表于 2018-4-15 12:03:51

rock5442107 · 发表于 2018-6-11 21:40:45

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>030</title>
<style type="text/css">
ul{
margin:0;
padding:0;
}
li{
background:#F33;
color:#FFF;
list-style:none;
padding:15px;
margin:6px 0;
background:#F33 url(check.png) no-repeat 3px 50%;
text-indent:35px;
}
</style>
</head>
<body>
<ul>
<li>小天才養殖場</li>
<li>吹水閣</li>
<li>WEB開發</li>
</ul>
</body>
</html>

复制代码

船到桥头自然沉 · 发表于 2018-9-10 19:25:52

soulwyb · 发表于 2018-10-22 23:19:34

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
ul {
margin: 0;
padding: 0;
}
li {
background: #f33 url("check.png") no-repeat 3px 50%;
color: #fff;
list-style: none;
padding: 15px;
margin: 6px 0;
text-indent: 35px;
}
</style>
</head>
<body>
<ul>
<li>小天才养殖场</li>
<li>吹水阁</li>
<li>Web开发</li>
</ul>
</body>
</html>

复制代码

克里斯保罗 · 发表于 2019-8-17 10:57:44

交作业！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text</title>
<style type="text/css">
ul{
margin: 0;
padding: 0;
}
li{
background:#F33 url(check.png) no-repeat 3px 50%;
color: #ABC;
list-style: none;
padding: 15px;
margin: 6px 0;
text-indent: 35px;
}
</style>
</head>
<body>
<ul>
<li>小天才养殖场</li>
<li>吹水阁</li>
<li>Web开发</li>
</ul>
</body>
</html>

复制代码

你在意在便在 · 发表于 2019-10-30 21:10:41

作业作业

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>让编程改变世界</title>
<style type="text/css">
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
background: #00cec9;
padding: 10px;
margin: 5px;
background: url(check.png) no-repeat 3px 50%;
text-indent: 35px;
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li>小甲鱼</li>
<li>不二如是</li>
<li><a href="https://ilovefishc.com/">让编程改变世界</a></li>
</ul>
</body>
</html>

复制代码

ricia · 发表于 2020-2-22 16:30:06

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
<style type="text/css">
ul {
margin: 0;
padding: 0;
}
li {
background: #f33;
color: #fff;
list-style: none;
padding: 15px;
width: 200px;
margin: 6px 0;
background: #f33 url("../img/li.png") no-repeat 3px 50%;
text-indent: 35px;
}
</style>
</head>
<body>
<ul>
<li>小天才养殖场</li>
<li>吹水阁</li>
<li>Web开发</li>
</ul>
</body>
</html>

复制代码

小脑斧 · 发表于 2020-3-11 14:27:02

登录/注册后可看大图

huanghuiyv · 发表于 2020-9-18 15:12:53

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li {
color: white;
list-style: none;
padding: 10px;
margin: 5px;
text-align: center;
background: red url([img]https://xxx.ilovefishc.com/forum/201701/23/114912gfpp4bc9by93tw4f.png[/img]) no-repeat 3px 50%;
}
</style>
</head>
<body>
<ul>
<li>小天才养殖场</li>
<li>吹水阁</li>
<li>Web开发</li>
</ul>
</body>
</html>

复制代码

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 3 0 - 从CSS角度领略#列表的风骚

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

点评

评分

点评

点评

评分