abstrakt：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>淘寶頂部導航條</title
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘寶頂部導航條</title>
<link rel="stylesheet" type="text/css" href="../css/index.css">
<link rel="stylesheet" type="text/css" href="../css/font-awesome-4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<header>
<div class="header-content">
<div class="header-left">
<a href="#" class="header-a">中國大陸 <i class="fa fa-angle-down"></i></a>
<a href="#" style="color: orange">親，親登錄</a>
<a href="#">免費注冊</a>
<a href="#">手機逛淘寶</a>
</div>
<div class="header-right">
<a href="#" class="header-a">我的淘寶 <i class="fa fa-angle-down"></i>
<ul>
<li>中低價房</li>
<li>大家樂福講道理</li>
</ul>
</a>
<a href="#"><span class="fa fa-shopping-cart"></span> 購物車 <i class="fa fa-angle-down"></i></a>
<a href="#" class="header-a"><span class="fa fa-star"></span> 收藏夾 <i class="fa fa-angle-down"></i></a>
<a href="#">商品分類</a> |
<a href="#" class="header-a">賣家中心 <i class="fa fa-angle-down"></i></a>
<a href="#" class="header-a">聯(lián)系客服 <i class="fa fa-angle-down"></i></a>
<a href="#" class="header-a"><i></i>網站導航 <i class="fa fa-angle-down"></i></a>
</div>
<div class="clear"></div>
</div>
</header>
</body>
</html>
<script>
$(document).ready(function(){
$(".header-a").hover(function () {
$(this).children("ul").slideDown(1000);
},function () {
$(this).children("ul").slideUp(1000);
})
})
</script>效果圖：
Korrigierender Lehrer：滅絕師太Korrekturzeit：2019-03-11 09:11:16
Zusammenfassung des Lehrers：可以在老師的基礎上擴展自己的知識點,繼續(xù)保持!