久草哥在线视频,久草肉片资源站

第3章商城分類導航實現（JS版）
視頻：3-1 JS實現特效(08:24)
編程：3-2 編程練習

編程練習

小伙伴們，請為大類LI添加鼠標移上效果

效果圖:

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

任務

在編輯器第57行處完成如下任務，當鼠標移動到大類菜單時，顯示外外光的邊框，右側無邊框

提示：設置LI鼠標移上時有外發光，且有邊框，右側無邊框，無背景圖片

1. 修改li:hover樣式

2.設置邊框及外發光效果

3.對chrome和firefox等瀏覽器設置外發光效果

4.刪除背景圖片

?不會了怎么辦: 參考代碼:

.topmenu li:hover

        {

            border: 1px solid #DDD;

            border-right: 0;

            box-shadow: 0 0 8px #DDD;

            -moz-box-shadow: 0 0 8px #DDD;

            -webkit-box-shadow: 0 0 8px #DDD;

            background-image: none;

        }

index.html

<!DOCTYPE html> <html> <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; background-image: url(http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg); background-repeat: no-repeat; background-position: right; } .topmenu li a { text-decoration: none; color: #313131; } .topmenu li a:hover { text-decoration: underline; font-weight: bold; color: #e4393c; } .topmenu li:hover { /* 任務編寫代碼處 */ } .topmenu li:hover .submenu { display: block; } .topmenu li:hover span { background: white; display: inline-block; z-index: 20; width: 20px; height: 30px; float: right; position: relative; } </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-4 編程練習

編程練習

任務

提問題

其他問答

寫筆記

您還未綁定服務號

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

手記推薦

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

2-4 編程練習

熱搜

最近搜索清空

編程練習

任務

提問題

其他問答

寫筆記

您還未綁定服務號

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

手記推薦

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