ul ol 列表的样式的控制

时间:2023-02-23 12:46:05

ul( Unordered List)无序列表

ol(Ordered List)有序列表

列表的样式: 列表原有符号、自定义图形符号、符号显示位置。

1.列表符号

是显示于每一个列表项目前的符号标识。

list-style-type:参数

参数:

disc:圆形(默认)

circle:空心圆

square:方块

decimal:十进制数字

lower-roman:小写罗马数字

upper-roman:大写罗马数字

lower-alpha:小写希腊字母

upper-alpha:大写希腊字母

none:无符号显示

2.自定义图形符号

list-style-image:URL(相对地址或绝对地址)

3.符号显示位置

list-style-position:参数

参数:

inside:在列表框内显示

outside:在列表框外显示

<ol start="2"> <!-- 以2开始 -->
<li>a</li>
<li>b</li>
<li>c</li>
</ol>

<ol reversed> <!-- 倒序显示,没有属性值 -->
<li>a</li>
<li>b</li>
<li>c</li>
</ol>

<ol type="a"> <!-- 显示类型(1,a,A,i,I),默认123 -->
<li>a</li>
<li>b</li>
<li>c</li>
</ol>

<ol>
<li>a</li>
<li>b</li>
<li value="5">c</li> <!-- 强制设置这里从5开始,下面接着是6 -->
<li>d</li>
</ol>

<dl>
<dt>这是一个盘子</dt>
<dd>这是盘子里的一个苹果</dd>
<dd>这是盘子里的一个辣椒</dd>

<dt>这是一个袋子</dt>
<dd>这是盘子里的一个梨</dd>
<dd>这是盘子里的一个板栗</dd>
</dl>

ul ol 列表的样式的控制的更多相关文章

  1. ul ol li的序号编号样式

    序号样式例子,下面是html代码(做参考) <ol> <li>列表内容列表内容列表内容列表</li> <li>列表内容列表内容列表内容列表</li ...

  2. CSS Ul(列表样式)

    CSS Ul(列表样式) CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 一.列表 在HTML中,有两种类型的列表: 无序列表 - 列表 ...

  3. 关于css中列表(ul ol)存在默认间距的问题

    一.总结: 有时候我们要给列表(ul ol 本身就是属于块级元素)的上表框或下边框设置颜色,如下: 但是在给内联块级元素(inline-block)的上表框或下边框设置颜色的时候,就没有这么简单: 在 ...

  4. 0308-标签的用法&lpar;a&comma;ul&sol;ol&comma;table&rpar;

    标签分为: 一般标签:<div> <span> <br/> <hr/> 功能标签:<a> <img> 实体标签:≶ > s ...

  5. html5 分组标签 br hr p div blockquote figure ul ol li pre

    <br>    换行, 单标签 <hr>    分割线,水平线 <p>    段落, 有<br>换行功能, 而且行距会比普通换行要宽. <div& ...

  6. 【WEB基础】HTML &amp&semi; CSS 基础入门(4)列表及其样式

    前面 网页中漂亮的导航.整齐规范的文章标题列表和图片列表等等.这些都是离不开HTML里一个重要的元素----列表,在HTML中有无序列表.有序列表和定义列表三种类型.其中,无序列表应用最为广泛,下面, ...

  7. Div&plus;css中ul ol li dl dt dd使用

    ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...

  8. 关于&lt&semi;ul&gt&semi;&lt&semi;ol&gt&semi;&lt&semi;li&gt&semi;的用法

    <ul>:无序列表 <ol>:有序列表 <li>:行. 想要去掉前面的序号和点可以在<ol>或<ul>style中用list-style: ...

  9. 关键自li,em,dl,ul&comma;ol&comma;footer&comma;header&comma;nav&comma;aside&comma;article

    section 版块 用于划分页面上的不同区域,或者划分文章里不同的节 header 页面头部或者版块(section)头部 footer 页面底部或者(section)底部 nav 导航 (包含链接 ...

随机推荐

  1. 深入理解脚本化CSS系列第一篇——脚本化行内样式

    × 目录 [1]用法 [2]属性 [3]方法 前面的话 脚本化CSS,通俗点说,就是使用javascript来操作CSS.引入CSS有3种方式:外部样式,内部样式和行间样式.本文将主要介绍脚本化行间样 ...

  2. eclipse如何配置tomcat运行web项目时省略项目名称

    三个关键点,如图所示

  3. 【原】react&plus;redux实战

    摘要:因为最近搞懂了redux的异步操作,所以觉得可以用react+redux来做一个小小的项目了,以此来加深一下印象.切记,是小小的项目,所以项目肯定是比较简单的啦,哈哈. 项目效果图如图所示:(因 ...

  4. MS CRM 2011的自定义和开发(11)——插件&lpar;plugin&rpar;开发(三)

    http://www.cnblogs.com/StoneGarden/archive/2012/02/06/2340661.html MS CRM 2011的自定义和开发(11)——插件(plugin ...

  5. 对SQL Server SQL语句进行优化的10个原则

    1.使用索引来更快地遍历表. 缺省情况下建立的索引是非群集索引,但有时它并不是最佳的.在非群集索引下,数据在物理上随机存放在数据页上.合理的索引设计要建立在对各种查询的分析和预测上.一般来说:①.有大 ...

  6. &lpar;转&rpar;linux中常用的头文件

    头文件主目录include 头文件目录中总共有32个.h头文件.其中主目录下有13个,asm子目录中有4个,linux子目录中有10个,sys子目录中有5个.这些头文件各自的功能如下,具体的作用和所包 ...

  7. Codeforces Round&num;201&lpar;div1&rpar; D&period; Lucky Common Subsequence

    题意:给定两个串,求出两个串的最长公共子序列,要求该公共子序列不包含virus串. 用dp+kmp实现 dp[i][j][k]表示以i结尾的字符串和以j结尾的字符串的公共子序列的长度(其中k表示该公共 ...

  8. 【cocos2d-js官方文档】二十五、Cocos2d-JS v3&period;0中的单例对象

    为何将单例模式移除 在Cocos2d-JS v3.0之前.全部API差点儿都是从Cocos2d-x中移植过来的,这是Cocos2d生态圈统一性的重要一环.可惜的是,这样的统一性也在非常大程度上限制了C ...

  9. Java中一个方法只被一个线程调用一次

    1.想在运行时抛出异常,终止方法的运行 private final Set<Long> THREADS = new HashSet<>(); public void someM ...

  10. js实现非模态窗口增加数据后刷新父窗口数据

    父窗口是由两个部分组成,一个html的table,一部分是extjs的gird. 点击grid面板[增加]按钮将会弹出非模态窗口进行新数据的编辑页面 下面是按钮的触发函数代码: var a = win ...