列表，表格和表单
1.项目符号样式 list-style-type
list-style-type属性允许你控制项目符号（也称为标记）的形状或样式。该属性可以应用到<ol>元素，<ul>元素，<li>元素的规则中使用。
无序列表：对于一个无序列表的list-style-type属性，你可以使用以下值：
none disc circle square
有序列表：对于一个有序（编号）列表的list-style-type属性，你可以使用以下值：
decimal 1 2 3 decimal-leadin
g-zero 01 02 03 lower-alpha a b c lower-roman upper-roman
ul{
list-style-type: lower-roman;
}2.项目图片 list-style-image
可利用list-style-image属性将一个图像作为项目符号使用。该属性的值以字母url开头，后面跟着一堆圆括号，在括号里面，图像的路径在双引号中给出。该属性可以应用到<ul>元素和<li>元素的规则中。
ul{
list-style-image: url("address") ;
}3.标记的定位 list-style-position
默认情况下，列表会缩进到页面中。list-style-position属性用于表明标记显示的位置，实在包含主体内容的盒子的内部，还是在其外部。该属性可以选用以下两个值：
outside：该值表明标记位于文本块的左侧。
inside：该值表明标记位于文本块内部，同时文本块会被缩进。
4.列表快捷方式 list-style
与其他的一些CSS属性一样，针对列表样式也有一个类似快捷方式的属性。该属性成为list-style，它允许你按任意顺序表示标记的样式，图像和位置属性。
5.表格属性
width：用于设置表格的宽度
padding：用于设置每个单元格边框与其内容之间的空隙
text-transform：用于将表格标题中的内容转换成大写
letter-spacing，font-size：用于设置表格标题的内容，增加额外的样式
border-top，border-bottom：用于设置表格标题上方和下方边框
text-align：用于将某些单元格中的书写方式设置为向左对齐或向右对齐
background-color：用于交替改变表格的背景颜色
：hover：在用户吧光标悬停在某个表格行时将此行高亮显示设置单元格内边距：如果单元格中的文本紧贴边框，将不利于阅读，增加内边距有利于提高文本的可读性。
区分标题：将表格标题以粗体显示能够提高标题的可读性。为了明确地区分标题和内容，还可将标题大写，然后为其添加背景色或者下划线。
交替改变表格行的背景色：每隔一个表格行改变他的背景色有利于用于一行一行地查看。为了保持表格地整洁，可使用与表格行正常颜色右细微差别的背景色。
对齐数字：对于包含数字的列，可使用text-align属性将其内容向右对齐，这样一来大数字与小数字的差别便可以一目了然。
6.空单元格的边框 empty-cells
如果在一个表格中含有空单元格，那么你可以使用empty-cells属性来指定是否显示空单元格的边框。由于浏览器按不同的方式对空单元格进行处理，所以对于任意空单元格，如果你想让显示或者隐藏它们的边框，就需要用到empty-cells，该属性有三个值：
show：该值用于显示空单元格的边框。
hide：该值用于隐藏空单元格的边框。
inherit：如果一个表格嵌套在另一个表格中，那么inherit值表明单元格遵循外部表格的规则（继承）。
7.单元格之间的空隙 border-spacing，border-collapse
border-spacing属性允许你控制相邻单元格之间的距离。默认情况下，浏览器经常在每个的单元格之间留有一个较小的缝隙，如果你想增加或者减小这个缝隙，可以利用border-spacing属性进行控制。该属性的值通常以像素指定。如果希望分别指定单元格之间的横向距离和纵向距离，你可以一次指定两个值。
如果为单元格添加了边框，那么在两个单元格相接的地方，边框的宽度就会使外援边框的两倍。要避免这种情况的发生，可使用border-collapse属性来合并相邻的边框。该属性的可选值右：
collapse：该值表示尽可能将单元格相邻的边框何为一个单独的边框
separate：该值表示相邻的边框分离。
8.定义表单样式
CSS通常用于控制表单元素的外观。它可以使表单更美观，也可以使表单在不同的浏览器中表现得更加一直。它主要定义下列控件的样式：
文本输入框和文字域 提交按钮 表单中的标签，可以精确地对表单中的控件进行对齐。
9.定义单行文本框样式
这里总结以下用于文本输入框的一些常用CSS属性：
font-size：用于设置用户输入文本的大小。
color：用于设置文本颜色。
background-color：用于设置输入文本框的背景色。
border：用于在文本输入框的边缘增加边框。
border-radius：可用于创建圆角边框。
伪类：focus：用来咋使用文本输入框时改变文本输入框的背景颜色。
伪类：hover：用来在用户将光标悬停在文本输入框时改变文本输入框的背景色。
background-image：为盒子增加背景图像。10.定义提交按钮样式
提交按钮所涉及的<input>元素设置的样式：
color：用于控制按钮上的文本的颜色。
text-shadow：可在支持改属性的浏览器上展示3D效果的文本。
border-bottom：使按钮的下方 边框稍微粗一点，从而使3D效果更加明显。
background-color：可以使提交按钮从周围的项目中凸显出来。
：hover：鼠标悬停时改变按钮样式。11.定义字段集及说明的样式
<fiedset>字段集主要用来确定一个表单的边缘。在一个长表单中，它可以用来将相关信息进行分组。<legend>元素用于说明控件组中需要何种信息。以上两种元素常用的属性包括：
width：用于控制字段集的宽度。
color：用于控件文本的颜色。
background-color：用于改变这些元素的背景色。
border：用于控制字段集合/或说明周围的边框的外观。
border-radius：用于在支持该属性的浏览器中将这些元素的边缘进行柔化。
padding：可用来增加这些元素的内边距。12.表单控件的对齐：问题
表单中的标签元素常常有长短不一的情况，这意味着表单控件可能不会对齐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="problem.css">
</head>
<body>
<div>
<label for="name" class="title">Name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="email" class="title">Email:</label>
<input type="text" id="email" name="email">
</div>
<div class="radio-buttons">
<span class="title">Gender</span>
<input type="radio" id="male" name="gender" value="M">
<label for="male">M</label>
<input type="radio" id="female" name="gender" value="F">
<label for="female">F</label>
</div>
<div class="submit">
<input type="submit" value="Register" id="submit">
</div>
</body>
</html>13.表单空间的对齐：解决方案
div{
border-bottom: 1px solid #efefef;
max-resolution: 10px;
padding-bottom: 10px;
width: 260px;
}
.title{
float: left;
width: 100px;
text-align: right;
padding-right: 10px;
}
.submit{
text-align: right;
}可以比较不添加CSS前后的变化。
14.光标样式 cursor
cursor属性用于控制先是给用户的光标的类型。下面列出该属性最常用的值：
auto crosshair default pointer move text wait help url("cursor.jpg")自定义
15.示例 本示例将演示我们本文所介绍的一些CSS属性，这些属性用于控制列表，表格和表单的外观。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>List,Tables and Forms</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<h1>Poetry WorkShop</h1>
<p>We will be conducting a number of poetry workshops
and symposiums throughout the year.</p>
<p>Please note that the following events are free to
members:</p>
<ul>
<li>A Poetic Perspective</li>
<li>Walt Whitman at War</li>
<li>Found Poems and Outsider Poetry</li>
</ul>
<table>
<tr class="head">
<th></th>
<th>New York</th>
<th>Chicago</th>
<th>San Francisco</th>
</tr>
<tr>
<th>A Poetic Perspective</th>
<td>Sat,4 Feb 2012 <br> 11am-2pm</td>
<td>Sat,3 Mar 2012 <br>11am-2pm</td>
<td>Sat,17 Mar 2012 <br>11am-2pm</td>
</tr>
<tr class="even">
<th>Walt Whitman at War</th>
<td>Sat,7 Apr 2012 <br>11am-1pm</td>
<td>Sat,5 May 2012 <br>11am-1pm</td>
<td>Sat,19 May 2012 <br>11am-1pm</td>
</tr>
<tr>
<th>Found Poems & amp: Outsider Poetry</th>
<td>Sat,9 Jun 2012 <br>11am-2pm</td>
<td>Sat,7 Jul 2012 <br>11am-2pm</td>
<td>Sat,21 Jul 2012 <br>11am-2pm</td>
</tr>
<tr class="even">
<th>Natural Death:An Exploration</th>
<td>Sat,4Aug 2012 <br>11am-4pm</td>
<td>Sat,8 Sep 2012 <br>11am-4pm</td>
<td>Sat,15 Sep 2012 <br>11am-4pm</td>
</tr>
</table>
<form action="#">
<fieldset>
<legend>Register your interest</legend>
<p>
<label for="name" id="title">Your name:</label>
<input type="text" name="name" id="name"><br>
<label for="email" class="title">Your Email:</label>
<input type="text" name="email" id="email">
</p>
<p>
<label for="location" class="title">Your closest center:</label>
<select name="location" id="location">
<option value="ny">New York</option>
<option value="il">Chicago</option>
<option value="ca">San Francisco</option>
</select>
</p>
<span class="title">Are you a member?</span>
<label><input type="radio" name="member" value="yes">Yes</label>
<label><input type="radio" name="member" value="no">No</label>
</fieldset>
<div class="submit"><input type="submit" value="Register"></div>
</form>
</body>
</html>body{
font-family: Arial, Verdana, sans-serif;
font-size: 90%;
color: #666666;
background-color: #f8f8f8;
}
li{
list-style-type: circle;
line-height: 1.6em;
}
table{
border-spacing: 0px;
}
th,td{
padding: 5px 30px 5px 10px;
border-spacing: 0px;
font-size: 90%;
margin: 0px;
}
th,td{
text-align: left;
background-color: #e0e9f0;
border-top: 1px solid #f1f8fe;
border-bottom: 1px solid #cbd2d8;
border-right: 1px solid #cbd2d8;
}
tr.head th{
color: #ffffff;
border-bottom: 2px solid #547ca0;
border-right: 1px solid #749abe;
border-top: 1px solid #90b4d6;
text-align: center;
text-shadow: -1px -1px 1px #666666;
letter-spacing: 0.15em;
}
td{
text-shadow: 1px 1px 1px #ffffff;
}
tr.even td,tr.even th{
background-color: #e8eff5;
}
tr.head th:first-child{
border-top-left-radius: 5px;
}
tr.head th:last-child{
border-top-right-radius: 5px;
}
fieldset{
width: 310px;
margin-top: 20px;
border: 1px sloid #d6d6d6;
background-color: #ffffff;
line-height: 1.6em;
}
legend{
font-style: italic;
color: #666666;
}
input[type="text"]{
width: 120px;
border: 1px solid #d6d6d6;
padding: 2px;
outline: none;
}
input[type="text"]:focus,input[type="text"]:hover{
background-color: #d0e2f0;
border:1px solid #999999;
}
input[type="submit"]{
border: 1px solid #006633;
background-color: #009966;
color: #ffffff;
border-radius: 5px;
padding: 5px;
margin: 5px;
margin-top: 10px;
}
input[type="submit"]:hover{
border: 1px solid #006633;
background-color: #00cc33;
color: #ffffff;
cursor: pointer;
}
.title{
float: left;
width: 160px;
clear: left;
}
.submit{
width: 310px;
text-align: right;
}
