首頁 > 開發者 > JavaScript
如何在導覽列添加hot樣式圖片，
如何在導覽列添加hot樣式圖片:
建議:儘可能的手寫代碼，可以有效提高學習效率和深度。
在很多網站的導覽列中都有這樣的效果，在一個比較熱門的欄目上面會有一個動態小圖片用以標示此欄目比較熱門或者是新增欄目等等，效果比較美觀且人性化，下面就簡單介紹一下如何?此效果，先看一段代碼執行個體:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>螞蟻部落</title><style type="text/css">* { padding: 0px; margin: 0px;}body { font: 12px; margin-top: 80px;}li { list-style: none;}a { text-decoration: none; color: #20537A;}.clearfix:after { content: "\0020"; display: block; height: 0; clear: both;}.clearfix { _zoom: 1;}* + html .clearfix { overflow: auto;}.menu_navcc { width: 970px; margin: 0 auto;}.menu_nav { width: 970px; height: 48px; background: url(mytest/div+css/mynav_bg.gif) repeat-x; float: left; margin-top: 18px;}.menu_nav .nav_content { padding-left: 25px; background: url(mytest/div+css/mynav_l_bg.gif) no-repeat; float: left;}.menu_nav .nav_content li { width: 88px; height: 48px; padding-left: 15px; padding-right: 13px; background: url(mytest/div+css/mynav_li_right.gif) no-repeat right center; float: left; line-height: 48px; text-align: center; font-size: 14px; font-weight: bold;}.menu_nav .nav_content li a { color: #fff; width: 88px; height: 48px; display: block;}.menu_nav .nav_content li.current { line-height: 37px;}.menu_nav .nav_content li em { background: url(mytest/div+css/bid_new.gif) no-repeat; width: 35px; height: 21px; display: inline-block; position: absolute; top: -20px; left: 40px;}.menu_nav .nav_content li.current a, .menu_nav .nav_content li a:hover { width: 88px; height: 37px; background: url(mytest/div+css/mynav_li_current.gif) no-repeat; display: block; color: #fff;} .menu_nav .nav_content li a:hover { background: url(mytest/div+css/mynav_li_hover.gif) no-repeat; line-height: 37px; text-decoration: none;}.menu_nav_right { padding-right: 20px; background: url(mytest/div+css/mynav_r_bg.gif) no-repeat right top; float: right; margin-left: 50px; padding-top: 13px; height: 23px; padding-bottom: 12px;}p { margin-bottom: 15px;}</style></head><body> <div class="menu_navcc"> <div class="menu_nav clearfix"> <ul class="nav_content"> <li class="current"><a href="#" title="首頁"><span>首頁</span></a></li> <li><a href="#" title="DIV+CSS教程"><span>DIV+CSS教程</span></a></li> <li style="position:relative;"><a href="#" title="站長交流"><span>站長交流</span></a><em></em></li> <li><a href="#" title="搜尋最佳化"><span>搜尋最佳化</span></a></li> <li><a href="#" title="jQuery專區"><span>jQuery專區</span></a></li> <li><a href="#" title="特效下載"><span>特效下載</span></a></li> </ul> <div class="menu_nav_right"></div> </div> </div></body></html>
以上代碼實現了想要的效果，下面簡單介紹一下如何?此效果的:
實現原理:
將所在的li元素position屬性值設定為relative，然後再將li元素中的em元素設定為絕對位置，並且給其設定背景圖片，這個背景圖片就是所看到的new圖片，然後再實用left和top屬性控制em的位置，這樣就達成了想要的效果。之所以li元素要設定成相對定位，這樣是因為如果em元素設定為絕對位置的話，em元素定位的參考元素就是li元素，具體可以參閱position絕對位置以哪個對象為參考一章。
原文地址是;http://www.softwhy.com/forum.php?mod=viewthread&tid=6286
更多內容可以參閱:http://www.softwhy.com/divcss/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
