导航栏
当我们打开网页的时候都会看到有导航栏,如下是我完成的一个导航栏的制作,效果如图所示:
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 /**通配符选择器,权值是1*/ 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 /*蓝色的背景框,设置高为30个像素,添加背景颜色*/ 13 .nav{ 14 height: 40px; 15 width: 800px; 16 margin: 100px auto; 17 background-color: #00AFFF; 18 } 19 /*ul{ 20 float: right; 给ul加向右的浮动是可以将导航栏放在右边 21 }*/ 22 /*列表样式设为没有,默认是一个实心的小黑园,每一个li设置向左的浮动,块级li会脱离常规流,在同一行上依次排列*/ 23 li{ 24 list-style: none; 25 float:left; 26 } 27 28 a{ 29 line-height: 40px; /*单行文本居中,可将文本的高度设置为包裹其外层即nav的高度*/ 30 text-decoration: none; /*a标签默认有下划线,这里是为了取消下划线*/ 31 display: block; /*a标签是一个行内元素,将其转换为块级元素*/ 32 height: 40px; /*将其高度设置和nav一样高*/ 33 margin-left: 30px; 34 padding: 0 14px; 35 } 36 a:hover{ /* :hover伪类,当鼠标放在文字上时,背景颜色改变为白色*/ 37 background-color: #ffffff; 38 } 39 .sousuo{ 40 float: right; 41 margin: 4px 20px; 42 height: 30px; 43 width: 200px; 44 border: 1px groove ; /* groove让边框产生一个凹进去的效果*/ 45 background-color: white; 46 } 47 #text{ 48 width: 150px; 49 height: 30px; 50 border: none; 51 float: left; 52 } 53 #submit{ 54 height: 30px; 55 width: 50px; 56 border: none; 57 background-color:#00AFFF ; 58 float:left; 59 cursor: pointer; /*当鼠标放在上面会变成一个小手*/ 60 } 61 </style> 62 </head> 63 <body> 64 <div class="nav"> 65 <ul> 66 <li><a href="">首页</a></li> 67 <li><a href="">新闻</a></li> 68 <li><a href="">百科</a></li> 69 <li><a href="">问答</a></li> 70 </ul> 71 72 <div class="sousuo"> 73 <label for="text"></label><input id="text" type="text" placeholder="请输入内容"/> 74 <!--给文本本框设置默认值除了placeholder,还可以用value值,然后添加JavaScript的onfocus事件--> 75 <label for="submit"></label><input id="submit" type="submit" value="搜索"/> 76 </div> 77 </div> 78 </body> 79 </html>
导航栏除了文本导航栏,还有图片导航栏等.
