《CSS 列表样式》

最新推荐文章于 2024-06-11 16:06:12 发布
最新推荐文章于 2024-06-11 16:06:12 发布
阅读量275 收藏
点赞数 1
分类专栏： # 【 CSS 】

CSS 列表

CSS列表属性作用如下：

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

 

列表

在HTML中，有两种类型的列表：

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

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

不同的列表项标记

list-style-type属性指定列表项标记的类型是：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
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;}
</style>
</head>

<body>
<p>无序列表实例:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>有序列表实例:</p>

<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

一些值是无序列表，以及有些是有序列表。

要指定列表项标记的图像，使用列表样式图像属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul 
{
	list-style-image:url('sqpurple.gif');
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

上面的例子在所有浏览器中显示并不相同，IE和Opera显示图像标记比火狐，Chrome和Safari更高一点点。

如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，过程如下

浏览器兼容性解决方案

同样在所有的浏览器，下面的例子会显示的图像标记：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
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;
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

</html>

例子解释：

  • ul:
    • 设置列表类型为没有列表项标记
    • 设置填充和边距0px（浏览器兼容性）
  • ul中所有li:
    • 设置图像的URL，并设置它只显示一次（无重复）
    • 您需要的定位图像位置（左0px和上下5px）
    • 用padding-left属性把文本置于列表中

列表 -简写属性

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

为列表使用简写属性，列表样式属性设置如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul 
{
	list-style:square url("sqpurple.gif");
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

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

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

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

所有不同的CSS列表项标记

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:disc;}
ul.c {list-style-type:square;}

ol.d {list-style-type:armenian;}
ol.e {list-style-type:cjk-ideographic;}
ol.f {list-style-type:decimal;}
ol.g {list-style-type:decimal-leading-zero;}
ol.h {list-style-type:georgian;}
ol.i {list-style-type:hebrew;}
ol.j {list-style-type:hiragana;}
ol.k {list-style-type:hiragana-iroha;}
ol.l {list-style-type:katakana;}
ol.m {list-style-type:katakana-iroha;}
ol.n {list-style-type:lower-alpha;}
ol.o {list-style-type:lower-greek;}
ol.p {list-style-type:lower-latin;}
ol.q {list-style-type:lower-roman;}
ol.r {list-style-type:upper-alpha;}
ol.s {list-style-type:upper-latin;}
ol.t {list-style-type:upper-roman;}

ol.u {list-style-type:none;}
ol.v {list-style-type:inherit;}

</style>
</head>

<body>
<ul class="a">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Disc type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="c">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ol class="d">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="e">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="f">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="g">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="h">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="i">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="j">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="k">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="l">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="m">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="n">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="o">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="p">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="q">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="r">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="s">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="t">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="u">
<li>None type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="v">
<li>inherit type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>

 

所有的CSS列表属性

属性描述
list-style简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image将图象设置为列表项标志。
list-style-position设置列表中列表项标志的位置。
list-style-type设置列表项标志的类型。
HarkerYX
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS列表样式
m0_57774967的博客
04-28 2585
css列表属性作用： 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 在html中，有两种类型的html列表： 无序列表：列表项的标记使用特殊图形（如小黑点、小方框等） 有序列表：列表项的标记使用数字或字母 使用css，可以列出进一步的样式，并可用图像作列表项标记 不同的列表项标记 list-style-type 属性指定列表项标记的类型 下面是对list-style-type属性的常见属性值的描述： none：不使用项...
CSS 列表样式
天空之外
09-21 1888
我们知道在 HTML 中列表可以分为无序列表、有序列表、定义列表。在网页中经常可以看到无序列表的使用，例如像导航栏菜单、新闻列表、商品分类、图片展示等，基本都是通过无序列表来实现的。 无序列表中每个列表项前面都会默认带一个圆点符号，然而一般我们平时在网站上看到的列表样式，通常前面是没有圆点符号的，所以我们要如何去掉这个默认的圆点符号呢？这些都可以通过 CSS 中的列表属性来实现。 本节要讲的 CSS 中的列表属性有下面四个： 属性 描述 list-sytle-type 设置列表项的标记的类型
CSS列表样式（源码示例）
weixin_47556601的博客
02-04 3470
大家好，今天给大家分享一下CSS列表样式 看源码： 写HTML源码; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表样式</title> </head> <body> <h2 class="title">全部商品分类</h2> <ul>
CSS 列表样式（ul）全面解析
2401_83810323的博客
06-11 796
属性用于定义列表项的标记类型。常见的值包括disc（实心圆）、circle（空心圆）、square（方块）以及none（无标记）。此外，也可以使用decimal（十进制数字）、（小写字母）、（大写罗马数字）等来生成不同的编号效果。ul {/* 方块标记 */ol {/* 大写罗马数字 */
html好看css列表样式_CSS样式HTML列表样式
cunfen6312的博客
07-28 5986
html好看css列表样式 CSS样式HTML列表样式 (CSS Styling HTML Lists) We often see webpages with navigation menus, providing links to other pages in a dropdown fashion, or as a horizontal menu (See the Studytonight W...
CSS 列表样式 (ul)
h13673476027的博客
11-14 1920
一些值是无序列表，以及有些是有序列表。 下列是对list-style-type属性的常见属性值的描述： none：不使用项目符号 disc：实心圆 circle：空心圆 square：实心方块 decimal：阿拉伯数字 lower-alpha：小写英文字母 upper-alpha：大写英文字母 lower-roman：小写罗马数字 upper-roman：大写罗马数字
CSS-列表样式
m0_50555031的博客
05-20 2188
介绍CSS的列表样式及属性
CSS 列表样式详解
大剑师兰特的GIS世界
05-20 1932
CSS列表样式主要用于定制无序列表(``)和有序列表(``)的外观，包括列表项前的标记（如圆点、数字等）的样式。以下是一些关键的CSS属性和它们的用途
html中有序列表的css样式,CSS 列表样式(ul)
weixin_33838896的博客
06-03 3014
CSS列表CSS 列表属性作用如下：设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像列表在 HTML 中，有两种类型的HTML列表：无序列表 - 列表项的标记使用特殊图形(如小黑点、小方框等)有序列表 - 列表项的标记使用数字或字母使用CSS，可以列出进一步的样式，并可用图像作列表项标记。不同的列表项标记list-style-type 属性指定列表项标记的类型是...
css 列表的设置,css设置列表样式的实现方法
weixin_30722051的博客
08-03 1815
css设置列表样式的实现方法发布时间：2020-08-31 11:09:23来源：亿速云阅读：131作者：小新小编给大家分享一下css设置列表样式的实现方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！list-style属性list-style属性是一个速记属性，它可以设置与列表相关的三个不同属性值：ul {list-style: || || ;}这是一个语法示例：ul {li...
5种简单实用的css列表样式实例
01-31
第一个例子的样式看起平淡无奇，不过喜欢简约风格的人也许会感兴趣，这类似于印刷字体风格，简结的同时也不失灵动的特点（当鼠标滑上去的时候）。注：个人喜欢这里的第二个图文混排的例子，但是发现老外更喜欢第一个...
CSS列表样式设计
11-29
总结，CSS列表样式设计涵盖了许多方面，从基础的符号类型更改到高级的动画效果和响应式设计。熟练掌握这些技巧，可以使您的网页列表更加丰富多彩，提升用户体验。通过不断的实践和创新，您还可以探索出更多个性化的...
DIV+CSS问答排行列表样式代码
06-24
【标题】"DIV+CSS问答排行列表样式代码"涉及到的核心知识点是前端网页布局与样式设计，特别是使用HTML的`<div>`元素配合CSS（层叠样式表）来创建动态的问答排行列表。在这个场景中，`<div>`是HTML中的一个块级元素，...
数理方法习题 前六章.pdf
08-03
数理方法习题 前六章
某大型制造企业IT蓝图规划及实施路线.pptx
08-03
某大型制造企业IT蓝图规划及实施路线.pptx
基于Springboot和Vue的社区团购系统设计源码 社区团购系统设计代码（98分期末优秀大作业）
08-03
社区团购系统设计源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
去哪儿旅游&小红书-旅行行业：2023五一旅行趋势报告—想出去玩.pdf
最新发布
08-03
去哪儿旅游&小红书-旅行行业：2023五一旅行趋势报告—想出去玩
基于matlab设计的火焰检测定位.zip
08-03
在MATLAB中，可以使用多种方法进行车牌、人脸、车道线、表盘检测、行人识别和行为识别。以下是一些常见的方法： 1. 车牌检测：可以使用基于图像处理和机器学习的方法来检测车牌。常见的方法包括颜色过滤、形态学操作、边缘检测和字符分割等。 2. 人脸检测：可以使用基于特征提取和分类的方法来检测人脸。常见的方法包括Haar级联分类器、人工神经网络和深度学习方法等。 3. 车道线检测：可以使用基于边缘检测和曲线拟合的方法来检测车道线。常见的方法包括Canny边缘检测和霍夫变换等。 4. 表盘检测：可以使用基于特征提取和机器学习的方法来检测表盘。常见的方法包括颜色过滤、形态学操作、边缘检测和特征匹配等。 5. 行人识别：可以使用基于特征提取和分类的方法来识别行人。常见的方法包括HOG特征提取、SIFT特征提取和深度学习方法等。 6. 行为识别：可以使用基于特征提取和分类的方法来识别行为。常见的方法包括间接算法、基于模型的方法和深度学习方法等。 以上只是一些常见的方法，具体的实现还需要根据具体的问题和数据来选择合适的方法。MATLAB提供了丰富的图像处理和机器学习工具，可以方便地实现这些功能。
华工数字信号处理-DTMF信号的产生与识别 (1).doc
08-03
华工数字信号处理-DTMF信号的产生与识别 (1).doc
HTML与CSS列表样式属性详解
"CSS列表样式属性-HTTP网页设计教程" 在网页设计中，CSS（层叠样式表）列表样式属性是用于控制列表项（list-item）外观的重要工具，它能够定制列表的标记样式，使得网页的布局和视觉效果更加丰富和专业。本文将详细...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值