运用html常用标签和css定位等学做模仿百度导航页面

导航部分文字链接，鼠标触碰变颜色，除百度logo引用图片外，其它均代码编写。注释部分是一开始用的百度一下截图做的按钮，后来用div填充颜色写了一个按钮。效果图如下。

HTML代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>百度一下，你就知道</title>
 6 <link href="css/homework.css" rel="stylesheet" type="text/css">
 7 </head>
 8 <body>
 9     <div id="nav">
10         <ul>
11             <li><div id="more"><a href="#"><font color="white">更多产品</font></a></div></li>
12             <li class="b"><a href="#">设置</a></li>
13             <li class="b"><a href="#">登录</a></li>
14             <li class="hei"><a href="#">学术</a></li>
15             <li class="hei"><a href="#">贴吧</a></li>
16             <li class="hei"><a href="#">视频</a></li>
17             <li class="hei"><a href="#">地图</a></li>
18             <li class="hei"><a href="#">hao123</a></li>
19             <li class="hei"><a href="#">新闻</a></li>
20         </ul>
21     <div id="logo"></div>
22     <div id="search">
23         <div id="l">
24             <div id="kuang">
25                 <input id="camera" type="text"
26                     style="width: 600px; height: 32px; border: #5f9dfa 1px solid;">
27             </div>
28         </div>
29         <div id="r">
30             <!-- <input id="an" type="image" src="images/baiduan.png"> -->
31             <font color="white">百度一下</font>
32         </div>
33     </div>
34 </body>
35 </html>

CSS代码如下：

 1 #nav .hei a:hover{
 2     color:blue;
 3 }
 4 #nav .b a:hover{
 5     color:blue;
 6 }
 7 li #more{
 8     width:60px;
 9     height:25px;
10     background-color:#3385ff;
11     font-size:13px;
12     line-height:25px;
13     text-align: center;
14 }
15 li #more a{
16     text-decoration: none;
17     font-color:write;
18 }
19 .hei{
20     font-color:black;
21 }
22 .b{
23     font-color:black;
24 }
25 #nav{
26     width:100%;
27     height:30px;
28     //font-color:black;
29 }
30 a:link{
31     color:black;
32 }
33 li{
34     list-style:none;
35     width:60px;
36     float:right;
37     font-size:13px;
38     font-color:black;
39     line-height:30px;
40 }
41 .hei{
42     font-weight:bolder;
43 }
44
45 #logo{
46     width:100%;
47     height:200px;
48     background:url("../images/baidulogo.png") no-repeat 50%,50%;
49 }
50 #search{
51     width:100%;
52     height:300px;
53     float:left;
54 }
55 #l{
56     width:66%;
57     height:300px;
58     float:left;
59 }
60 #kuang{
61     float:right;
62     width:600px;
63     height:32px;
64     float:right;
65 }
66 #camera{
67     background:url("../images/camera.png")  no-repeat 100%,100%;
68 }
69 #r{
70     width:34%;
71     height:300px;
72     float:left;
73 }
74 /* #an{
75     float:left;
76 } */
77 #r{
78     width:101px;
79     height:36px;
80     background-color:#3385ff;
81     font-size:14px;
82     line-height:37px;
83     text-align: center;
84 }