文档章节

CSS:CSS 列表

o
 osc_kt69pvbx
发布于 2018/04/20 15:13
字数 778
阅读 55
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

ylbtech-CSS:CSS 列表

 

1.返回顶部
1、

CSS 列表


CSS列表属性作用如下:

  • 设置不同的列表项标记为有序列表
  • 设置不同的列表项标记为无序列表
  • 设置列表项标记为图像


列表

在HTML中,有两种类型的列表:

  • 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)
  • 有序列表 - 列表项的标记有数字或字母

使用CSS,可以列出进一步的样式,并可用图像作列表项标记。


不同的列表项标记

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:
    • 设置列表样式类型为没有删除列表项标记
    • 设置填充和边距0px(浏览器兼容性)
  • ul中所有li:
    • 设置图像的URL,并设置它只显示一次(无重复)
    • 您需要的定位图像位置(左0px和上下5px)
    • 用padding-left属性把文本置于列表中

列表 -简写属性

在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。

为列表使用简写属性,列表样式属性设置如下:

实例

ul
{
    list-style-image: url('sqpurple.gif');
}
尝试一下 »

可以按顺序设置如下属性:

  • list-style-type
  • list-style-position (有关说明,请参见下面的CSS属性表)
  • list-style-image

如果上述值丢失一个,其余仍在指定的顺序,就没关系。


Examples

更多实例

所有不同的列表项标记
这个例子演示了所有不同的CSS列表项标记。


所有的CSS列表属性

属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
warn 作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
CSS Browser Selector

CSS Browser Selector 是一个小的 JS 库,可增强 CSS 的选择器功能,支持根据不同的操作系统和浏览器来编写指定的 CSS 代码,可检测浏览器、浏览器版本、平台、平台版本、设备、设备版本、m...

匿名
2013/01/17
2.8K
1
首列固定的列表

实现特殊的表格(UITableView)效果:即表格中的首列固定不动,而每一行除了首列均可左右拖动,以展现每一行更多内容。 作者谭林江(@无法越狱的痛)说:去益盟面试回来,感觉聊得有点郁闷,...

匿名
2013/01/24
1.3K
0
Web开发组件管理器--Bower

Bower 是一个针对Web开发的包管理器。该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包,并管理这些包之间的依赖。 功能有些类似于Component。不同之处是,Component是围绕Git...

匿名
2013/02/01
1.2W
2
网页抓取工具 --pyrailgun

这是一个非常简单易用的抓取工具 怎么使用? 首先你需要创建一个对应站点的规则文件 比如test.json { } 然后在代码里面把它作为一个任务加入到railgun from railgun import RailGun railgun =...

baizhongwei
2013/02/28
7.8K
0
Chrome页面自动刷新插件--smartF5

smartF5是一款chrome插件,用以实现监控页面资源,并自动刷新。 特别适合双屏情况下的DEMO开发,大大提高页面开发效率。 让你键盘上的F5键退休吧! 为什么选择smartF5 本插件具有以下特色: ...

YanisWang
2013/04/04
1.2W
0

没有更多内容

加载失败,请刷新页面

加载更多

利用Numpy中的ascontiguousarray可以是数组在内存上连续,加速计算

1. 概述 在使用Numpy的时候,有时候会遇到下面的错误: AttributeError: incompatible shape for a non-contiguous array 看报错的字面意思,好像是不连续数组的shape不兼容。 有的时候,在看...

osc_9we1w99u
7分钟前
0
0
如何管理客户的期望值?

根据客户关系管理(CRM)中的三角定律,客户满意度=客户体验-客户期望值。客户期望值与客户满意度成相对反比,因此需要引导客户期望值并维持在一个适当的水平,同时客户期望值需要与客户体验协...

cailisuper
今天
0
0
阿里研究员:软件测试中的18个难题

阿里QA导读:对于软件测试来说,怎么样才算测够了?如何评价测试的有效性?那么多测试用例,以后怎么删?在软件测试中会遇到非常多的问题,阿里研究员郑子颖分享了18个他总结出的难题以及相关...

阿里巴巴技术质量
昨天
0
0
Numpy的常用函数总结

1、np.argmax()、np.max()、np.argmin()、np.min()用法: argmax返回的是最大数的索引.argmax有一个参数axis,默认是0。看二维的情况如下: a = np.array([[1, 5, 5, 2],            ...

osc_auwur47t
8分钟前
0
0
【报告分享】2020抖音进阶-挑战赛2.0产品营销方案.pdf(附下载链接)

大家好,我是文文(微信:sscbg2020),今天给大家分享抖音营销中心出品的《2020抖音进阶-挑战赛2.0产品营销方案.pdf》,方案里面的玩法解析、案例、营销重点分析等都很清晰,对短视频及品牌...

智能推荐系统
昨天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部