慕课网

第3章商城分类导航实现（JS版）
视频：3-1 JS实现特效(08:24)
编程：3-2 编程练习

编程练习

小伙伴们，根据所学知识，请为导航菜单大类设置右箭头

效果图:

图片素材:

图片引用地址:http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg

温馨提示:完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能。

任务

1. 为每个大类的CSS样式设置背景：

提示：设置1.png为背景，靠右，且不重复。

2. 当鼠标移到大类时，设置背景为空。

提示：设置hover 时背景为空。

?不会了怎么办: 参考代码

.topmenu li

        {

            height: 30px;

            line-height: 30px;

            font-size: 11pt;

            list-style-type: none;

            text-align: left;

            padding-left: 8px;

            z-index: 3;

           background-image: url(1.png);

           background-repeat: no-repeat;

           background-position: right;

        }

       .topmenu li:hover

        { background-image: none; }

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> body { padding: 0; font-size: 10pt; behavior:url(css/csshover.htc); } .topmenu { display: block; width: 220px; border: 2px solid #e4393c; margin: 0; padding: 0; } .toptitle { height: 40px; line-height: 40px; text-align: left; font-size: 11pt; font-weight: bold; color: White; background: #e4393c; padding-left: 20px; } .topmenu li { height: 30px; line-height: 30px; font-size: 11pt; list-style-type: none; text-align: left; padding-left: 8px; z-index: 3; /* 任务一 */ } .topmenu li:hover { /* 任务二 */ } .topmenu li a { text-decoration: none; color: #313131; } .topmenu li a:hover { text-decoration: underline; font-weight: bold; color: #e4393c; } </style> </head> <body> <ul class="topmenu"> <div class="toptitle"> 全部商品分类 </div> <li><a href="#">图书、音像、数字商品</a><span></span> </li> <li><a href="#">家用电器</a></li> <li><a href="#">手机、数码</a></li> <li><a href="#">电脑、办公</a></li> <li><a href="#">家居、家具、家装、厨具</a></li> <li><a href="#">服饰内衣、珠宝首饰</a></li> <li><a href="#">个护化妆</a></li> <li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li> <li><a href="#">运动户外</a></li> <li><a href="#">汽车用品</a></li> <li><a href="#">母婴、玩具乐器</a></li> <li><a href="#">食品饮料、酒类、生鲜</a></li> <li><a href="#">营养保健</a></li> </ul> </body> </html>

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

2-2 编程练习

编程练习

任务

写笔记

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