<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                二級下拉式菜單在各大學校網站,電商類網站,新聞類網站等大型?網站很常見,那么它的實現原理是什么呢? 學習了Web前端開發的知識后,我們是可以實現這樣的功能的。復雜的都是從基礎效果上添加做出來的,原理和流程 還是一樣的,今天開始做一些簡單的二級下拉式菜單。 橫向一級菜單我們見到的很多,如下圖所示是: ![](https://box.kancloud.cn/2016-03-22_56f0b844711d8.jpg) 二級下拉菜單圖: ![](https://box.kancloud.cn/2016-03-22_56f0b84488fd2.jpg) 二級下拉菜單是在橫向一級菜單的基礎上添加下拉效果實現的,制作思路: 第一步:靜態網頁的制作 標簽<?ul ><?li >...</?li?></ ul >項目列表 標簽< a >鏈接 float浮動 display:block屬性 postion屬性規定元素的定位 第二步:動態特效的實現 下拉菜單的顯示與隱藏 今天我們使用CSS樣式表實現,那么制作流程是: 1.一級菜單設置:設置CSS樣式,使一級菜單橫向顯示,位于一行中。 2.二級菜單設置:給”課程大廳”菜單,添加二級菜單(JavScript/JQuery/Ajax三項),并帶鏈接;同時給“學習中心”菜單,添加二級菜單(視頻學習/案例學習/交流平臺三項),也帶鏈接。 3.隱藏二級菜單: 設置CSS樣式,讓二級菜單隱藏。 4.顯示二級菜單:設置CSS樣式,讓二級菜單顯示。 5.瀏覽器兼容性問題解決以及代碼優化,至少測試五個瀏覽器。我測試的是IE7,8,9,2345瀏覽器,谷歌瀏覽器以及火狐瀏覽器。 HTML代碼部分: ~~~ <span style="font-size:18px;"><!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>下拉菜單</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="nav" class="nav"> <ul> <li><a href="#">網站首頁</a></li> <li><a href="#">課程大廳</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Ajax</a></li> </ul> </li> <li><a href="#">學習中心</a> <ul> <li><a href="#">視頻學習</a></li> <li><a href="#">案例學習</a></li> <li><a href="#">交流平臺</a></li> </ul> </li> <li><a href="#">經典案例</a></li> <li><a href="#">關于我們</a></li> </ul> </div> </body> </html></span> ~~~ CSS樣式表style.css文件代碼: ~~~ /*CSS全局設置*/ *{ margin:0; padding:0; } .nav{ background-color:#EEEEEE; height:40px; width:450px; margin:0 auto; } /*橫向一級菜單樣式設置*/ ul{ list-style:none; } ul li{ float:left; line-height:40px; text-align:center; position:relative; } a{ text-decoration:none; color:#000000; display:block;/*將a行內元素轉變成塊級元素*/ width:90px; height:40px; } a:hover{ background-color:#666666; color:#FFFFFF; } /*二級下拉菜單樣式設置*/ ul li ul li{ float:none; background-color:#EEEEEE; } ul li ul{ position:absolute; top:40px; left:0px; display:none;/*默認狀態下或鼠標離開時隱藏*/ width:90px; } /*為了兼容IE7寫的CSS樣式,但是必須寫在a:hover前面*/ ul li ul li a:link,ul li ul li a:visited{ background-color:#EEEEEE; } ul li ul li a:hover{ background-color:#009933; } /*鼠標滑過一級菜單的元素時顯示下拉菜單*/ ul li:hover ul{ display:block; } ~~~ 來看一下效果: 1.初始化狀態或鼠標離開顯示為橫向一級菜單: ![](https://box.kancloud.cn/2016-03-22_56f0b8449d07f.jpg) 2.鼠標滑過有二級下拉菜單的元素時顯示下拉菜單: ![](https://box.kancloud.cn/2016-03-22_56f0b844b27ac.jpg) 3.顯示的下拉菜單中的鏈接樣式: ![](https://box.kancloud.cn/2016-03-22_56f0b844c6ad3.jpg)
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看