運用html常用標簽和css定位等學做模仿百度導航頁面
阿新 • • 發佈：2017-06-14
地圖 百度導航 技術分享 eight baidu 一個 nbsp ext align
導航部分文字鏈接，鼠標觸碰變顏色，除百度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 }
運用html常用標簽和css定位等學做模仿百度導航頁面