css ul li list-style-type 的使用

ul & li :

前端学习中，经常用到 < ul > < li > 两个标签来做菜单、列表等，而ul标签默认是无序列表：

代码如下：

<h4>一个无序列表：</h4>
<ul><li>咖啡</li><li>茶</li><li>牛奶</li>
</ul>

需要使用有序列表，我们可以通过设置ul 或 li 的 list-style-type 属性来改变列表项前面的标记符

list-style-type :

在 w3c中的定义：属性设置列表项标记的类型。
我们可以通过更改此类型以达到不同的列表效果，它的值包含：

注意事项

li的标记符的占位位置，不算在li的width中，所以当ul 的padding 设置为0 时,标记符将会不显示:

在此情况下可以保留ul的padding 或设置li的margin-left 来调整显示标记符：

要调整li 与标记符的距离，可使用 li 的 text-indent 属性调整之间的距离。

参考链接：https://www.w3school.com.cn/css/pr_list-style-type.asp

css ul li list-style-type 的使用相关推荐

css ul li 图标图片位置定位背景定位
css ul li 图标图片位置定位背景定位这是网站页面只有一张背景图片的时代众多大型网站都是背景图片只用一整张这种模式背景图片的定位应用广泛 .cases li{ lineheight:2 ...
html让ul的li自动居中,css ul li导航菜单居中问题解决方法
昨晚群里一个朋友帮忙解决的问题,之前没有遇到过,题目如下: 不改变html结构,使导航菜单垂直水平居中,导航宽度自适应屏幕100%,高度30px;单项高度28px,宽80px; 兼容:ie6+,ff, ...
CSS ul li:nth-child的详细实例
下面我将用几个典型的实例来给大家讲解:nth-child的实际用途: Tips:还用低版本的IE浏览器的哥们请绕过! 1.取ul li 第一条 ul li:first-child 和最后一条 ...
html5图片列表纵向,div css图片列表实例布局案例ul li布局
DIV CSS布局图文列表布局案例 ul li图文列表使用div css ul li布局图文列表小局部案例,学习图文列表布局实际案例. div+css图文布局案例图本案例在DIVCSS5模板基础上 ...
Web CSS #id 标签选择器 style display 类选择器.class 使用CSS的三种方式列表装饰绝对定位
文章目录 CSS使用的三种方式内联定义方式实现代码实现结果样式块方式实现代码显示结果链入外部样式表文件实现代码图是结果 #id 选择器 #id名实现代码实现结果标签选择器标签 ...
用“ul+li”及css制作韩国风格菜单
http://www.52css.com/article.asp?id=269 韩国网站的设计风格特征鲜明,色彩明快,现在越来越多的人正在模仿这种风格, 下图为一个韩式风格的网站效果: 韩国风格的网站 ...
css技巧之如何实现ul li边框重合
提到边框重合,我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲,你看到了,正是这个,边框重合.其实我们不难发现,这个效果并不难,只是我们没有真正的动手做过而已,所以不知道怎么做,那么下面就是一个很 ...
html中js隐藏div的高度,js如何获取div（ul li）元素的宽度和高度（包括width/height和CSS的宽度和高度）...
某些时候需要知道元素div(或 ul li)的宽度或高度,大多情况下可以用js取元素div的width或height属性获得,但有时候这个方法不一定奏效,把div的宽度或高度定义在CSS样式中,这个方 ...
HTML上的ul li标签消除,去掉ul li 前面的点与空白（div+css）
如果直接在网页用 ul li 标签,默认情况下有一个小黑点,并且每个li前面还有一段空白,尤其是li中包括图片的情况.为什么会出现这种情况?ul li 是 html 中的列表标签,所以默认每个li前面 ...

css ul li list-style-type 的使用

ul & li :

list-style-type :

注意事项

css ul li list-style-type 的使用相关推荐

最新文章

热门文章