CSS 列表
CSS列表属性作用如下：
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
在HTML中，有两种类型的列表：
- 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
- 有序列表 - 列表项的标记有数字或字母
1. CSS列表属性
属性 |
描述 |
list-style |
简写属性。用于把所有用于列表的属性设置于一个声明中 |
list-style-image |
将图象设置为列表项标志。 |
list-style-position |
设置列表中列表项标志的位置。 |
list-style-type |
设置列表项标志的类型。 |
2. 列表 -简写属性
在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。
- 为列表使用简写属性，列表样式属性设置如下：
ul{list-style:squareinside url("sqpurple.gif"); }
可以按顺序设置如下属性：
- list-style-type
- list-style-position （inside| outside）
- list-style-image 【url('sqpurple.gif')】
如果上述值丢失一个，其余仍在指定的顺序，就没关系。
3. list-style-type 属性设置列表项标记的类型
值 |
描述 |
none |
无标记。 |
disc |
默认。标记是实心圆。 |
circle |
标记是空心圆。 |
square |
标记是实心方块。 |
decimal |
标记是数字。 |
decimal-leading-zero |
0开头的数字标记。(01, 02, 03, 等。) |
lower-roman |
小写罗马数字(i, ii, iii, iv, v, 等。) |
upper-roman |
大写罗马数字(I, II, III, IV, V, 等。) |
lower-alpha |
小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) |
upper-alpha |
大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) |
lower-greek |
小写希腊字母(alpha, beta, gamma, 等。) |
lower-latin |
小写拉丁字母(a, b, c, d, e, 等。) |
upper-latin |
大写拉丁字母(A, B, C, D, E, 等。) |
hebrew |
传统的希伯来编号方式 |
armenian |
传统的亚美尼亚编号方式 |
georgian |
传统的乔治亚编号方式(an, ban, gan, 等。) |
cjk-ideographic |
简单的表意数字 |
hiragana |
标记是：a, i, u, e, o, ka, ki, 等。（日文片假名） |
katakana |
标记是：A, I, U, E, O, KA, KI, 等。（日文片假名） |
hiragana-iroha |
标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名） |
katakana-iroha |
标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名） |
4. 列表导航菜单
实例：demo01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
list-style-type: none;
}
a{
text-decoration: none;
}
ul li{
line-height: 50px;
width: 200px;
letter-spacing: 5px;
text-indent: 8px;
font-size: 18px;
color: blue;
font-weight: bold;
background-color: bisque;
}
ul li:hover{
background-color: darkcyan;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="">系统管理</a></li>
<li><a href="">会员管理</a></li>
<li><a href="">商品管理</a></li>
<li><a href="">订单管理</a></li>
</ul>
</body>
</html>
CSS 显示
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
1. 隐藏元素
display:none或visibility:hidden都可以隐藏元素。
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
2. Display
display主要用的CSS样式有以下三个：
- display:block -- 显示为块级元素
- display:inline -- 显示为内联元素
- display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
块级元素(block)特性：
- 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
- 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
- 和相邻的内联元素在同一行;
- 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
实例：demo02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
list-style-type: none;
width: 100%;
text-align: center;
}
a{
text-decoration: none;
}
ul li{
display: inline-block;
height: 50px;
line-height: 50px;
width: 200px;
letter-spacing: 5px;
text-indent: 8px;
font-size: 18px;
color: blue;
font-weight: bold;
background-color: bisque;
}
ul li:hover{
background-color: darkcyan;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="">系统管理</a></li>
<li><a href="">会员管理</a></li>
<li><a href="">商品管理</a></li>
<li><a href="">订单管理</a></li>
</ul>
</body>
</html>
3. 下拉菜单
前面我们知道超链接a标签具有hover和active状态属性，其实这两个属性并不是超链接a标签专属，任何一个标签都具有这两个属性，因此，可以利用这两个属性来制作下拉菜单。
实例：demo03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
list-style-type: none;
padding: 0;/*清除内边距*/
}
li{
width: 15px;
}
a{
text-decoration: none;
}
#menu1 li a{
display: block;
line-height: 50px;
width: 200px;
letter-spacing: 5px;
text-indent: 8px;
font-size: 18px;
color: blue;
font-weight: bold;
background-color: bisque;
}
#menu1 li a:hover{
background-color: darkcyan;
color: white;
}
#menu1 li:hover #menu2{
display: block;
}
#menu2 {
display: none;
}
#menu2 li a{
display: block;
height: 50px;
line-height: 50px;
width: 200px;
letter-spacing: 5px;
text-indent: 8px;
font-size: 18px;
color: blueviolet;
font-weight: bold;
background-color: darkgrey;
}
#menu2 li a:hover{
background-color: crimson;
color: white;
}
</style>
</head>
<body>
<ul id="menu1">
<li>
<a href="">系统管理</a>
<ul id="menu2">
<li><a href="">系统参数 </a></li>
<li><a href="">系统设置</a></li>
<li><a href="">系统版本</a></li>
<li><a href="">系统更新</a></li>
</ul>
</li>
<li><a href="">会员管理</a></li>
<li><a href="">商品管理</a></li>
<li><a href="">订单管理</a></li>
</ul>
</body>
</html>
CSS 表格
1. 表格边框
指定CSS表格边框，使用border属性。
下面的例子指定了一个表格的Th和TD元素的黑色边框：
table, th,td
{
border: 1px solid black;
}
请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。
为了显示一个表的单个边框，使用 border-collapse属性。
2. 折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
实例：demo04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#table1,
th,
td {
border: 1px solid black;
}
#table2,
#table2 th,
#table2 td {
border-collapse:collapse;
border: 1px solid black;
width:50%;
height:30px;
text-align:right;
vertical-align:bottom;
padding:15px;
background-color:green;
color:white;
}
</style>
</head>
<body>
<table id="table1">
<caption>表格一</caption>
<tr>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
<table id="table2">
<caption>表格二</caption>
<tr>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
</html>
3. 表格宽度和高度
Width和height属性定义表格的宽度和高度。
下面的例子是设置100％的宽度，50像素的th元素的高度的表格：
table
{
width:100%;
}
th
{
height:50px;
}
4. 表格文字对齐
表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式，像左，右，或中心：
td
{
text-align:right;
}
垂直对齐属性设置垂直对齐，比如顶部，底部或中间：
td
{
height:50px;
vertical-align:bottom;
}
5. 表格填充
如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性：
td
{
padding:15px;
}
6. 表格颜色
下面的例子指定边框的颜色，和th元素的文本和背景颜色：
table, td,th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
7. CSS3表格隔行色
<style type="text/css">
td:nth-of-type(odd){ background:#00ccff;}奇数行
td:nth-of-type(even){ background:#ffcc00;}偶数行
td:nth-child (odd){ background:#00ccff;}奇数行
td:nth-child (even){ background:#ffcc00;}偶数行
</style>
实例：demo05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
width: 80%;
text-align: center;
border-collapse: collapse;
}
th,td{
height: 35px;
color: white;
}
tr:nth-child(odd){
background-color: #5F9EA0;
}
tr:nth-child(even){
background-color: darkolivegreen;
}
td:nth-child(3n+3){
background-color: #A52A2A;
}
</style>
</head>
<body>
<table border="0" align="center">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>身高</th>
<th>体重</th>
<th>签名</th>
</tr>
<tr>
<td>1</td>
<td>刘亦菲</td>
<td>女</td>
<td>32</td>
<td>168CM</td>
<td>50kg</td>
<td>那时觉得看哈数据库的</td>
</tr>
<tr>
<td>2</td>
<td>刘亦菲</td>
<td>女</td>
<td>32</td>
<td>168CM</td>
<td>50kg</td>
<td>那时觉得看哈数据库的</td>
</tr>
<tr>
<td>3</td>
<td>刘亦菲</td>
<td>女</td>
<td>32</td>
<td>168CM</td>
<td>50kg</td>
<td>那时觉得看哈数据库的</td>
</tr>
<tr>
<td>4</td>
<td>刘亦菲</td>
<td>女</td>
<td>32</td>
<td>168CM</td>
<td>50kg</td>
<td>那时觉得看哈数据库的</td>
</tr>
<tr>
<td>5</td>
<td>刘亦菲</td>
<td>女</td>
<td>32</td>
<td>168CM</td>
<td>50kg</td>
<td>那时觉得看哈数据库的</td>
</tr>
</table>
</body>
</html>
[作业实验]
1. 制作如下面板的效果。
2. 实现如下导航栏
3. 通过列表制作简单垂直三级导航栏
4. 制作如下表格样式
