人亦已歌 发表于 2023-1-31 22:01:40

CSS核心(二十一)设置无序列表的图标和去除无序列表的图标


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置无序列表的图标和去除无序列表的图标</title>
</head>
<style>
        ul{
                /* 设置列表前面的符号,效果太丑,一般不用,都是用字符图标实现。*/
                /* list-style-type:lower-roman;       */
                /* 支持的属性如下
                disc 实心圆
                circle 空心圆
                square 实心方块
                lower-roman 小写罗马数字 */
               
                /* 使用自定义图片做列表前面的符号 */
                /* list-style-image:url(./img/jiantou.png); */
               
                /* 去除列表前面的符号 这个很常用,请记住 */
                list-style:none;
                padding:0;
                margin:0;
        }
</style>
<body>
<ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
</ul>

</body>
</html>




以上代码中,重点记忆去除无序列表前面图标的方法,因为这个图标一般我们都是用字符图标实现的,在使用字符图标前需要先去除原图标。

解释一下去除图标的三行代码:

list-style:none; --去除图标
padding:0; --去除无序列表的内边距,即元素的边界占位,这样做是为了排版方便。
margin:0; --去除无序列表的外边距,即元素的边界占位,这样做是为了排版方便。

而且为了去除浏览器的边界占位,往往在写css代码前所有人都会写这样两句代码:

*{
padding:0;
margin:0;
}

所以最终显示结果如下(列表紧贴浏览器边框,便于实现后续的排版):





xuehuarong2005 发表于 2023-2-17 07:09:54

顶顶

zzl004 发表于 2023-2-24 02:20:34

写得太好了我是一个在大学里不学无术的家伙跟很多人一样不知道自己在学什么不知道自己学得有什么用多说无意这张帖子也许会让我受益终生的谢谢分享

新手11 发表于 2023-2-28 03:53:20

好意!肯请楼主带主角去测测智商,情商为0就不用了!

娟娟 发表于 2023-3-5 05:20:19

学海无崖,回头是岸...

绝对冷血 发表于 2023-3-11 16:26:08

我也是所谓的学计算机的,但是现在都大三了,对编程,哎!!能力真的不可恭维呀我想问下高手们现在我还有没有的救呀?不胜感谢!!!!

xtsmq 发表于 2023-3-17 17:24:36

啊....长舒一口气!

lb20300 发表于 2023-3-22 12:06:47

^我看了.我知道了一个程序员不容易谢谢,前辈指点!学习了~~~~~~~~~~~~~~~~谢谢指点,收益很深

youthjoy 发表于 2023-3-27 08:54:51

真的不错,佩服佩服!   

finfly 发表于 2023-3-30 12:28:34

感触很大,谢谢!我是一个VB初学者,向你至敬!如梦初醒!感谢
页: [1] 2 3 4
查看完整版本: CSS核心(二十一)设置无序列表的图标和去除无序列表的图标