回到顶部导航栏

最新推荐文章于 2024-08-10 16:15:00 发布

Curtis0980

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量331

点赞数 5

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Curtis0980/article/details/139657466

版权

1.回到顶部案例(固定定位)

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           #box{
               height: 5000px;
               border: 5px solid black;
           }
           #back{
               width: 50px;
               height: 50px;
               border: 5px solid red;
               text-align: center;line-height: 50px;
               position: fixed;
               right: 5px;
               top: 250px;
           }
       </style>
   </head>
   <body>
       <div id="box"></div>
       <div id="back">
           <a href="box">top</a>
       </div>
   </body>
</html>

2.导航栏案例(浮动、绝对定位)

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
       ul>li {
               float: left;
               padding-left: 30px;
               padding-right: 30px;
               list-style: none;
               font-size: 30px;
               color: rebeccapurple;
               position: relative;
           }

           #box>div {
               width: 1000px;
               height: 60px;
               margin: auto;
               line-height: 60px;
           }

           #box{
               background-color: orange;
           }
           ul>li:hover{
               background-color: pink;
           }

           ul>li:hover>.down{
               background-color: pink;
               display:block;
           }


           .down{
               display: none;
               width: 80px;
               text-align: center;
               position: absolute;
               left: 0px;
           }
       </style>
   </head>
   <body>
       <div id="box">
           <div>
               <ul>
                   <li>1
                   <div class="down">
                       <div>a</div>
                       <div>b</div>
                       <div>c</div>
                   </div>
                   </li>
                   <li>2</li>
                   <li>3</li>
                   <li>4</li>
                   <li>5</li>
               </ul>
           </div>
       </div>