CSS-列表属性

最新推荐文章于 2024-07-25 18:00:00 发布
最新推荐文章于 2024-07-25 18:00:00 发布
阅读量1k 收藏 5
点赞数 1
分类专栏： BS学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/limeijng/article/details/78724394
版权

使用列表属性可以设置列表项的样式，包括符号、缩进等。

1.1列表符号 list-style-type

使用列表符号属性可以设置列表项所使用的符号类型。

语法：

list-style-type:值

1.2图像符号 list-style-image

图像符号属性是指使用图像作为列表符号，以美化网页。

语法：

list-style-image:none | url（图像地址）

说明：none表示不指定图像，url则使用绝对地址或相对地址指定符号的图像。

举例：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS控制列表元素显示</title> 
<style  type="text/css"> 
.ls1{ list-style-type:circle}  
.ls2{ list-style-image:url(icon03.jpg)}  
</style> 
</head> 
<body> 
<ul class="ls1"> 
<li>诗词歌赋</li> 
<li>散文精选</li> 
<li>言情小说</li> 
</ul> 
<ul class="ls2"> 
<li>诗词歌赋</li> 
<li>散文精选</li> 
<li>言情小说</li> 
</ul> 
</body> 
</html>
运行结果：


1.3列表缩进list-style-position

使用列表缩进属性可以设置列表缩进的程度。

语法：

list-style-position:outside | inside

说明：outside 表示列表项目目标记放置在文本以外，且环绕文本不根据标记对齐；inside表示列表项目标记放置在文本以内，且环绕文本根据标记对齐。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>列表缩进</title> 
<style  type="text/css"> 
<!--
.1{font-size:12px;}
ol{
list-style-type:circle;
list-style-image:url(images/icon_ol.gif);
list-style-position:inside;
}
--> 
</style> 
</head> 
<body> 
<ol class="1"> 
<li></li> 
<li>蒹葭苍苍，白露为霜。所谓伊人，在水一方。</li> 
<li>溯洄从之，道阻且长。溯游从之，宛在水中央。</li> 
<li>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。</li> 
<li>溯洄从之，道阻且跻。溯游从之，宛在水中坻。</li> 
<li>蒹葭采采，白露未已。所谓伊人，在水之涘。</li> 
</body> 
</html>

运行结果：


1.4列表复合属性 list-style

列表复合属性用于设置列表项目的相关样式。

语法：

list-style:list-style-image | list-stale-position | list-stle_type

说明:当 list-style-image 和list-style-type 都被指定的时候，list-style-image 将优先；除非 list-style-image 设置为 none 或指定 url 地址的图片不能被显示。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>复合属性列表</title> 
<style  type="text/css"> 
<!--
.1{font-size:12px;}
ol{
list-style-type:square;
list-style-image:url(images/closel.gif);
list-style-position:outside;
}
--> 
</style> 
</head> 
<body> 
<ol> 
<li>蒹葭苍苍，白露为霜。所谓伊人，在水一方。</li> 
<li>溯洄从之，道阻且长。溯游从之，宛在水中央。</li> 
<li>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。</li> 
<li>溯洄从之，道阻且跻。溯游从之，宛在水中坻。</li> 
<li>蒹葭采采，白露未已。所谓伊人，在水之涘。</li> 
</body> 
</html>

运行结果：

      列表是一种非常实用的数据排列方式，它以条列式的模式来显示数据，是读者能够一目了然。列表元素通常用来定义导航，或者文章标题列表等内容。


「已注销」
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
css属性
Chenyang_lm的博客
09-07 562
1.背景属性（Background） background：在一个声明中设置所有的背景插件1 background:transparent; /透视背景/ background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动1 fixed;(固定) scroll;(滚动) background-color：设置元素的背景颜色1 background-image：设置元素的背景图像1 url(); background-position：设置背景图像的开始位置1 background-
用的CSS属性列表汇总
04-06
用的CSS属性列表汇总 用的CSS属性列表汇总 用的CSS属性列表汇总
CSS属性大全（适合初级，高手绕道）
weixin_30333885的博客
11-19 105
[背景]属性共有六项： 「背景颜色」（background-color），设置背景颜色。 「背景图像」（background-image），设置网页背景图像。 「重复」（background-repeat），控制背景图像的平铺方式，有不重复（no-repeat）、重复（repeat，沿水平、垂直方向平铺）、横向重复（repeat-X，图像沿水平方向平铺）和纵向重复（repeat-Y，沿...
CSS 列表属性详解
最新发布
weixin_59779364的博客
07-25 915
CSS 列表属性详解
CSS:列表属性
yiXin_Chen的博客
12-22 232
列表属性: 1. list-style-type: 列表标识类型 值: none: 无标识 decimal :数值(1,2,3...) lower-roman : (小写罗马i ii iii iv...) lower-greek: (希腊字母:αβγδ...) lower-latin :(小写拉丁字母:a b c d e...) 2. list-styl.
CSS属性之列表属性
但愿人长久 千里共婵娟
02-19 555
列表属性设置列表的标记、用图片代替列表标记以及列表标记的放置位置。
【CSS 列表属性 (List)】
Hey_Coder
11-25 2694
CSS 列表属性 ListCSS 列表属性（List）list-style 属性list-style-type 属性list-style-position 属性list-style-image 属性 CSS 列表属性（List） 用于 属性名 CSS 版本 在一个声明中，一次性设置 所有的 列表属性。 list-style 1 将 列表项标记 设置为图象。 list-sty...
postcss-custom-properties:在CSS中使用自定义属性
04-22
PostCSS自定义属性 使您可以按照规范在CSS中使用自。 :root { --color : red; } h1 { color : var ( --color ); } /* becomes */ :root { --color : red; } h1 { color : red; color : var ( --color ); } ...
css-vars-ponyfill：在旧版和现代浏览器中客户端对CSS自定义属性（也称为“ CSS变量”）的支持
02-05
从客户端将CSS自定义属性转换为静态值 在现代和旧版浏览器中实时更新运行时值 转换<link> ， <style>和@import CSS 将相对的url()路径转换为绝对URL 支持链接和嵌套的var()函数 支持var()函数后备值 ...
postcss-inline-svg:PostCSS插件可引用SVG文件并使用CSS语法控制其属性
05-02
插件可引用SVG文件并使用CSS语法控制其属性。 @svg-load nav url( img/nav.svg ) { fill : #cfc ; path :nth-child ( 2 ) { fill : #ff0 ; } } .nav { background : svg-inline (nav); } .up { background :...
postcss-values-parser:PostCSSCSS属性值解析器
04-30
一个基于构建CSS属性值解析器，遵循与相同的节点和遍历模式。 安装 使用npm： npm install postcss-values-parser --save-dev 如果您发现此模块有用，请考虑。 要求 postcss-values-parser节点版本v6.14.0 +和Post...
known-css-properties：标准和特定于浏览器CSS属性的列表
01-29
标准和浏览器特定CSS属性的列表。 资料来源 标准属性（仅“ REC”，“ CR”，“ LC”，“ WD”，“ FPWD”，“ ED”状态）： : window.getComputedStyle / document.body.style浏览器支持的属性 浏览器版本 桌面 ...
css-列表属性
qq_62779007的博客
03-09 649
<!doctype html><html><head><meta charset="utf-8"><title>css-列表属性</title> <style> body{ background: pink; } ul{ list-style-type:circle; } li{ bo...
CSS属性大全
热门推荐
代码改变生活
06-01 3万+
字体属性：(font) 大小 font-size:x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 font-style:oblique;(偏斜体) italic;(斜体) normal;(正常) 行高 line-height:normal;(正常) 单位：PX、PD、EM 粗细 font-weight:bold;(粗体) li
CSS样式列表属性
aibai666的博客
12-06 1168
列表属性主要用于列表项的样式，常用的列表属性有 list-style-type 用于设置列表项的符号，取值None(无，使用此项可以取消掉列表中的默认列表项的符号) Disc(实心圆) Circle(实心圆) Square(实心方块) list-style-image 使用此属性方法可以设置列表的开始符号为自定义图片 语法格式 list-style-image:url(图片路径) <!DOCTYPE html> <html> <head> <met
css列表属性详解
qq_45973003的博客
07-15 447
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 作者：涛 时间：2020-07-15 描述：html中的列表讲解 --> <style type="text/css"> /* 在html中共有三种列表的类型：
css属性大全表格.
个人进步之路
09-20 809
动画属性 描述 CSS版本 @keyframes 键帧,定义动画 3 animation 动画特效 3 animation-name 动画名 3 animation-duration 持续时间 3 animation-timing-function 过渡类型 3 animation-delay 延迟时间 3 animation-iteration-count 循环次数 3 animation-direction 方向,是否反向 3 animation-play...
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值