css案例学习之div+a实现菜单

效果

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>基本菜单</title>
    <style>
        /*对menu层设置*/
        #menu {
          font-family:Arial;
          font-size:14px;
          width:120px;  /*固定宽度才可以和margin结合使用*/
          padding:8px; 
          background:#ccc;
          /*margin:0 auto;*/
          border:1px solid #ccc;
          }
        
        /*设置菜单选项*/
        #menu a, #menu a:visited {
          display:block;  /*必须是block，否则宽度高度都无效*/
          background-color:#fff; 
          padding:4px 8px;
          color:#000; 
          text-decoration:none; /*不显示下划线*/
          margin:8px 0 0 0; 
          border-left:8px solid #9ab; 
          border-right:8px solid #9ab;  /*左右边线*/
          height:1em;
        }
        #menu a:hover {
          color:#f00; 
          border-left:8px solid #000; 
          border-right:8px solid #000; 
          }
         
          #menu a#first {
          margin:0;
          color:#AE81FF;
        }  

    </style>
</head>

<body>
    <div id="menu">
       <a href="#" id="first"> Home </a> 
       <a href="#"> Contact Us</a>
       <a href="#"> Web Dev</a> 
       <a href="#"> Web Design</a> 
       <a href="#"> Map </a> 
    </div>
</body>
</html>

 

posted @ 2015-11-30 15:50  TBHacker  阅读(382)  评论(0)  编辑  收藏  举报