用CSS笔写导航栏条沒有任何照片附实际效果图

2020-10-20 18:54 jianzhan
第1步,大家新建1个my.html文档,填写內容以下,这个html文档直至最终都无需动了,它便是这些內容: 
 
CSS Code拷贝內容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head>    
  4. <link rel="stylesheet" type="text/css" href="xin.css">    
  5. </head>    
  6. <body>    
  7. <div class = "nav">    
  8. <ul>    
  9. <li><a href="#">辛星PHP</a></li>    
  10. <li><a href="#">辛星Python</a></li>    
  11. <li><a href="#">辛星CSS</a></li>    
  12. <li><a href="#">辛星HTML</a></li>    
  13. <li><a href="#">辛星jQuery</a></li>    
  14. <li><a href="#">辛星Java</a></li>    
  15.   
  16. </ul></div>    
  17. </body>    
  18. </html>  
第2步,大家刚开始新建1个xin.css文档,随后刚开始开展调剂这些导航栏条的显示信息文件格式,大家要做的第1步便是先把目录的小圆点给去掉,大家先写以下编码:

CSS Code拷贝內容到剪贴板
  1. .nav ul{list-style-typenone;}  
大家发现小圆点没了,可是,如今这些目录元素全是竖向排序的,大家想让它们横向排序。

第3步,大家根据设定li的波动来让它们横向排序,大家在第2行加上编码,因而全部编码变成:

CSS Code拷贝內容到剪贴板
  1. .nav ul{list-style-typenone;}    
  2. .nav li{float:left;}  
第4步,大家发现如今它们是到了1起了,可是是连在1起的,这是为何呢,由于它们沒有设定宽度,大家要是给她们设定了1定的宽度,它们就会分开啦,可是大家另外还能够设定1下情况色,因而该编码就变成了以下编码: 
CSS Code拷贝內容到剪贴板
  1. .nav ul{list-style-typenone;}        
  2. .nav li{float:left;width100px;background:#CCC;}  
第5步大家就刚开始设定电脑鼠标的款式了,顺带大家把下划线给去掉,大家前面详细介绍过伪类的定义,假如读者不熟习,还可以到前面翻翻我的实例教程,大家另外加上情况色调甚么的,因而它的编码变成下面这个模样: 
CSS Code拷贝內容到剪贴板
  1. .nav ul{list-style-typenone;}    
  2. .nav li{float:left;width100px;background:#CCC;}    
  3. .nav a:link{color:#666;background#CCC;text-decorationnone;}    
  4. .nav a:visited{color#666;text-decorationnone;}    
  5. .nav a:hover{color#FFF;font-weightbold;text-decorationunderline;background#0F0;}  
第6步也是源自身们的难题,大家调剂1下尺寸,即大家设定1下.nav a的特性值,编码以下: 

CSS Code拷贝內容到剪贴板
  1. .nav ul{list-style-typenone;}    
  2. .nav li{float:left;width100px;}    
  3. .nav a:link{color:#666;background#CCC;text-decorationnone;}    
  4. .nav a:visited{color#666;text-decorationnone;}    
  5. .nav a:hover{color#FFF;font-weightbold;text-decorationunderline;background#0F0;}    
  6. .nav a{displayblock;text-aligncenter;height30px;font-weightbold;}  
第7步便是大家的这个导航栏条是黏在1起的,大家必须分开菜看上去更为舒适1点,因而大家这里设定1下li的特性,让它的边距设定为3px,随后在让字体样式的尺寸合适该导航栏条的尺寸,最终的编码以下: 

CSS Code拷贝內容到剪贴板
  1. .nav ul{list-style-typenone;}    
  2. .nav li{float:left;width100px;margin-left3px;line-height30px;}    
  3. .nav a:link{color:#666;background#CCC;text-decorationnone;}    
  4. .nav a:visited{color#666;text-decorationnone;}    
  5. .nav a:hover{color#FFF;font-weightbold;text-decorationunderline;background#0F0;}    
  6. .nav a{displayblock;text-aligncenter;height30px;font-weightbold;}  
到如今为止,大家的导航栏条就做完了,假如读者是1位大神,将会会指出它的不够,可是终究是用笔写的,没用任何的照片,让大家看来1下总体实际效果把: