当前位置: 首页 > news >正文

分级列表html,CSS分级属性 二

使用过 Word 的用户都知道有一个“项目符号和编号”的功能。在 HTML 文档中,设计者无需使用前面提到的一些字体、颜色、容器属性来格式化对象的字体、颜色、边距和填充距等。因为在 CSS 中,已经提供了进行分级的专用分级属性。需要注意的是,无论如何,这些属性只能够被用于“列项”值是“显示”的元素。

display

属性值:block | inline | list-item | none

初始值:block

适用于:所有元素

继承:否

百分比值:不适用

这些属性中的前三个属性在 Internet Explorer 4 中并不支持。

如果是“block”,那么在页面上就会打开一个新的“容器”,这个“容器”被定位在相对于邻近的“容器”,并遵循 CSS 格式化模型的地方。当使用“block”作为属性值时,在元素的前后都会出现一个断行。如果是“list-item”它的效果与“block”的效果有一些相似,唯一不同的是其中加入的一个列项标记。如果使用“inline”作为“display”的属性值,元素前后不会被加上断行。如果是“none”那么顾名思义,该元素就不会显示出来。

list-style-type

属性值:disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

初始值:disc

适用于:“display”值是“list-item”的元素

继承:是

百分比值:不适用

在列项的前面通常要为每一项加上项目符号或编号,以区分不同的列项。共有九个关键字可以描述“list-style-type”的符号或者编号,说明和图例如下:

关键字 说明 图例

disc 圆盘 l

circle 圆圈 m

square 方块 n

decimal 十进制数 1、2、3、4、5、..........

lower-roman 小写罗马数字 i、ii、iii、iv、v、..........

upper-roman 大写罗马数字 I、II、III、IV、V、.........

lower-alpha 小写字母 a、b、c、d、e、..........

upper-alpha 大写字母 A、B、C、D、E、...........

none 不显示项目符号和编号 无

list-style-image

属性值: | none

初始值:none

适用于:“display”值是“list-item”的元素

继承:是

百分比值:不适用

在项目的前面,不但可以使用“list-style-type”加上项目符号和编号,还可以使用“list-style-image”来为项目加上图片符号。当加载图片时,不论是否定义了“list-style-type”属性,浏览器都会使用图片来代替项目符号或编号。

list-style-position

属性值:inside | outside

初始值:outside

适用于:“display”值是“list-item”的元素

继承:是

百分比值:不适用

“list-style-position”的值有两个:“inside”或者是“outside”,其中“outside”值是默认的值。它们决定了列项中的第二行文字的起始位置。

相关文章:

  • html计算机之间的距离,【百思不得其解~求助】html网页编程:求输入的两个数之间的所有质...
  • 计算机游戏7步变28,亲子游戏100种
  • 我的未来规划作文计算机,我的未来规划500字作文
  • 我们一起学猫叫歌曲计算机,我们一起学猫叫一起喵喵喵喵喵是什么歌
  • 池州学院期末计算机考试题,池州学院数据库期末模试卷1.doc
  • 抖音计算机音乐你要我,抖音我要记住你的样子是什么歌
  • 计算机维修工是技工嘛,第二届全国技工院校技能大赛计算机维修工技术点评.doc...
  • 2020计算机考研准备,2020年考研党大三时需要准备啥?看这3个问题
  • 公基计算机试题及答案,2017云南三支一扶考试内容-公基:计算机基础知识
  • 计算机基础2多媒体,计算机基础2.ppt
  • 计算机在未关机的情况下重启,电脑不能关机,详细教您电脑关机后总是重启怎么办...
  • 计算机图像分析系统属于,智能图像分析系统
  • 固态硬盘能提高服务器内存吗,消除固态硬盘应用的五个误区 可以提高数据中心效率...
  • u盘写保护+计算机管理,U盘写保护的解决方法
  • outland服务器注册,Warmane TBC服(Outland)5月20日正式开服 规则介绍与问答
  • .pyc 想到的一些问题
  • [ 一起学React系列 -- 8 ] React中的文件上传
  • 2017 前端面试准备 - 收藏集 - 掘金
  • Debian下无root权限使用Python访问Oracle
  • docker容器内的网络抓包
  • ES6 ...操作符
  • iOS高仿微信项目、阴影圆角渐变色效果、卡片动画、波浪动画、路由框架等源码...
  • Java到底能干嘛?
  • Linux Process Manage
  • python_bomb----数据类型总结
  • Quartz初级教程
  • SOFAMosn配置模型
  • SpiderData 2019年2月16日 DApp数据排行榜
  • 排序(1):冒泡排序
  • 入职第二天:使用koa搭建node server是种怎样的体验
  • 使用 @font-face
  • 试着探索高并发下的系统架构面貌
  • 数据仓库的几种建模方法
  • 职业生涯 一个六年开发经验的女程序员的心声。
  • Spring第一个helloWorld
  • 交换综合实验一
  • 微龛半导体获数千万Pre-A轮融资,投资方为国中创投 ...
  • #Spring-boot高级
  • #我与Java虚拟机的故事#连载17:我的Java技术水平有了一个本质的提升
  • #预处理和函数的对比以及条件编译
  • (HAL)STM32F103C6T8——软件模拟I2C驱动0.96寸OLED屏幕
  • (Python第六天)文件处理
  • (Redis使用系列) SpringBoot 中对应2.0.x版本的Redis配置 一
  • (笔记)Kotlin——Android封装ViewBinding之二 优化
  • (动手学习深度学习)第13章 计算机视觉---微调
  • (附源码)ssm高校实验室 毕业设计 800008
  • (四)docker:为mysql和java jar运行环境创建同一网络,容器互联
  • .htaccess配置常用技巧
  • .locked1、locked勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .NET 6 Mysql Canal (CDC 增量同步,捕获变更数据) 案例版
  • .NET 使用 JustAssembly 比较两个不同版本程序集的 API 变化
  • .net 怎么循环得到数组里的值_关于js数组
  • .NET/C# 在代码中测量代码执行耗时的建议(比较系统性能计数器和系统时间)
  • [2008][note]腔内级联拉曼发射的,二极管泵浦多频调Q laser——
  • [20150629]简单的加密连接.txt