欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

实例:网站首页导航栏

程序员文章站 2022-05-28 22:41:12
网站首页导航 ......

网站首页导航

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>网站导航</title>
 5     <meta charset = "utf-8"/>
 6     <style>
 7         .nav{
 8             text-align: center;
 9         }
10         .nav a{
11             /* 去掉下划线 */
12             text-decoration: none;
13             /* 转化为块,目的设置宽,高 */
14             display: inline-block;
15             /* 设置背景图片 */
16             background-image: url(bg.png);
17             width: 120px;
18             height: 50px;
19             /* 设置字体大小 */
20             font-size: 16px;
21             /* 设置行高,行高等于盒子高度,可以让单行文本垂直居中 */
22             line-height: 50px;
23             /* 设置文本字体颜色 */
24             color: white;
25         }
26         /* 用伪类:鼠标经过时背景变为蓝色 */
27         .nav a:hover{
28             background-image: url(bgc.png);
29         }
30     </style>
31 </head>
32 <body>
33     <div class = "nav">
34         <a href = "www.yyzuhao.com">网站导航</a>
35         <a href = "www.yyzuhao.com">网站导航</a>
36         <a href = "www.yyzuhao.com">网站导航</a>
37         <a href = "www.yyzuhao.com">网站导航</a>
38         <a href = "www.yyzuhao.com">网站导航</a>
39         <a href = "https://www.douyu.com/606118">斗鱼大司马</a>
40     </div>
41 </body>
42 </html>

 


实例:网站首页导航栏