011 导航栏

时间 2019-12-07

标签导航繁體版

原文原文链接

1.效果html

2.程序网站

　　行内元素与行内块元素，均可以当成文本进行处理，因此才有居中对齐。url

 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标签spa

　　能够放块级元素code

　　不能在里面放a标签htm

4.文字块级标签blog

　　h1，pit

　　里面不能再放其余块元素io