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

[复制链接]
查看: 1629|回复: 31
发表于 2023-1-31 22:01:40 | 显示全部楼层 | 阅读模式
<!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>



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

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

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


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

  1. *{
  2. padding:0;
  3. margin:0;
  4. }
复制代码


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

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



易博软件介绍

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-2-17 07:09:54 | 显示全部楼层
顶顶

0

主题

19

帖子

10

积分

终身会员

Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25

积分
10
发表于 2023-2-24 02:20:34 | 显示全部楼层
写得太好了  我是一个在大学里不学无术的家伙  跟很多人一样不知道自己在学什么  不知道自己学得有什么用  多说无意  这张帖子也许会让我受益终生的  谢谢分享

0

主题

10

帖子

6

积分

营销入门

Rank: 2

积分
6
发表于 2023-2-28 03:53:20 | 显示全部楼层
好意!  肯请楼主带主角去测测智商,  情商为0就不用了!
发表于 2023-3-5 05:20:19 | 显示全部楼层
学海无崖,回头是岸...
发表于 2023-3-11 16:26:08 | 显示全部楼层
我也是所谓的学计算机的,但是现在都大三了,对编程,哎!!能力真的不可恭维呀  我想问下高手们现在我还有没有的救呀?  不胜感谢!!!!  

0

主题

14

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-3-17 17:24:36 | 显示全部楼层
啊....  长舒一口气!

0

主题

9

帖子

5

积分

终身会员

Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25

积分
5
发表于 2023-3-22 12:06:47 | 显示全部楼层
^我看了.  我知道了一个程序员不容易  谢谢,前辈指点!  学习了~~~~~~~~~~~~~~~~  谢谢指点,收益很深

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-3-27 08:54:51 | 显示全部楼层
真的不错,佩服佩服!   

0

主题

17

帖子

9

积分

营销入门

Rank: 2

积分
9
发表于 2023-3-30 12:28:34 | 显示全部楼层
感触很大,谢谢!我是一个VB初学者,向你至敬!  如梦初醒!  感谢
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1、请认真发帖,禁止回复纯表情,纯数字等无意义的内容!帖子内容不要太简单!
2、提倡文明上网,净化网络环境!抵制低俗不良违法有害信息。
3、如果你对主帖作者的帖子不屑一顾的话,请勿回帖。谢谢合作!
3、问答求助区发帖求助后,如有其他用户热心帮您解决问题后,请自觉点击设为最佳答案按钮。

 
 
QQ在线客服
QQ技术支持
工作时间:
8:00-18:00
软著登字:
1361266号
官方微信扫一扫
weixin

QQ|小黑屋|Archiver|慈众营销 ( 粤ICP备15049986号 )|网站地图

自动发帖软件 | 自动发帖器 | 营销推广软件 | 网络营销工具 | 网络营销软件 | 网站推广工具 | 网络推广软件 | 网络推广工具 | 网页推广软件 | 信息发布软件 | 网站推广工具 | 网页推广软件

Powered by Discuz! X3.4   © 2012-2020 Comsenz Inc.  慈众科技 - Collect from 深圳吉宝泰佛文化有限公司 公司地址:罗湖区黄贝街道深南东路集浩大厦A1403

返回顶部 返回列表