ul ol 列表的样式的控制
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 列表的样式的控制的更多相关文章
- ul ol li的序号编号样式
序号样式例子,下面是html代码(做参考) <ol> <li>列表内容列表内容列表内容列表</li> <li>列表内容列表内容列表内容列表</li ...
- CSS Ul(列表样式)
CSS Ul(列表样式) CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 一.列表 在HTML中,有两种类型的列表: 无序列表 - 列表 ...
- 关于css中列表(ul ol)存在默认间距的问题
一.总结: 有时候我们要给列表(ul ol 本身就是属于块级元素)的上表框或下边框设置颜色,如下: 但是在给内联块级元素(inline-block)的上表框或下边框设置颜色的时候,就没有这么简单: 在 ...
- 0308-标签的用法(a,ul/ol,table)
标签分为: 一般标签:<div> <span> <br/> <hr/> 功能标签:<a> <img> 实体标签:≶ > s ...
- html5 分组标签 br hr p div blockquote figure ul ol li pre
<br> 换行, 单标签 <hr> 分割线,水平线 <p> 段落, 有<br>换行功能, 而且行距会比普通换行要宽. <div& ...
- 【WEB基础】HTML & CSS 基础入门(4)列表及其样式
前面 网页中漂亮的导航.整齐规范的文章标题列表和图片列表等等.这些都是离不开HTML里一个重要的元素----列表,在HTML中有无序列表.有序列表和定义列表三种类型.其中,无序列表应用最为广泛,下面, ...
- Div+css中ul ol li dl dt dd使用
ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...
- 关于<ul><ol><li>的用法
<ul>:无序列表 <ol>:有序列表 <li>:行. 想要去掉前面的序号和点可以在<ol>或<ul>style中用list-style: ...
- 关键自li,em,dl,ul,ol,footer,header,nav,aside,article
section 版块 用于划分页面上的不同区域,或者划分文章里不同的节 header 页面头部或者版块(section)头部 footer 页面底部或者(section)底部 nav 导航 (包含链接 ...
随机推荐
- lightoj 1300 边双联通分量+交叉染色求奇圈
题目链接:http://lightoj.com/volume_showproblem.php?problem=1300 边双连通分量首先dfs找出桥并标记,然后dfs交叉着色找奇圈上的点.这题只要求在 ...
- poj 2187 凸包加旋转卡壳算法
题目链接:http://poj.org/problem?id=2187 旋转卡壳算法:http://www.cppblog.com/staryjy/archive/2009/11/19/101412. ...
- poj2569
http://poj.org/problem?id=2965 好吧终于没有图片了,这道题看起来应该简单一些吧,毕竟已经有7000多人A了,好吧,还是先看看题目再说. 题目大意: //还是吃过晚饭后再看 ...
- Linux设备驱动编程之复杂设备驱动
这里所说的复杂设备驱动涉及到PCI.USB.网络设备.块设备等(严格意义而言,这些设备在概念上并不并列,例如与块设备并列的是字符设备,而PCI.USB设备等都可能属于字符设备),这些设备的驱动中又涉及 ...
- ERROR 1372 (HY000): Password hash should be a 41-digit hexadecimal number;
rpm 安装了 mysql 5.6 的版本 遇到的问题 1. 提示与5.1版本的有冲突. 解决方式, 是 rpm --force -ivh rpm包.rpm 进行强制安装 2. 启动 mysql 后, ...
- Linux磁盘管理:LVM逻辑卷基本概念及LVM的工作原理
一.传统的磁盘管理 其实在Linux操作系统中,我们的磁盘管理机制和windows上的差不多,绝大多数都是使用MBR(Master Boot Recorder)都是通过先对一个硬盘进行分区,然后再将该 ...
- Linux开发工具之Makefile(上)
二.makefile(上) 01.make工具 利用make工具可以自动完成编译工作.这些工作包括:如果修改了某几 个源文件,则只重装新编译这几个源文件:如果某个头文件被修改了,则 重新编译所有包 ...
- 一道在知乎很火的 Java 题——如何输出 ab【转】
这是一个源自知乎的话题,原贴链接:一道百度的面试题,有大神会嘛? 虽然我不是大神,但我也点进去看了一下,思考了一会之后有了一些思路,然后去看其它人的答案的时候果然全都已经被各路大神们先想到并贴出来了, ...
- ZOJ1463
题意:给一个括号字符串,求解最少添加的字符能使整个字符串匹配. 输入: s(未匹配的字符串) 输出: S(匹配后的字符串) 思路:绝壁超级坑的一道题,格式我不想说什么了,特坑,然后就是对给定的字符串, ...
- vertical-align各属性对比
测试用代码 <!DOCTYPE html> <html> <head> <style> #dd { //line-height: 300px; back ...