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角度领略#列表的风骚

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

评分

本帖被以下淘专辑推荐:

点评

评分

点评

点评

评分