第05章-CSS3排版属性
CSS3排版属性
学习目标
- 掌握无序列表的应用
- 掌握有序列表
- 熟悉嵌套列表的使用方法
- 了解自定义列表的标记
- 掌握表格样式的使用
- 掌握CSS边框、边线、边距等属性
重点
- 掌握边框的扩展运用
重点
难点
- 掌握内边距和边框的合并方法
重点
难点
- 掌握CSS盒子模型原理
- 掌握外边距合并的方法
重点
难点
CSS 列表
CSS有序列表和无序列表属性
属性 | 描述 |
---|---|
list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
list-style-image | 将图象设置为列表项标志。(url(‘sqpurple.gif’)) |
list-style-position | 设置列表中列表项标志的位置。(inside| outside) |
list-style-type | 设置列表项标志的类型。如下表 |
列表属性可以简写,按照如下顺序
list-style-type
list-style-position
list-style-image
如果上述值丢失一个,其余仍在指定的顺序,就没关系。如:
ul {
list-style: square inside url("sqpurple.gif");
}
案例01
<!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>
效果展示
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, 等。(日文片假名) |
CSS 隐藏
显示控制常用的属性有display
、visibility
、opacity
隐藏元素
属性 | 显示 | 隐藏 | 特征 |
---|---|---|---|
display | 除了none之外的其他值 | none | 隐藏的元素不会占用任何空间,消失 |
visibility | visible | hidden | 隐藏的元素仍需占用与未隐藏之前一样的空间,仅不可见 |
opacity | 1 | 0 | 隐藏的元素只是变透明,仅不可见 |
下拉菜单
前面我们知道超链接a标签具有hover和active状态属性,其实这两个属性并不是超链接a标签专属,任何一个标签都具有这两个属性,因此,可以利用这两个属性来制作下拉菜单。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
list-style-type: none;
padding: 0;/*清除内边距*/
}
li{
width: 200px;
}
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<