サマリー：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>下劃線</title>
<link rel="stylesheet" href="css/php.css" type="text/css">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/php.js" type="text/javascript"></script>
<style>
/* 下劃線跟隨導航 */
.menu_line{width: 80%;margin: 0 auto; height: 40px;background: #ccc;margin-top: 30px;position: relative;}
.menu_line ul{width: 100%;margin: 0 auto;}
.menu_line ul li{list-style: none;width: 150px;height: 40px;line-height: 40px;text-align: center;float: left;background: #ea5404;
border-right: 1px solid #fff;}
.bottom_line{width: 150px;height: 2px;position: absolute;background: #000;top: 40px;left: 10%;}
.menu_line ul li:last-child{border-right: 0px;}
.menu_line ul li a{text-decoration: none;color: #000;}
</style>
<script>
//下劃線跟隨導航
$(function(){
$('.bottom_line').stop().css({'left':'0px'});
$('.menu_line ul>li').hover(
function(){
$leng = parseInt($(this).attr('name'))*150;
$('.bottom_line').stop().animate({'left':$leng+'px'},'slow');
},
function(){
$('.bottom_line').stop().animate({'left':'0px'},'slow');
}
)
})
</script>
</head>
<body>
<div class="clear"></div>
<div class="menu_line">
<ul>
<li name="0"><a href="">首頁</a></li>
<div class="bottom_line"></div>
<li name="1"><a href="">新聞中心</a></li>
<li name="2"><a href="">品牌簡介</a></li>
<li name="3"><a href="">來院路線</a></li>
<li name="4"><a href="">創(chuàng)業(yè)中心</a></li>
<li name="5"><a href="">福利</a></li>
<li name="6"><a href="">項目</a></li>
</ul>
</div>
</body>
</html>
添削の先生：滅絕師太添削時間：2018-11-20 16:08:33
先生のまとめ：效果沒問題，布局太丑了，這色調，還有導航欄寬度錯了，滑動距離要調整下