亚洲AV无码一区二区三区乱,欧美亚洲日本伊人,久草青在线新免费观看

第7章結語
視頻：7-1 結語(00:31)

第8章編程挑戰
編程：8-1 編程挑戰

編程練習

運用css和jQuery，實現導航菜單在右側絕對定位顯示，并且可以在滾動時根據滾動條的位置自動設置導航菜單的焦點。

溫馨提示 : 完成任務后，請驗證是否與實踐描述效果一致，如一致，恭喜您，你已經掌握此技能，否則，請重復學習此節內容。

任務

一、靜態網頁的實現

1.運用CSS，讓導航菜單在右側絕對定位顯示。

2.運用錨點，實現導航定位。

提示: 使用position屬性。

二、jQuery實現定位導航特效

1.滾動條發生滾動時，要獲取相應的值。

提示:先要獲取到相應的scrollTop()、導航和當前所在的樓層。

2.實現讓導航菜單在滾動條滾動的時候自動設置焦點

提示：這里遍歷時需要對滾動條位置和每個元素位置做一個判斷，并把相應的元素id值賦予currentId

3. 給相應樓層的 a 設置current，取消其他鏈接的current

?不會了怎么辦

index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>地狗購物網——網頁定位導航效果</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; } /*請補充此處代碼，讓導航菜單在右側絕對定位顯示*/ } #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> //滾動條發生滾動時，要獲取相應的值。 //請補充此處代碼，讓導航菜單實現在滾動條滾動的時候自動設置焦點 //給相應樓層的a 設置 current，取消其他鏈接的current </script> </head> <body> <div id="menu"> <ul>  <li><a href="#" class="current">1F 男裝</a></li> <li><a href="#">2F 女裝</a></li> <li><a href="#">3F 美妝</a></li> <li><a href="#">4F 數碼</a></li> <li><a href="#">5F 母嬰</a></li> </ul> </div> <div id="content"> <h1>地狗購物網</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 數碼</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>

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

4-5 編程練習

編程練習

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

4-5 編程練習

熱搜

最近搜索清空

編程練習

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～