（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="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="#" title="首页" target="_self">首页</a></li> 17 <li><a href="#" title="首页" target="_self">男男女女</a></li> 18 <li><a href="#" title="首页" target="_self">急急急</a></li> 19 <li><a href="#" title="首页" target="_blank">呸呸呸</a></li> 20 </ul> 21 </nav> 22 </header> 23 </body> 24 </html>
时间： 2024-11-05 02:03:45