                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /網(wǎng)頁定位導(dǎo)航特效

窗口滾動(dòng)怎么不出效果，真是看不出來，那里面錯(cuò)了！對(duì)比那幾次也沒找到問題

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>地狗購物網(wǎng)——網(wǎng)頁定位導(dǎo)航效果</title>
<style>
??????? * {
??????????? margin: 0;
??????????? padding: 0;
??????? }

??????? body {
??????????? font-size: 12px;
??????????? line-height: 1.7;
??????? }

??????? li {
??????????? list-style: none;
??????? }

??????? #content {
??????????? width: 800px;
??????????? margin: 0 auto;
??????????? padding: 20px;
??????? }

??????? #content h1 {
??????????? color: #0088bb;
??????? }

??????? #content .item {
??????????? padding: 20px;
??????????? margin-bottom: 20px;
??????????? border: 1px dotted #0088bb;
??????? }

??????? #content .item h2 {
??????????? font-size: 16px;
??????????? font-weight: bold;
??????????? border-bottom: 2px solid #0088bb;
??????????? margin-bottom: 10px;
??????? }

??????? #content .item li {
??????????? display: inline;
??????????? margin-right: 10px;
??????? }

??????? #content .item li a img {
??????????? width: 230px;
??????????? height: 230px;
??????????? border: none;
??????? }

????? ?
/*請(qǐng)補(bǔ)充此處代碼，讓導(dǎo)航菜單在右側(cè)絕對(duì)定位顯示*/
??????? #menu{
??????????? position:fixed;
??????????? top:100px;
??????????? left:50%;
??????????? margin-left:400px;
??????? }

??????? #menu ul li a {
??????????? display: block;
??????????? margin: 5px 0;
??????????? font-size: 14px;
??????????? font-weight: bold;
??????????? color: #333;
??????????? width: 80px;
??????????? height: 50px;
??????????? line-height: 50px;
??????????? text-decoration: none;
??????????? text-align: center;
??????? }

??????? #menu ul li a:hover,
??????? #menu ul li a.current {
??????????? color: #fff;
??????????? background: #0088bb;
??????? }

??????? /*ie6 hack*/
??????? * html, * html body {
??????????? background-image: url(about:blank);
??????????? background-attachment: fixed;
??????? }

??????? * html #menu {
??????????? /*position: fixed;*/
??????????? position: absolute;
??????????? top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
??????? }

</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<script>
?$(document).ready(function(){
? $(window).scroll(function(){
??? var top=$(document).scrollTop();
??? var menu=$("#menu");
?? ?var items=$("#content").find(".item");
?? ?var currentID="";
?? ?items.each(function(){
?? ?var m=$(this);
?? ?var scrollTop=m.offset().top;
?? ?if(top>scrollTop-200){
?? ?currentID="#"+m.attr('id');
?? ?}else{
?? ?return false;
?? ?}
?? ?});
?? var currentLink=menu.find(".current");
?? if(currentID&&currentLink.attr("href")!=currentID){
?? currentLink.removeClass(".current");
?? menu.find("[href='+currentID+']").addClass("current");
?? }
? });
})
?????????????? ?
</script>
</head>
<body>
<div id="menu">
<ul>


<li><a href="#item1" class="current">1F 男裝</a></li>
<li><a href="#item2">2F 女裝</a></li>
<li><a href="#item3">3F 美妝</a></li>
<li><a href="#item4">4F 數(shù)碼</a></li>
<li><a href="#item5">5F 母嬰</a></li>
</ul>
</div>
<div id="content">
<h1>地狗購物網(wǎng)</h1>

<div id="item1" class="item">
<h2>1F 男裝</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item2" class="item">
<h2>2F 女裝</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item3" class="item">
<h2>3F 美妝</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item4" class="item">
<h2>4F 數(shù)碼</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item5" class="item">
<h2>5F 母嬰</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
</ul>
</div>
</div>
</body>
</html>

云彩無色3804005

2016-10-27

源自：網(wǎng)頁定位導(dǎo)航特效 4-5

關(guān)注問題我要回答

1177

操作

收起

7 回答

12只怕有心人回答被采納 +3 積分
2016-10-28

回復(fù) 云彩無色3804005：額我對(duì)的是你一開始的版本。。。

以下是你的最新版本：

$(document).ready(function(){

? ? $(window).scroll(function(){

? ? ? ?var top=$(document).scrollTop();

? ? ? ?var menu=$("#menu");

? ? ? ?var items=$("#content").find(".item");

? ? ? ?

? ? ? ?var currentID="";

? ? ? ?items.each(function(){

? ? ? ?var m=$(this);//1.變量命名不能用保留的關(guān)鍵字,用m就是為了少打幾個(gè)字啊沒必要用$(this)

? ? ? ?var itemTop=m.offset().top;

? ? ? ? if(top>itemTop-200){

? ? ? //2.把current改成currentID

? ? ? ? currentID="#"+m.attr("id");

? ? ? ?} else{

? ? ? ? return false;

? ? ? }

? ? ? });

? ? ?// 3.currentLink是新變量,前面要加上var

? ? ?var currentLink=menu.find(".current");

? ? ?if(currentID && currentLink.attr("href")!=currentID){

? ? ?//4.currentLink寫錯(cuò)了

? ? ?currentLink.removeClass("current");

? ? ?//5.是從menu中開始尋找,不是currentID

? ? ?menu.find("[href="+currentID+"]").addClass("current");

? ? ?}

? ? ? });

});

? ? ? ??

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

云彩無色3804005 提問者

終于出來了，后面改的就只剩下currentLink多了個(gè)L，謝謝你，問題解決了！

2016-10-28 回復(fù) 有任何疑惑可以回復(fù)我~

#2

云彩無色3804005 提問者

我手寫了很多次，每次敲都不一樣，都有錯(cuò)

2016-10-28 回復(fù) 有任何疑惑可以回復(fù)我~

#3

12只怕有心人回復(fù) 云彩無色3804005 提問者

不謝;)

2016-10-28 回復(fù) 有任何疑惑可以回復(fù)我~

云彩無色3804005 提問者
2016-10-28

?????????? $(document).ready(function(){
? $(window).scroll(function(){
??? var top=$(document).scrollTop();
??? var menu=$("#menu");
??? var items=$("#content").find(".item");
??? var currentID="";
??? items.each(function(){
??? var m=$(this);
??? var scrollTop=m.offset().top;
??? if(top>scrollTop-200){
??? currentID="#"+m.attr("id");
??? }else{
??? return false;
??? }
??? });
?? var currentLink=menu.find(".current");
?? if(currentID&&currentLink.attr("href")!=currentID){
?? currentLink.removeClass("current");
?? menu.find("[href="+currentID+"]").addClass("current"); ?
?? } //這塊是個(gè)重點(diǎn)容易出錯(cuò)，里面必須是雙引號(hào)
? });
})
//老板本問題解決,2處問題，一個(gè)是CLASS名稱，一個(gè)是引號(hào)，折騰一天了

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

云彩無色3804005 提問者
2016-10-28

$(document).ready(function(){
??? $(window).scroll(function(){
?????? var top=$(document).scrollTop();
?????? var menu=$("#menu");
?????? var items=$("#content").find(".item");?? ?
?????? var currentID="";
?????? items.each(function(){
?????? var $this=$(this);
?????? var itemTop=$this.offset().top;
??????? if(top>itemTop-200){
??????? currentID="#"+$this.attr("id");
?????? }
?????? else{
??????? return false;
????? }
????? });
???? var currentLink=menu.find(".current");
???? if(currentID&&currentLink.attr("href")!=currentID){
???? currentLink.removeClass("current");
???? menu.find("[href="+currentID+"]").addClass("current");
???? }
?? });
});

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

云彩無色3804005 提問者
2016-10-28

$(document).ready(function(){
??? $(window).scroll(function(){
?????? var top=$(document).scrollTop();
?????? var menu=$("#menu");
?????? var items=$("#content").find(".item");
????? ?
?????? var currentID="";
?????? items.each(function(){
?????? var $this=$(this);
?????? var itemTop=$this.offset().top;
??????? if(top>itemTop-200){
??????? current="#"+$this.attr("id");
?????? }
?????? else{
??????? return false;
????? }
????? });
???? currentLink=menu.find(".current");
???? if(currentID&&currentLink.attr("href")!=currentID){
???? currentLlink.removeClass("current");
???? currentID.find("[href="+currentID+"]").addClass("current");
???? }
????? });
});

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

12只怕有心人
2016-10-28

menu.find("[href='+currentID+']").addClass("current"); 引號(hào)對(duì)象錯(cuò)啦,改成

menu.find("[href="+currentID+"]").addClass("current"); ?改成單引號(hào)也行

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

云彩無色3804005 提問者

還是不行啊

2016-10-28 回復(fù) 有任何疑惑可以回復(fù)我~

云彩無色3804005 提問者
2016-10-27

下面這個(gè)代碼，找不到問題所在

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

云彩無色3804005 提問者
2016-10-27

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>地狗購物網(wǎng)——網(wǎng)頁定位導(dǎo)航效果</title>
<style>
??????? * {
??????????? margin: 0;
??????????? padding: 0;
??????? }

??????? body {
??????????? font-size: 12px;
??????????? line-height: 1.7;
??????? }

??????? li {
??????????? list-style: none;
??????? }

??????? #content {
??????????? width: 800px;
??????????? margin: 0 auto;
??????????? padding: 20px;
??????? }

??????? #content h1 {
??????????? color: #0088bb;
??????? }

??????? #content .item {
??????????? padding: 20px;
??????????? margin-bottom: 20px;
??????????? border: 1px dotted #0088bb;
??????? }

??????? #content .item h2 {
??????????? font-size: 16px;
??????????? font-weight: bold;
??????????? border-bottom: 2px solid #0088bb;
??????????? margin-bottom: 10px;
??????? }

??????? #content .item li {
??????????? display: inline;
??????????? margin-right: 10px;
??????? }

??????? #content .item li a img {
??????????? width: 230px;
??????????? height: 230px;
??????????? border: none;
??????? }

????? ?
/*請(qǐng)補(bǔ)充此處代碼，讓導(dǎo)航菜單在右側(cè)絕對(duì)定位顯示*/
??????? #menu{
??????????? position:fixed;
??????????? top:100px;
??????????? left:50%;
??????????? margin-left:400px;
??????? }

??????? #menu ul li a {
??????????? display: block;
??????????? margin: 5px 0;
??????????? font-size: 14px;
??????????? font-weight: bold;
??????????? color: #333;
??????????? width: 80px;
??????????? height: 50px;
??????????? line-height: 50px;
??????????? text-decoration: none;
??????????? text-align: center;
??????? }

??????? #menu ul li a:hover,
??????? #menu ul li a.current {
??????????? color: #fff;
??????????? background: #0088bb;
??????? }

??????? /*ie6 hack*/
??????? * html, * html body {
??????????? background-image: url(about:blank);
??????????? background-attachment: fixed;
??????? }

??????? * html #menu {
??????????? /*position: fixed;*/
??????????? position: absolute;
??????????? top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
??????? }

</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<script>
?$(document).ready(function(){
? $(window).scroll(function(){
??? var top=$(document).scrollTop();
??? var menu=$("#menu");
?? ?var items=$("#content").find(".item");
?? ?var currentID="";
?? ?items.each(function(){
?? ?var m=$(this);
?? ?var scrollTop=m.offset().top;
?? ?if(top>scrollTop-200){
?? ?currentID="#"+m.attr('id');
?? ?}else{
?? ?return false;
?? ?}
?? ?});
?? var currentLink=menu.find(".current");
?? if(currentID&&currentLink.attr("href")!=currentID){
?? currentLink.removeClass("current");
?? menu.find("[href='+currentID+']").addClass("current");
?? }
? });
})
?????????????? ?
</script>
</head>
<body>
<div id="menu">
<ul>


<li><a href="#item1" class="current">1F 男裝</a></li>
<li><a href="#item2">2F 女裝</a></li>
<li><a href="#item3">3F 美妝</a></li>
<li><a href="#item4">4F 數(shù)碼</a></li>
<li><a href="#item5">5F 母嬰</a></li>
</ul>
</div>
<div id="content">
<h1>地狗購物網(wǎng)</h1>

<div id="item1" class="item">
<h2>1F 男裝</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item2" class="item">
<h2>2F 女裝</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item3" class="item">
<h2>3F 美妝</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item4" class="item">
<h2>4F 數(shù)碼</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item5" class="item">
<h2>5F 母嬰</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
</ul>
</div>
</div>
</body>
</html>