简单导航条制作

最新推荐文章于 2022-07-02 18:29:59 发布

diaoyong7504

最新推荐文章于 2022-07-02 18:29:59 发布

阅读量108

点赞数

原文链接：http://www.cnblogs.com/Onlywjy/p/6073360.html

版权

<!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;
}