标签：charset 效果 write ext logo put url height 按钮
导航部分文字链接，鼠标触碰变颜色，除百度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 }
标签：charset 效果 write ext logo put url height 按钮
原文地址：http://www.cnblogs.com/tendo/p/6897227.html
