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-标签的用法(a,ul/ol,table)

    标签分为: 一般标签:<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 & CSS 基础入门(4)列表及其样式

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

  7. Div+css中ul ol li dl dt dd使用

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

  8. 关于<ul><ol><li>的用法

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

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

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

随机推荐

  1. JQuery获取元素宽度.width()与.css(‘width’)两个函数的区别

    整理翻译自:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ 大意是: 在J ...

  2. CodeForces 220(div 2)

    悲剧的div2..... A 题意:在n * m的矩形平面直角坐标系中,从(x, y)可以到四个点(x - a, y - b),(x + a, y - b),(x - a, y + b),(x + a ...

  3. openStack images

  4. M - 非常可乐

    很明显看出来的广搜题目,不过因为有3个杯子相互倾倒,所以会产生6种倒发,比较冗杂,不过应该可以构造一个数组来解决这个问题,试试看吧 ////////////////////////////////// ...

  5. jMeter接口测试案例

  6. multipath.conf

    # This is a basic configuration file with some examples, for device mapper# multipath.# For a comple ...

  7. python daemon化你的程序

    在之前的树莓派网关项目中遇到了这样一个问题,由于要把网关写的Server持续运行,尤其是要加电自动开启.发现ssh登录开启服务程序之后,当把pty退出时Server端自动断开了,这里想到的APUE中第 ...

  8. Linux 和 Windows 下对long long的输出

    以前一直用__int64来识别windows还是Linux,可是发现HDU好像不认 看到wzy用的UNIX可以. UNIX是Linux下定义的,具体是什么可以去百度. 那么就可以 #ifdef UNI ...

  9. mysql 更新有外键约束的字段

    给一个表的字段更新,发现 这个字段是外键,刚开始用了笨 的方法,取消外键,修改后,在添加, 网上百度了. 这样设置 先 关闭外键约束 SET FOREIGN_KEY_CHECKS=0; 执行完了 打开 ...

  10. 基于redis 内存数据库简单使用

    在ecplise中使用内存数据的客端户,前提要准备要下载两个jar包 commons-pool2-2.0.jar jedis-2.4.2.jar 前提准备做好了,那我们就开启redis的服务,打开一个 ...