您好!欢迎来到静学网! 注册 登入

  • 静学网专注SEO优化技术视频教程案例分析、算法知识,在这里免费学习到最新的SEO技术,让你轻松通往SEO高工程师级之路,全新的SEO算法将在这里得到解剖。同时静学网提供网站开发、app开发、移动开发、电商、自媒体、行业资讯等内容,丰富及弥补自己的知识体系,让你在未来更具有竞争力。

【css教程】css列表样式中无序列表ul和有序列表ol的使用详解

web前端 教育推动者 次浏览
CSS列表样式在网页设计中是经常用到的,就比如我们的网页菜单,很多设计者都会用到列表样式进行设计,这一方面是方便设计,另一方面是容易控制,并且有比较丰富的图标样式,当然这个一般不常用,所以相对来讲,列表样式还是比较简单的,ul>li是比较常用的无序列表,而ol>li是不经常用的,下面我们分别讲解及值和属性。
 

 ul>li 有序列表属性及值

 
其它我们不多讲,我们直接进入正题,ul>li 常见属性有:
 
list-style   简写属性。用于把所有用于列表的属性设置于一个声明中。
 
list-style实际其它三个的集合书写形式,格式如下:
 
list-style: list-style-type|list-style-position| list-style-image
 
list-style-image        将图象设置为列表项标志。
URL  图像的路径。
none         默认。无图形被显示。
inherit      规定应该从父元素继承 list-style-image 属性的值。
 
 
 
list-style-position     设置列表中列表项标志的位置。
 
 
inside        列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside     默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
inherit      规定应该从父元素继承 list-style-position 属性的值。
 
 
list-style-type  设置列表项标志的类型
 
none         无标记。
disc  默认。标记是实心圆。
circle         标记是空心圆。
square      标记是实心方块。
decimal    标记是数字。
decimal-leading-zero       0开头的数字标记。(01, 02, 03, 等。)
lower-roman    小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman   大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha      小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha     大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek     小写希腊字母(alpha, beta, gamma, 等。)
lower-latin        小写拉丁字母(a, b, c, d, e, 等。)
upper-latin       大写拉丁字母(A, B, C, D, E, 等。)
hebrew    传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian  传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic         简单的表意数字
hiragana  标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
katakana-iroha         标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)
 
(注意这实际已经包含了ol相关图标值)
 
结果如下:
 
ul列表实现结果
 
ol属性中,以上三个值都是通用的,基本上没有什么差别,唯一的差别就是在默认形式下,ol表现为数字标识,而ul表现为图形标志。更多的内容关注CSS教程网。
 



静学网 , 版权所有丨如未注明 , 均为原创丨转载请注明【css教程】css列表样式中无序列表ul和有序列表ol的使用详解
顶一下
(0)
0%
踩一下
(0)
0%
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
用户名: 验证码:点击我更换图片
合作伙伴:
自学网