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 导航 (包含链接 ...
随机推荐
- 【转】Android开发中adb启动失败adb连接异常的解决办法 offline
原文网址:http://www.cnblogs.com/yejiurui/p/4173521.html 一.情况描述: 我们在使用eclipse开发有时候会出现adb连接异常中,有时候控制台会打印出来 ...
- 【二分】【最长上升子序列】HDU 5489 Removed Interval (2015 ACM/ICPC Asia Regional Hefei Online)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5489 题目大意: 一个N(N<=100000)个数的序列,要从中去掉相邻的L个数(去掉整个区间 ...
- 关于STM32 定时器 PWM 实时调节占空比时,预装载特性
最近在调试项目的时候遇到一个奇怪的现象:在调试状态下,给定时器捕获比较寄存器赋不同值,能产生不同占空比的波形(图1).反映到器件上也有不同的电压显示,但是在设备运行的时候,就不行了(图2). 图1 图 ...
- Redis结合EntityFramework结合使用的操作类
最近一段时间在研究redis. 各种不懂, 各种问题.也看了N多的资料. 最终参照着 张占岭 的博客 http://www.cnblogs.com/lori/p/3435483.html 写 ...
- 虚拟机linux配置nginx 为什么win7通过Ip访问不到
第一步,你应该先检查网络win机ping linux机,通了进行下一步第二步,检查端口netstat -antl | grep 你开启的服务端口比如你开了http,那就是80端口或者你自定义的端口,我 ...
- 实时控制软件第一次作业--CNC软件系统分析
作者:李君威U201310747 一.该系统有哪些强实时功能需求?需要对哪些实时事件进行实时响应,对允许的实时延迟的数量级进行估计. 答:在数控系统中,位置控制.插补计算.紧急控制等严格实时性任务需要 ...
- JSP基本语法
在tomcat环境搭建一文中为大家详细的介绍了第一个JSP的程序--Hello World,大家都应该顺利的完成了吧,以此为一个开端,希望大家在学习java EE的路上乘风破浪,不断进步.今天,为大家 ...
- Gradle 1.12 翻译——第十三章 编写构建脚本
有关其它已翻译的章节请关注Github上的项目:https://github.com/msdx/gradledoc/tree/1.12,或訪问:http://gradledoc.qiniudn.com ...
- Directx 3D编程实例:多个3D球的综合Directx实例
最近朋友建议我写一些关于微软云技术的博客留给学校下一届的学生们看,怕下一届的MSTC断档.于是我也觉的有这个必要.写了几篇博客之后,我觉得也有必要把这一年的学习内容放在博客做个纪念,就这样写了本篇博客 ...
- 从客户端(content="<span class="Apple-s...")中检测到有潜在危险的 Request.Form 值。
从客户端(content="<span class="Apple-s...")中检测到有潜在危险的 Request.Form 值. 说明: 请求验证过程检测到有潜在 ...