CSS List
来源:互联网 发布:怎么申请网络金融p2p 编辑:程序博客网 时间:2024/04/29 14:30
List
CSS list 性质允许你对有序列表和无序列表设置不同的 list item marker(列表项目的标记),你也可以把一个图片设为列表项目的标记。
List item marker
The type of list item marker is specified with the list-style-type property
该性质设定列表项目标记的样式。
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> 和 <ol> 这两个元素上的,而不是<li>
An Image as The List Item Marker
To specify an image as the list item marker, use the list-style-image property.
使用该性质设定图片为列表元素的标号。
ul{list-style-image: url('sqpurple.gif');}
注意:The example above does not display equally in all browsers. IE and Opera will display the image-marker a little bit higher than Firefox, Chrome, and Safari.
上面的例子中图片标号在 IE 和 Opera 浏览器中比 FF、Chrome 和 Safari 中显示的位置要略高一些。下面给出跨浏览器解决办法。
Crossbrowser solution
ul{list-style-type: none;padding: 0px;margin: 0px;}ul li{background-image: url(sqpurple.gif);background-repeat: no-repeat;background-position: 0px center; padding-left: 15px; }
Shorthand property
可以把所有list的性质写在一个缩写性质里来实现。The shorthand property used for lists, is the list-style property.
属性值的书写顺序
- list-style-type
- list-style-position (使用方式见补充部分)
- list-style-image
It does not matter if one of the values above are missing, as long as the rest are in the specified order.
如果上述属性有一个没有用到也不要紧,只要余下的属性是按照这个顺序书写的就可以。
补充:
The list-style-position property specifies if the list-item markers should appearinside oroutside the content flow.
该性质设定列表元素标号是出现在内容里边还是外边。
Outside:
- Coffee
- Tea
- Coca-cola
Inside:
- Coffee
- Tea
- Coca-cola
- CSS List
- CSS hack: CSS hack List
- <css 五>list
- CSS list-style 属性
- CSS div 定义的list
- CSS list-style样式集锦
- CSS列表属性list-style-type 和 list-style-image
- css手册(六)List 列表
- css reset中的list-style:none
- sencha touch list css(样式) 详解
- CSS: list-style 和 inline 用法详解
- H5学习之19 css-list
- div+css - XHTML标准 - 5.2.4. List Module列表模块
- css(scrollbar-base-color and list-style-type)
- CSS属性总结(三):positioning, dimension, list, table
- css取消无序列表<ul>点用list-style:none;
- css学习之font与colours(list-style-position)
- CSS list-style属性控制li标签样式
- 详解 Android AsyncTask
- Path Sum II 二叉树求和
- 通过函数指针调用函数
- 析构函数为何可以为虚函数?
- 欢迎使用CSDN-markdown编辑器
- CSS List
- [MySQL复制错误]Last_Errno: 1666 Last_Error: Error executing row event: 'Cannot execute statement: imposs
- 匈牙利命名法
- js解析Json数据
- Win32时间类型FILETIME/SYSTEMTIME/WINDOWSTIME(FILETIME这个名字很奇怪,其实他跟FILE并没有直接关系,只是很多File的API中,都以这个为时间的类型)
- 网易公开课-iOS7应用开发-笔记-1-(1)
- Flatten Binary Tree to Linked List 将二叉树转为链表
- 实时请求获取数据重复显示解决办法
- 《CTCI》3.7 “猫狗”队列