博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css中的列表样式
阅读量:5052 次
发布时间:2019-06-12

本文共 1010 字,大约阅读时间需要 3 分钟。

在网页设计中,我们经常将某些具有相似功能的标签放在同一组中,这时我们经常会用到列表标签(无序列表ul,有序列表ol),在列表标签中对列表样式的设计可以使我们的页面得到一定程度的美化。

css中对列表样式主要是对列表项目前列表符号的设置,其语法如下:

 

list-style-type : disc | circle | square | decimal |            lower-roman | upper-roman | lower-alpha | upper-alpha |            none | armenian | cjk-ideographic | georgian | lower-greek |            hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha |            lower-latin | upper-latin

 

通过取不同的list-style-type属性值,我们可以得到不同的项目符号。

例:

ul { list-style-type:disc;} /*实心圆*/ul { list-style-type:circle;} /*空心圆*/ul { list-style-type:square;} /*实心方块*/ul { list-style-type:none;} /*不显示项目符号*/ol { list-style-type:decimal;} /*阿拉伯数字*/ol { list-style-type:lower-roman;} /*小写罗马数字*/ol { list-style-type:upper-alpha;} /*大写英文字母*/

 

如果对于css中所规定了的众多列表符号感到不满意,我们呀可以自定义列表的符号

list-style-image : none | url ( url )

 

使用这种方式,我们可以为项目列表设置任意的图片为列表符号。这里,我们所设的值为图片文件相对于网页文件的路径或绝对路径(来自网站的文件)。

在列表样式中最为需要注意的是,列表样式只能在列表标签中设置(ulol),而不能设置在列表的自标签中(li)。

 

转载于:https://www.cnblogs.com/wuxiaoshang/p/5774576.html

你可能感兴趣的文章
输入名字显示其生日,没有则让输入生日,做记录
查看>>
Kubernetes 运维学习笔记
查看>>
并查集 经典 畅通工程
查看>>
Spark MLlib 之 Naive Bayes
查看>>
php修改SESSION的有效生存时间
查看>>
spring security 11种过滤器介绍
查看>>
Hibernate一对多、多对一关联
查看>>
一、记录Git使用中遇到的问题及解决方法
查看>>
学习网址
查看>>
前端表格插件datatables
查看>>
内部类
查看>>
树链剖分入门
查看>>
图解算法时间复杂度
查看>>
UI_搭建MVC
查看>>
一个样例看清楚JQuery子元素选择器children()和find()的差别
查看>>
代码实现导航栏分割线
查看>>
Windows Phone开发(7):当好总舵主 转:http://blog.csdn.net/tcjiaan/article/details/7281421...
查看>>
VS 2010打开设计器出现错误
查看>>
SQLServer 镜像功能完全实现
查看>>
Vue-详解设置路由导航的两种方法
查看>>