menu导航跟随样式,相对定与绝对定位lleft:260px才行?

Original 2019-05-18 22:03:56 279
abstract:<!DOCTYPE html><html>    <head>                 <meta charset="utf-8">        &nb

<!DOCTYPE html>

<html>

    <head>

                 <meta charset="utf-8">

                <link rel="icon" type="image/x-icon" href="">

                 <link rel="stylesheet" type="text/css" href=""> 

                 <script type="text/javascript" src="jquery-3.3.1.min.js"></script>

                 <style type="text/css">

                 *{margin:0;padding:0;}

                 .main{width:1000px;height:40px;margin:0px auto;margin-top:30px;background:rgb(29,98,169);color:#fff;border-radius:10px;}

                 .main ul{position:relative;line-height: 35px;text-align:center;font-size:0;}

                 .main ul li{line-height:35px;list-style:none;width:100px;display:inline-block;border-right:0px solid #fff;font-size: 16px;}

                 .split{width:0px!important;}

                   </style>

                 <title>menu导航跟随样式</title>

                 </head>

                 <body>

                                 <div class="main">

                                             <ul>

                                                     <li name='0'>首页</li>

                                                     <li class="split">|</li>

                                                     <li  name='1'>产品</li>

                                                     <li class="split">|</li>

                                                     <li  name='2'>公司新闻</li>

                                                     <li class="split">|</li>

                                                      <li  name='3'>行业新闻</li>

                                                      <li class="split">|</li>

                                                     <li  name='4'>联系我们</li>

<div class="bottom" style="width:80px;height:2px;background:#fff;position:absolute;left:260px;top:36px;"></div>

                                            </ul>

                                 </div>

                 <script>

                 $(function(){

                $('li').hover(

                function(){

                $m=parseInt($(this).attr('name'))*100;

                $('.bottom').stop().animate({left:$m+260+'px'},600);

                },

function(){

    $('.bottom').stop().animate({left:'260px'},600);

                   })

               })

                  </script>

                 </body>

</html>


Correcting teacher:查无此人Correction time:2019-05-20 09:16:22
Teacher's summary:完成的不错。有问题可以提交工单,这里回答后,你无法追问。继续加油。

Release Notes

Popular Entries