簡單導航條制作 - Onlywjy－IT工程師數位筆記本

文章出處

<!doctype html>
<html lang="en">
   <head>
     <meta charset="UTF-8">
     <title>練習</title>
      <link rel="stylesheet" href="index.css"> 
   </head>
   <body>
      <div id="nav">
         <ul>
            <li>首頁</li>
            <li>歌曲</li>
            <li>視頻</li>  
            <li>電影</li>
            <li>關于我們</li> 
         </ul>
      </div>
      <div id="left">
        <span>×</span>
      </div>
      <div id="right">
          <span>×</span>
      </div>
   </body>
</html>

/*復位*/
*{
    margin:0;
    padding:0;
}
#nav ul{
    list-style:none;
    background-color:#000;
    color:#fff;
    padding-left:100px;    
}
#nav ul li{
      display:inline-block;
      cursor:pointer;
      padding:20px 0px;
      color:inherit;
      margin:0px 15px;
}

/*鼠標滑過字體抖動*/
#nav ul li:hover{
    position:relative;
    top:3px;
    color:#74b0e2;
}
#left,#right{
    border:1px solid gray;
    width:120px;
    height:200px;
    position:fixed;
    top:300px;
    box-shadow:0px 0px 8px 3px gray;
}
#left{
    left:10px;
}
#right{
    right:10px;
}
#left span,#right span{
    float:right;
    cursor:pointer;
}