011 导航栏

1.效果

2.程序

　　行内元素与行内块元素，都可以当成文本进行处理，所以才有居中对齐。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .nav {
 8             text-align: center;
 9         }
10         a {
11             width: 170px;
12             height: 70px;
13             color: #fff;
14             display: inline-block;
15             background-image: url(image/0303.png);
16             text-align: center;  /*文字居中对齐*/
17             text-decoration: none;
18             line-height: 70px;/*行高等你盒子的高度，则单行文本垂直居中*/
19         }
20         .nav a:hover {
21             background-image: url(image/0354.png);
22         }
23 
24     </style>
25 </head>
26 <body>
27     <div class="nav">
28         <a href="#">网站导航</a>
29         <a href="#">网站导航</a>
30         <a href="#">网站导航</a>
31         <a href="#">网站导航</a>
32         <a href="#">网站导航</a>
33         <a href="#">网站导航</a>
34     </div>
35 </body>
36 </html>

3.a标签

　　可以放块级元素

　　不能在里面放a标签

4.文字块级标签

　　h1，p

　　里面不能再放其他块元素