CSS 列表样式
2023-06-13 09:16:01 时间
CSS 列表样式
HTML中包含有序列表标签 ol 和无序列表标签 ul ,他们都可以来定义列表。
通过CSS可以设置列表样式:
设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像在 HTML中,有两种类型的列表:
无序列表 ul 列表项标记用特殊图形(如小黑点、小方框等) 有序列表 ol 列表项的标记有数字或字母使用 CSS,可以列出进一步的样式,并可用图像作列表项标记。
无序列表如下所示: Coffee Coca Cola Coffee Coca Cola 有序列表如下所示: Coffee Coca Cola Coffee Coca Cola 不同的列表项标记list-style-type属性指定列表项标记的类型是:
ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;}
一些值是无序列表,以及有些是有序列表。
作为列表项标记的图像要指定列表项标记的图像,使用列表样式图像属性:
ul list-style-image: url( sqpurple.gif
上面的例子在所有浏览器中显示并不相同,IE 和 Opera 显示图像标记比火狐,Chrome 和 Safari更高一点点。
如果你想在所有的浏览器放置同样的形象标志,就应使用浏览器兼容性解决方案,过程如下
浏览器兼容性解决方案同样在所有的浏览器,下面的例子会显示的图像标记:
ul list-style-type: none; padding: 0px; margin: 0px; ul li background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px;
例子解释:
在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。
为列表使用简写属性,列表样式属性设置如下:
ul list-style: square url( sqpurple.gif
可以按顺序设置如下属性:
list-style-type list-style-position (有关说明,请参见下面的CSS属性表) list-style-image如果上述值丢失一个,其余仍在指定的顺序,就没关系。
所有不同的列表项标记
这个例子演示了所有不同的 CSS 列表项标记。
list-style-type:none 属性可以用于移除小标记。默认情况下列表
或 还设置了内边距和外边距,可使用 margin:0 和 padding:0 来移除:ul { list-style-type: none; margin: 0; padding: 0;所有的CSS列表属性
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/59530.html
php相关文章
- ScrollRect & LayoutGroup & Content Size Fitter & Mask使用滑动列表的几项要点
- python 列表的基本操作
- lua sort排序_python中列表排序的用法
- VBA打开文件夹对话框,取得文件夹内文件列表
- 【愚公系列】2022年11月 微信小程序-优购电商项目-订单列表页面
- 摘录一下Python列表和元组的学习笔记
- 纯CSS时间轴列表
- WordPress 主题教程 #9:Style.css 和 CSS 介绍
- Redis 数据库 ziplist 压缩列表的源码解析详解
- The Shapes of CSS(css的形状)详解编程语言
- Redis如何实现列表的复制?(redis复制list)
- css通用全局样式~a链接、列表项、浮动各种样式
- CSS连接MySQL构建可视化Web应用(css连接mysql)
- CSS如何影响MySQL的使用(css影响MySQL)
- 在DIV+CSS排版中新闻列表的制作方法
- CSS规则层叠的应用css必须要注意的几点
- div+css布局必了解的列表元素ulollidldtdd详解
- 用asp实现网页调用doc附Response.ContentType详细列表
- juqery学习之六CSS--css、位置、宽高