第十六章用CSS设置链接与导航菜单

1.丰富的超链接特效

1.1 去掉下划线（text-decoration）

在CSS中设置text-decoration为none，即可去掉下划线

1.2 四种动态效果的CSS伪类别属性（a:link、a:visited、a:hover、a:active）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a:link{

color:red;

}

a:visited{

color:black;

}

a:hover{

color:yellow;

text-decoration:underline;

}

a:link的效果：

a:hover的效果：

a:visited的效果：

注意点：

1）这几个伪类不止对超链接有效，其他任意标记都会有效果。

2）设定一个a元素的四种伪类时要注意顺序，需要按照a:link、a:visited、a:hover、a:active这样的顺序，即”LoVe
HAte”。如果顺序弄错，颜色就可能出现错误。

2.创建按钮式超链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
a{

font-family:Arial;

font-size:15px;

padding:10px;

margin:10px;

}

a:link{

text-decoration:none;

background-color:#2E82FF;

color:white;

border-right:2px #333 solid;

border-bottom:2px #333 solid;

}

a:visited{

background-color:purple;

color:black;

font-weight:bold;

}

a:hover{

background-color:#F30;

color:black;

}

a:active{

border:1px #F30 solid;

border-left:1px #666 solid;

border-top:1px #666 solid;

}

设置按钮，一般为蓝底白字凸出。

当鼠标悬停，背景变为橙色。

当鼠标按下时，按钮向内凹陷。

对于那些已经点过的链接，呈现紫底黑字的凸出效果。

3.制作荧光灯效果的菜单

官方是直接将a转换成块级元素来用的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>荧光灯</title>

<style type="text/css">

body{

margin:10px;

padding:10px;

font-family:Arial;

font-size:20px;

font-weight:bold;

width:300px;

}

.myDiv{

margin:0px;

padding:10px;

background-color:#434343;

}

.myDiv a{

display:block;

list-style-type:none;

margin:10px 0px 10px 30px;

padding:10px;

border-right:1px #000 solid;

border-bottom:1px #000 solid;

border-top:2px #060 solid;

width:200px;

text-decoration:none;

color:#999;

}

.myDiv a:hover{

border-top:5px #33FF33 solid;

color:#FFF;

}

</style>

</head>

<body>

<div class="myDiv">

<a href="#">Home</a>

<a href="#">Back</a>

<a href="#">Open</a>

<a href="#">New</a>

<a href="#">Quit</a>

</div>

</body>

</html>

最终效果如下：

4.控制鼠标指针

CSS中可以用cursor属性来设置鼠标指针的样式

具体的值有：

5.设置项目列表样式

    和
      是可以通用的，没什么太大区别

      5.1 符号列表

      当在ul或li对象中设置list-style-list为decimal

      其他属性值可以参照下表：

      5.2 图片列表

      可以使用list-style-image:url(“”);
      ，但由于无法定义其宽高，所以要注意图标的大小。

      6.创建简单的导航菜单

      6.1 简单的竖直排列菜单

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      <!doctype html>

      <html>

      <head>

      <meta charset="utf-8">

      <title>列表</title>

      <style type="text/css">

      body{

      font-size:15px;

      font-family:Arial;

      font-weight:bold;

      margin:10px;

      padding:10px;

      width:300px;

      }

      .navigation{

      background:#D6D6D6;

      }

      .navigation ul{

      list-style-type:none;

      padding:10px;

      }

      .navigation a{

      margin:0px 10px;

      padding:10px;

      text-align:right;

      background:#434343;

      border-bottom:1px #D6D6D6 solid;

      display:block;

      text-decoration:none;

      color:#999;

      }

      .navigation a:hover{

      border-left:8px #0F6 solid;

      }

      </style>

      </head>

      <body>

      <div class="navigation">

      <ul>

      <li><a href="#">apple</a></li>

      <li><a href="#">peach</a></li>

      <li><a href="#">watermelon</a></li>

      <li><a href="#">banana</a></li>

      <li><a href="#">tomato</a></li>

      </ul>

      </div>

      </body>

      </html>

      把a对象设置成block块级元素，这样左边框就可以设置在最左边

      **6.2 横竖自由转换菜单
      **

      根据前面代码，在.navigation li
      中添加float：left，即可让导航栏向左浮动，变成一整行

      去掉背景颜色并把width：300px改到.navigation li
      a中，这样就能让导航栏有一定的宽度。

      最后是设置底边框和右边框的颜色，让导航栏的菜单更有层次感。

      7.设置图片翻转效果

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      <!doctype html>

      <html>

      <head>

      <meta charset="utf-8">

      <title>图片翻转</title>

      <style type="text/css">

      body{

      font-size:15px;

      font-weight:bold;

      font-family:Arial;

      text-align:center;

      line-height:38px;

      }

      a:link{

      width:116px;

      height:42px;

      display:block;

      background:url('Button/NormalButton_Gray_001.gif') no-repeat;

      text-decoration:none;

      color:#FFF;

      }

      a:visited{

      background: url('Button/ActiveButton_Green_002.gif') no-repeat;

      color:#FFF;

      }

      a:hover{

      background: url('Button/HoverButton_Red_001.gif') no-repeat;

      color:#000;

      }

      a:active{

      background: url('Button/ActiveButton_Red_001.gif') no-repeat;

      }

      </style>

      </head>

      <body>

      <a href="#">Button</a>

      </body>

      </html>

      最终效果：

      link：

      hover：

      active：

      注意点：

      1）图像的格式最好是gif或者jpg，不然很可能发生加载不了的情况

      2）宽高是按照图片的像素大小来设置的

      3）line-height可以用来设置按钮中文字的高度

      4）在background属性中加入背景图片的链接和平铺的效果

      5）如果文件在服务器中，这样写会导致效果延迟，因为悬停时的效果图片需要下载到本地才能看到效果，所以这种方法还是有缺陷的。

      8.应用滑动门技术的玻璃效果菜单

      什么是滑动门技术？

      为了让按钮的宽度各不相同，同时避免背景图片显示不全的问题，我们便需要用到滑动门技术。滑动门技术就是添加两张同样的图片作为背景，然后调整它们的位置让它们左右重叠，便能灵活地制造处各种符合内容宽度的按钮。

      首先添加5个超链接标记，并分别在里面加入标记，这是为了添加第二张图片，实现滑动门的效果。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      <a href="#"><strong>HTML</strong></a>

      <a href="#"><strong>CSS</strong></a>

      <a href="#"><strong>Dreamweaver</strong></a>

      <a href="#"><strong>Photoshop</strong></a>

      <a href="#"><strong>jQuery</strong></a>

      在CSS添加float：left让它们向左浮动

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      .door a{

      display:block;

      text-decoration:none;

      float:left;

      color:#000;

      margin:5px;

      padding:0px 0px 0px 8px;

      }

      .door a strong{

      display:block;

      padding:14px 8px 15px 5px;

      }

      .door a:hover{

      background:url('Button/ActiveButton_Green_002.gif') no-repeat;

      color:#fff;

      }

      .door a:hover strong{

      background:url('Button/ActiveButton_Green_002.gif') no-repeat right
      top;

      color:#fff;

      }

      然后在a:hover和a:hover strong中各添加一张图片。

      利用a和strong对象中的padding属性即可控制让它们产生滑动门的效果。

      但是这一技术不容易控制好，不太推荐使用

      9.鼠标指针经过时给图片增加边框

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      <!doctype html>

      <html>

      <head>

      <meta charset="utf-8">

      <title>给图片加边框</title>

      <style type="text/css">

      img{

      margin:10px;

      padding:10px;

      width:100px;

      height:100px;

      border:1px green solid;

      }

      img:hover{

      border:1px red solid;

      }

      </style>

      </head>

      <body>

      <a href="#"><img src="Me.png"/></a>

      <a href="#"><img src="Me.png"/></a>

      <a href="#"><img src="Me.png"/></a>

      </body>

      </html>