Le logo de la barre de navigation HTML5 se déplace vers la droite. Les débutants posent des questions !
![[EMD]KBC0KY`[V1%KSD4Z{O.jpg](https://img.php.cn/upload/image/275/195/723/1628058022756739.jpg "1628058022756739.jpg")
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<style>
*{ margin:0; remplissage : 0 ; list-style:aucun;}
img{ border:0;}
.header{ width:100%; background:#11192c;}
.logo a img{float: left;}
.nav{ width:1000px; marge : 0 automatique ; overflow:hidden;}
.nav ul{float: right;}
.nav ul li{ hauteur:40px; hauteur de ligne : 40 px ; flotteur : gauche ; remplissage : 10 px 10 px ; margin:0px 5px;position:relative;}
.nav ul li a{ color:#8f8f8f; famille de polices : « Microsoft Yahei » ; taille de police : 17 px ; text-decoration:none;}
.nav ul li a:hover{ color:#ffffff; text-decoration:none;}
.nav ul li span{ display:block; position : absolue ; largeur:0px; hauteur:0px; arrière-plan :#ffffff ; haut : 58 px ; gauche:50%;}
</style>
</head>
<body>
<!-- 代码begin -->
<div class="header"> ;
<div class="logo">
<a href="index.html">
<img src="images/logo.png" alt=""></ un>
</div>
<div class="nav">
<ul>
<li><a href='#'>首页</a><span> ;</span></li>
<li><a href='#'>首页</a><span></span></li>
< ;li><a href='#'>首页</a><span></span></li>
<li><a href='#'>首页</a><span></span></li>
<li><a href='#'>首页</a><span></span> </li>
<li><a href='#'>首页</a><span></span></li>
</ul>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('.nav li').hover (function(){
$('span',this).stop().css('height','2px');
$('span',this).animate({
left:' 0',
width:'100%',
right:'0'
},200);
},function(){
$('span',this).stop().animate ({
gauche : '50%',
largeur : '0'
},200);
});
});
</script>
<!-- 代码fin --->
</body>
</html>
