首页 > 代码库 > html5制作导航条

html5制作导航条

2024-08-18 04:24:59   221人阅读

（1）background-repeat:no-repeat;图片不平铺

（2）使用<ul>和<li>便签，代码简介有序、易于编排。

（3）在引入外部css文件时，<link>标签中的rel是关联的意思，rel="stylesheet";

（4）display:inline;实现使多个<div>像<span>标签显示在一行。

（5）list-style:none;列表样式：无。  用于在一个声明中设置列表的所有属性的简写属性。涵盖了所有其他列表样式属性，仅作用于具有display值为list-item的对象（如li对象）。

（6）text-decoration:none;无值；underline定义文本下的一条线；overline定义文本上的一条线；line-through定义穿过文本下的一条线；blink定义闪烁的文本。

（7）outline:none;为不设置边框；语法：Object.style.outline = outlineWidth outlineStyle outlineColor 设置边框宽、样式、颜色。

（8）target="_self" <a>标签内设置，本页面打开；target="_blank"新打开一个页面

（9）定义伪类链接，鼠标经过更改颜色或其他a:hover{color:#abcdef;}

test.css

 1 body{
 2     margin:0px;
 3     background-image:url(images/body.jpg);
 4     background-repeat:no-repeat;
 5     width:1003px;
 6 }
 7 
 8 nav{
 9     float:left;
10     width:920px;
11     height:40px;
12     background-image:url(images/students.jpg);
13     margin:100px 0 0 0;
14     padding:0;
15 }
16 
17 nav ul{
18     float:left;
19     margin:0px;
20     padding:0 0 0 0;
21     width:920px;
22     list-style:none;
23 }
24 nav ul li{
25     display:inline;
26 }
27 nav ul li a{
28     float:left;
29     padding:12px 40px;
30     text-align:center;
31     font-size:14px;
32     background:url(images/user.png) center right no-repeat;
33     color:#fff;
34     font-family:Tahoma;
35     outline:none;
36 }
37 
38 nav li a:hover{
39     color:#2a5f00;
40 }

html内容

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>MyHtml.html</title>
 5     <link href="http://www.mamicode.com/CSS/test.css" rel="stylesheet" type="text/css" />
 6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 7     <meta http-equiv="description" content="this is my page">
 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 9     
10   </head>
11   
12   <body>
13     <header>
14         <nav>
15             <ul>
16                 <li><a href="http://www.mamicode.com/#" title="首页" target="_self">首页</a></li>
17                 <li><a href="http://www.mamicode.com/#" title="首页" target="_self">男男女女</a></li>
18                 <li><a href="http://www.mamicode.com/#" title="首页" target="_self">急急急</a></li>
19                 <li><a href="http://www.mamicode.com/#" title="首页" target="_blank">呸呸呸</a></li>
20             </ul>
21         </nav>
22     </header>
23   </body>
24 </html>

 

html5制作导航条


联系
我们