导航栏和固定定位

张加帅不帅

已于 2024-06-14 09:46:58 修改

阅读量255

点赞数 3

文章标签： javascript 前端 html

于 2024-06-14 09:28:36 首次发布

本文链接：https://blog.csdn.net/m0_70775676/article/details/139669884

版权

固定定位：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <style>
       #container{
           height: 1000px;
           border: 5px solid red;
       }
       .back-button{
           width: 100px;
           height: 100px;
           border: 1px solid blue;
           text-align: center;
           line-height: 20px;
           position: fixed;
       }
   </style>
   <body>
       <div id="container">
           <div class="back-button">
               <a href="#container">回到顶部</a>
           </div>
       </div>
   </body>
</html>

导航栏：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <style>
       *{
           margin: 0;
           padding: 0;
       }
       ul>li{
           float:left;
           padding-left: 20px;
           padding-right: 20px;
           list-style: none;
           /* 取消列表默认样式 */
           font-size: 30px;
           color:red;
           position: relative;
       }
       #container>div{
           width: 1200px;
           height:70px;
           margin: auto;
           line-height: 70px;
       }
       #container{
           width: 100%;
           background-color: rgba(10, 10, 10, 1);

       }
       ul>li:hover{
           background-color: firebrick;
       }
       ul>li:hover>.menu{
           background-color: black;
           display: block;
       }
       .menu{
           display: none;
           position: absolute;
           width: 120px;
           text-align: center;
           left:0px;
       }
   </style>
   <body>
       <div id="container">
           <div>
       <ul>
           <li>游戏1</li>
           <li>游戏2
           <div class="menu">
           <div>游戏充值</div>
           <div>游戏代练</div>
           <div>游戏简介</div>
           <div>游戏外挂</div>
           </div>
           </li>
           <li>游戏3</li>
           <li>游戏4</li>
           <li>游戏5</li>
           <li>游戏6</li>
           <li>游戏7</li>
           <li>游戏8</li>
           <li>游戏9</li>
       </ul>
           </div>
       </div>

   </body>
</html>