慕课网

编程挑战

本代码利用课程中所学的知识实现了简单的类似于天猫新首发页面的效果，天猫新首发页面在导航效果的基础上又加入了很多额外的特效，感兴趣的同学可以在此基础上发挥想象，把效果做得更加完善。

温馨提示:完成任务后，请验证是否与实践效果一致，如一致，恭喜您，你已经掌握此知识，否则，请重新学习些课程吆，直到与结果效果一致。

任务

1. 让右侧广告正确显示

注意: 选择正确的尺寸和滚动条的隐藏。

2. 让导航菜单在左侧绝对定位显示

注意: 定位和选择正确的position。

3. 让导航菜单实现在滚动条滚动的时候自动设置焦点

注意：注意用到教程中所学的知识，遍历items设置currentId，然后给菜单设置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; background-color: #888; } li { list-style: none; } #content { width: 1000px; margin: 0 auto; padding-top: 100px; padding-bottom: 300px; } /*请补充此处代码，让右侧广告正确显示*/ #content .item img { position: absolute; top: 100px; left: 40px; } #content #item1 { background: url("http://img1.sycdn.imooc.com//536c9ea800013ae610000540.jpg") no-repeat center top; } #content #item2 { background: url("http://img1.sycdn.imooc.com//536c9ecd0001606d10000540.jpg") no-repeat center top; } #content #item3 { background: url("http://img1.sycdn.imooc.com//536c9f0a0001ccc310000540.jpg") no-repeat center top; } #content #item4 { background: url("http://img1.sycdn.imooc.com//536c9f6700012e9010000540.jpg") no-repeat center top; } #content #item5 { background: url("http://img1.sycdn.imooc.com//536c9f800001b28510000540.jpg") no-repeat center top; } /*请补充此处代码，让导航菜单在左侧绝对定位显示*/ #menu h1 { color: #fff; font-size: 14px; text-align: center; background: #ee1111; line-height: 30px; } #menu ul li a { display: block; margin: 5px 0; font-size: 12px; color: #ccc; width: 160px; padding: 10px 20px; text-decoration: none; text-align: left; border-bottom: 1px dashed #999; } #menu ul li a strong { color: #f1f1f1; } #menu ul li a:hover, #menu ul li a.current { color: #fff; background: #666; } /*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"); // 请补充此处代码，让导航菜单实现在滚动条滚动的时候自动设置焦点 }); }); </script> </head> <body> <div id="menu"> <h1>正在首发</h1> <ul> <li><a href="#item1" class="current"><strong>2014.04.09</strong><br>施华蔻0元赢Smart</a></li> <li><a href="#item2"><strong>2014.04.05</strong><br>alienware机皇限量抢</a></li> <li><a href="#item3"><strong>2014.04.04</strong><br>联想Miix2 3G平板电脑</a></li> <li><a href="#item4"><strong>2014.04.03</strong><br>御爵厨房垃圾处理器</a></li> <li><a href="#item5"><strong>2014.04.01</strong><br>中兴天机GRAND S II</a></li> </ul> </div> <div id="content"> <div id="item1" class="item"> <img src="http://img1.sycdn.imooc.com//536ca02800014e7105000400.jpg"> </div> <div id="item2" class="item"> <img src="http://img1.sycdn.imooc.com//536ca04b0001dbeb04520519.jpg"> </div> <div id="item3" class="item"> <img src="http://img1.sycdn.imooc.com//536ca06200016a4d03950387.jpg"> </div> <div id="item4" class="item"> <img src="http://img1.sycdn.imooc.com//536ca0ab0001c89205000400.jpg"> </div> <div id="item5" class="item"> <img src="http://img1.sycdn.imooc.com//536ca0830001b17f05000400.jpg"> </div> </div> </body> </html>

写笔记

公开笔记

提交

||

8-1 编程挑战

编程挑战

任务

写笔记

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