前端学习 -- Css -- 有序列表和无序列表
列表就相当于去超市购物时的那个购物清单，
在HTML也可以创建列表，在网页中一共有三种列表：
1.无序列表
2.有序列表
3.定义列表
无序列表
- 使用ul标签来创建一个无序列表
- 使用li在ul中创建一个一个的列表项，
一个li就是一个列表项
通过type属性可以修改无序列表的项目符号
可选值：
disc，默认值，实心的圆点
square，实心的方块
circle，空心的圆
注意：默认的项目符号我们一般都不使用！！
如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置
ul和li都是块元素
有序列表
有序列表和无序列表类似，只不过它使用ol来代替ul
有序列表使用有序的序号作为项目符号
type属性，可以指定序号的类型
可选值：
1，默认值，使用阿拉伯数字
a/A 采用小写或大写字母作为序号
i/I 采用小写或大写的罗马数字作为序号
ol也是块元素
列表之间都是可以互相嵌套，可以在无序列表中放个有序列表
也可以在有序列表中放一个无序列表
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<!--
作者：1213854220@qq.com
时间：2017-04-10
描述：无序列表
-->
<ul type="circle">
<li>今夕何夕兮，搴舟中流。</li>
</ul>
<ul type="disc">
<li>今日何日兮，得与王子同舟。</li>
</ul>
<ul type="square">
<li>蒙羞被好兮，不訾诟耻。</li>
</ul>
<!--
作者：1213854220@qq.com
时间：2017-04-10
描述：有序列表
-->
<ol type="">
<li>今夕何夕兮，搴舟中流。</li>
<li>今夕何夕兮，搴舟中流。</li>
</ol>
<ol type="a">
<li>今日何日兮，得与王子同舟。</li>
<li>今日何日兮，得与王子同舟。</li>
</ol>
<ol type="A">
<li>蒙羞被好兮，不訾诟耻。</li>
<li>蒙羞被好兮，不訾诟耻。</li>
</ol>
<ol type="i">
<li>心几烦而不绝兮，得知王子</li>
<li>心几烦而不绝兮，得知王子</li>
</ol>
<ol type="i">
<li>山有木兮木有枝，心悦君兮君不知。</li>
<li>山有木兮木有枝，心悦君兮君不知。</li>
</ol>
<!--
作者：1213854220@qq.com
时间：2017-04-10
描述：无序嵌套有序
-->
<ul type="circle">
<li>
<ol>
<li type="">今夕何夕兮</li>
<li>搴舟中流。</li>
</ol>
<li>今夕何夕兮，搴舟中流。</li>
</ul> <ol type="A">
<li>
<ul>
<li>今夕何夕兮</li>
<li>搴舟中流。</li>
</ul>
<li>今夕何夕兮，搴舟中流。</li>
</ol>
</body> </html>
结果：
前端学习 -- Css -- 有序列表和无序列表的更多相关文章
- 9月5日网页基础知识 通用标签、属性（body属性、路径、格式控制） 通用标签（有序列表、无序列表、常用标签）（补）
网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...
- 9月11日上午HTML有序列表、无序列表、网页的格式和布局
样式表 六.列表方块 1.有序列表变无序列表 <ol> <li>张店</li> <li>桓台</li> <li>淄川</l ...
- 有序列表和无序列表、流、格式布局：position
列表方块: 有序列表和无序列表 ol/ul 例如<ol: style:"list-style:"" "> 1.<ol: style:&quo ...
- Python中将字典转换为有序列表、无序列表的方法
说明:列表不可以转换为字典 1.转换后的列表为无序列表 a = {'a' : 1, 'b': 2, 'c' : 3} #字典中的key转换为列表 key_value = list(a.keys()) ...
- Markdown中有序列表和无序列表
最近有用户问我,在简书写 Markdown, 一条有序列表 item 之后接一条无序列表 item,为什么 parse 的结果,第二个 item 依旧是作为有序列表的第二项显示,带有有序列表的列表符号 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- 前端学习 -- Css -- 定义列表
定义列表用来对一些词汇或内容进行定义 使用dl来创建一个定义列表 dl中有两个子标签 dt : 被定义的内容 dd : 对定义内容的描述 同样dl和ul和ol之间都可以互相嵌套 <!DOCTYP ...
- html有序列表和无序列表
css控制UL LI 的样式详解(推荐) CSS: 代码如下: #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} 代码如 ...
- 前端学习——css实用技术
一,css控制文本样式 文本相关的css属性有很多,包括: color;font-size;font-weight;text-transform(大小写uppercase等);text-decorat ...
随机推荐
- 大数据入门第二十一天——scala入门（一）并发编程Actor
注:我们现在学的Scala Actor是scala 2.10.x版本及以前版本的Actor. Scala在2.11.x版本中将Akka加入其中,作为其默认的Actor,老版本的Actor已经废弃 一. ...
- Android病毒家族及行为（一）
1病毒名称:a.remote.GingerMaste中文名:病毒家族:GingerMast病毒类别:远程控制恶意行为:获取root权限,同时连接远端服务器,在其指令控制下静默下载其它恶意软件,给用户手 ...
- C# WPF xml序列化 反序列化
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...
- C# Test Encryption and Decryption
public MainWindow() { InitializeComponent(); Title = getUUID(); string s= httpGet("http://220.1 ...
- 20155235 《网络攻防》 实验五 MSF基础应用
20155235 <网络攻防> 实验五 MSF基础应用 实验内容 一个主动攻击实践,如ms08_067; (1分) 一个针对浏览器的攻击,如ms11_050:(1分) 一个针对客户端的攻击 ...
- linux & windows下重启oracle
Linux:方法1 用root以ssh登录到linux,打开终端输入以下命令: cd $ORACLE_HOME #进入到oracle的安装目录 dbstart #重启服务器 lsnrctl start ...
- LoRa---射频信号接收框架简图介绍
LoRa整体框架图如下: 内容下次再填! 内容补上: 射频信号的接收流程(小博并非专业,错了emmmmm轻喷):射频--->中频--->基带,下面按照图中标的序号开始介绍: 1.天线接受射 ...
- 设计模式 笔记 迭代器模式 Iterator
//---------------------------15/04/26---------------------------- //Iterator 迭代器模式----对象行为型模式 /* 1:意 ...
- Asp.Net_HttpModule的应用
IHttpModule向实现类提供模块初始化和处置事件. IHttpModule包含兩個方法: public void Init(HttpApplication context);public voi ...
- 学习git 新手。这个写的不错
转自:https://www.cnblogs.com/wupeiqi/p/7295372.html 版本控制 说到版本控制,脑海里总会浮现大学毕业是写毕业论文的场景,你电脑上的毕业论文一定出现过这番景 ...