NAXS网

首页 > 网络 > CSS / 正文

CSS 列表

admin 2020-01-22 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: square 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设置列表项标志的类型。

推荐您阅读更多有关于“CSS”的文章

  • 常用CSS代码大全 CSS

    常用CSS代码大全

    用html+css可以很方便的进行网页的排版布局,但不是每一种属性或者代码我们都铭记于心,最近我把CSS中的常用代码进行了归纳总结,方便自己以后查看,同时也分享给大家,希望对你们有用。...

    21416 2020-01-26
  • CSS 实例 CSS

    CSS 实例

    CSS 实例CSS背景设置页面的背景颜色设置不同元素的背景颜色设置一个图像作为页面的背景错误的背景图片如何在水平方向重复背景图像如何定位背景图像一个固定的背景图片...

    136 2020-01-22
  • CSS 总结 CSS

    CSS 总结

    你已经学习了CSS,下一步学习什么呢?CSS 总结本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框,并定义元素的填充和边距。...

    96 2020-01-22
  • CSS属性 CSS

    CSS属性

    CSS 属性 选择器具有特定属性的HTML元素样式具有特定属性的HTML元素样式不仅仅是class和id。注意:IE7和IE8需声明!DOCTYPE才支持属性选择器!IE6和更低的版本不支持属性选择器...

    60 2020-01-22
  • CSS 媒体类型 CSS

    CSS 媒体类型

    CSS 媒体类型媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。 媒体类型一些 CSS 属性只设计了某些媒体...

    78 2020-01-22
  • CSS 图像拼合技术 CSS

    CSS 图像拼合技术

    CSS 图像拼合技术图像拼合图像拼合就是单个图像的集合。有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。使用图像拼合会降低服务器的请求数量,并节省带宽。...

    122 2020-01-22
热门浏览
热门标签
生肖 排行榜 游戏 十二生肖 淘宝 WORD 节日 攻略 Excel 小说 抖音 句子 原神 win10 手机 云顶之弈 梦幻西游 SEO ppt 故事 排行 英雄联盟 微信 经典 意思 WPS 赚钱 觅长生 大全 什么 和平精英 疫情地图 百度地图 王者荣耀 春节 推荐 光遇 诗句 Win7
最新评论