abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> &
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<title></title>
<style type="text/css">
*{padding: 0; margin: 0;}
ul li{ list-style: none;}
nav{ width: 100%; background: #ffa200; height: 50px; color: #fff;}
div{width: 1000px; margin: 0px auto; height: 50px; position: relative;}
ul{ width: 100%; height: 47px; line-height: 47px;}
ul li{ width:200px; text-align: center; box-sizing: border-box; display: block; float: left;}
ul li:first-child{border:none}
span{ width: 200px; background: #ff2200; height: 3px; display: block; position: absolute; left:0px;}
</style>
</head>
<body>
<nav>
<div>
<ul>
<li name='0'>首頁</li>
<li name='1'>產(chǎn)品介紹</li>
<li name='2'>關(guān)于我們</li>
<li name='3'>聯(lián)系我們</li>
<li name='4'>招聘信息</li>
</ul>
<span></span>
</div>
</nav>
<script type="text/javascript">
$(document).ready(function(){
$('li').hover(
function(){
$spanW=parseInt($(this).attr('name'))*200;
//alert($spanW);
$('span').stop().animate({left:$spanW+'px'},500);
},
function(){
$('span').stop().animate({left:'0px'},500);
}
);
});
</script>
</body>
</html>
Correcting teacher：查無此人Correction time：2019-04-25 13:31:09
Teacher's summary：完成的不錯(cuò)。常用的css樣式，可以單獨(dú)寫一個(gè)文件，隨時(shí)能使用。繼續(xù)加油。