欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  一、竖向导航
 
  
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="utf-8">
 
  <style>
 
  ul{
 
  list-style-type:none;
 
  margin:0;
 
  padding:0;
 
  }
 
  a{
 
  display:block;
 
  background-color:green;
 
  color:white;
 
  width:80px;
 
  text-align:center;
 
  padding:4px;
 
  text-decoration:none;
 
  }
 
  a:hover,a:active{
 
  background-color:#98bf21;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <ul>
 
  <li><aherf="">首页</a></li>
 
  <li><aherf="">学习中心</a></li>
 
  <li><aherf="">考试中心</a></li>
 
  <li><aherf="">考试动态</a></li>
 
  </ul>
 
  </body>
 
  </html>
 
  运行结果:
 
  2345截图20180821104848.png
 
  二、横向导航:
 
  
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="utf-8">
 
  <style>
 
  ul{
 
  list-style-type:none;
 
  margin:0;
 
  padding:0;
 
  overflow:hidden;
 
  }
 
  li{
 
  float:left;
 
  }
 
  a{
 
  display:block;
 
  background-color:pink;
 
  color:white;
 
  width:80px;
 
  text-align:center;
 
  padding:4px0px;
 
  text-decoration:none;
 
  }
 
  a:hover,a:active{
 
  background-color:gray;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <ul>
 
  <li><aherf="">首页</a></li>
 
  <li><aherf="">学习中心</a></li>
 
  <li><aherf="">考试中心</a></li>
 
  <li><aherf="">考试动态</a></li>
 
  </ul>
 
  </body>
 
  </html>



2345截图20180821104931.png





本文转载自中文网
 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c56883.shtml