小菜鸡的第六篇博客
本系列文章仅仅是对基础的HTML5以及CSS进行讲解，更加详细的内容均会附上链接，以便查阅和版权保护。
今天是个周五，然后国务院发了通知，说劳动节放假从一天延长到了四天，再加上我星期二只有上午有课，相当于放了四天半，稍稍的开心一下，希望那个时候的我能够不是为了期中考试而哭泣。。。。
话说我会在期中考试的时候更新数据结构的期末试卷解析，题库源自《南昌大学软件学院2014-2015年数据结构期末考试试卷》如果有人也在学习数据结构的话可以等我更新解析。
言归正传
本章讲的是关于HTML5中创建列表，比如有序列表和无序列表。这一章的东西不多，下一章的东西会很多，下一章就要开始讲表单了，开始正式进入交互界面。
- 创建有序列表和无序列表
- 选择标记
- 使用定制的标记
- 选择列表的起始编号
- 控制标记的位置
- 同时设置所有的列表样式属性
- 设置嵌套列表的样式
- 创建描述列表
1. 创建有序列表和无序列表
创建列表，这个时候我们就要用上ol（有序列表）ul（无序列表）li（列表元素）
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<ol>
<li>11</li>
<li>22</li>
<li>33</li>
</ol>
就是这样。一个是圆点（后面会讲到怎么将圆点改成其他的东西）一个是数字（这个也可以改）
2. 选择标记
对，就是现在开始讲怎么更换列表样式（就是看起来更加花里胡哨）
.aa{
list-style-type:armenian;}
.bb{
list-style-type:decimal;}
.cc{
list-style-type:georgian;}
.dd{
list-style-type:hiragana-iroha;}
.ee{
list-style-type:square;}
.ff{
list-style-type:upper-alpha;}
<ol>
<li class="aa">11</li>
<li class="bb">22</li>
<li class="cc">33</li>
<li class="dd">44</li>
<li class="ee">55</li>
<li class="ff">66</li>
</ol>
这就是最终效果图，实际上还有很多种，这只是其中的一小部分。
3. 使用定制的标记
当然如果你觉得这些还是不够花里胡哨，毕竟年轻人嘛，总是喜欢些不同的东西，那么现在你就可以自己定义样式了
ul{
list-style:none;
margin-left:0;
padding-left:0;}
li{
background:url(2.jpg)
no-repeat 0 .1em;让图像在列表项目内显示的位置稍微往下一点
line-height:1.8;让行高变大，从而可以容纳整个标记
padding-left:1.75em;}将文本推开，为标记腾出位置
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<ol>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
<li>66</li>
</ol>
最终的效果图就是这样了，其中对ul定义的元素list-style:none;，清除了ul自身的格式（即使原本有的小黑点被清除了）
4. 选择列表的起始编号
</ul>
<ol start="2">
<li>11</li>
<li value="5">22</li>
<li>33</li>
<li>44</li>
<li>55</li>
<li>66</li>
</ol>
如上所示，我在ol中添加了start="2"属性，列表便从2开始计数，当我在li中添加value=“5”，不论实际上到了哪儿，都会指向我所输入的值，并且后续的都会从我所指定的值开始计数
5. 控制标记的位置
默认情况下，标记和文本是分开的，但是如果你想让它观赏性没那么强，那么你可以试试下面的这个（当然如果某些特定情况需要这么做那你就这样做）
<ol start="2">
<li>11111111111111111111111111111111111</br>11111111111111111111111</br>111111111111111111111111111111111111111111</br>111111111111111111111111111111111111111111</li>
<li value="5">22</li>
<li>33</li>
</ol>
这是原本的（不要在意我为了让他换行做了些什么）
ol{
list-style-position:inside;}
这是我为ol格式添加了属性之后呈现的状态，可以看出序号直接嵌套在文本内了。
6. 同时设置所有的列表样式属性
这个呢，讲的依旧是简写，就是在一行格式中为所有的元素格式化。
ol{
list-style:circle inside;}
就是这样，通过list-style:circle inside;同时把列表的序号改为了circle并使序号内嵌。
7. 设置嵌套列表的样式
这里讲的是一个列表内嵌套另外一个列表。并为列表中的列表设置格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Styling Nested Ordered Lists</title>
<link rel="stylesheet" href="css/nested-lists.css" />
</head>
<body>
<h1 class="hdg">The Great American Novel</h1>
<ol>
<li>Introduction
<ol>
<li>Boy's childhood</li>
<li>Girl's childhood</li>
</ol>
</li>
<li>Development
<ol>
<li>Boy meets Girl</li>
<li>Boy and Girl fall in love</li>
<li>Boy and Girl have fight</li>
</ol>
</li>
<li>Climax
<ol>
<li>Boy gives Girl ultimatum
<ol>
<li>Girl can't believe her ears</li>
<li>Boy is indignant at Girl's indignance</li>
</ol>
</li>
<li>Girl tells Boy to get lost</li>
</ol>
</li>
<li>Denouement</li>
<li>Epilogue</li>
</ol>
</body>
</html>
/* :::: Not shown in book - just a little font and spacing treatment :::: */
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
}
.hdg {
font-size: 1.25em;
margin-bottom: 0;
}
.hdg + ol { /* like h1 + ol */
margin-top: .5em;
}
/* :::: Code from book example :::: */
/* Set markers */
ol {
list-style-type: upper-roman;
}
ol ol {
list-style-type: upper-alpha;
}
ol ol ol {
list-style-type: decimal;
}
/* Set font sizing */
ol li {
font-size: .875em;
}
li li {
font-size: 1em; /* prevent shrinking text! */
}
上面这一大堆，就是列表的嵌套。
8. 创建描述列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Nested Description List</title>
<link rel="stylesheet" href="css/description-list-nested.css" />
</head>
<body>
<h1>Credits for <cite>Amélie</cite></h1>
<dl>
<dt>Director</dt>
<dd>Jean-Pierre Jeunet</dd>
<dt>Writers</dt>
<dd>Guillaume Laurant (story, screenplay)</dd>
<dd>Jean-Pierre Jeunet (story)</dd>
<dt>Cast</dt>
<dd>
<!-- Start nested list -->
<dl>
<dt>Audrey Tautou</dt> <!-- Actor/Actress -->
<dd>Amélie Poulain</dd> <!-- Character -->
<dt>Mathieu Kassovitz</dt>
<dd>Nino Quincampoix</dd>
</dl>
<!-- end nested list -->
</dd>
</dl>
</body>
</html>
body {
font-family: Verdana, Geneva, sans-serif;
}
h1 {
font-size: 1.75em;
}
dt {
font-weight: bold;
text-transform: uppercase;
}
/* style the dt of any dl within another dl */
dl dl dt {
text-transform: none;
}
/* style a dt that follows a dd immediately */
dd + dt {
margin-top: 1em;
}
dldtdd这三个便是描述列表的关键元素，其中dtdd这俩需要嵌套在 dl中，并且需要先有dt才能出现dd，其中dt默认情况下向左对齐，dd则会有缩进。而嵌套时 dl可以嵌套在dd中，并且在默认情况下，当一个dl嵌套在另一个dl中时，嵌套的列表会自动进行缩进。
好的，本章结束，，，，，下一章估摸有本章的两倍。。。。。。。