成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端小白進(jìn)階筆記之多級(jí)菜單分享

Wuv1Up / 1007人閱讀

摘要：注釋部分為下拉菜單隱藏，顯示的樣式。子元素會(huì)繼承父元素的樣式在寫(xiě)樣式是我們會(huì)發(fā)現(xiàn)子元素會(huì)繼承父元素的樣式，如果想要改變樣式，可以給要改變樣式的對(duì)象一個(gè)或者多帶帶設(shè)置其屬性相對(duì)定位絕對(duì)定位的用法。

css技術(shù)分享之二級(jí)、三級(jí)下拉菜單的制作： 首先看一下網(wǎng)頁(yè)中的三級(jí)下拉菜單：

接下來(lái)自己動(dòng)手試一試吧！ 制作多級(jí)下拉菜單 在css中我們需要用到：

hover選擇器用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素
display：none：隱藏元素
display:black：顯示被隱藏的元素

第一步：搭建框架并填充內(nèi)容 

        
  • 2017年
    • 
    
  • 2018年
        
      
            
    • 一月
                
        
                    
      • 1
        • 
                    
      • 2
        • 
                    
      • 3
        • 
                    
      • 4
        • 
                    
      • 5
        • 
                    
      • 6
        • 
                    
      • 7
        • 
                    
      • 8
        • 
                    
      • 9
        • 
                    
      • 10
        • 
                    
      • 11
        • 
                    
      • 12
        • 
                    
      • 13
        • 
                    
      • 14
        • 
                    
      • 15
        • 
                    
      • 16
        • 
                    
      • 17
        • 
                    
      • 18
        • 
                    
      • 19
        • 
                    
      • 20
        • 
                    
      • 21
        • 
                    
      • 22
        • 
                    
      • 23
        • 
                    
      • 24
        • 
                    
      • 25
        • 
                    
      • 26
        • 
                    
      • 27
        • 
                    
      • 28
        • 
                    
      • 29
        • 
                    
      • 30
        • 
                
      
            
      • 
            
    • 二月
      • 
            
    • 三月
      • 
            
    • 四月
      • 
            
    • 五月
      • 
            
    • 六月
      • 
        
    
    
    • 
    
  • 2019年
    • 
    
  • 2020年
    • 
    
  • 2021年
    • 
    
  • 2022年
    •
第二步：編寫(xiě)css樣式 注意：子元素會(huì)繼承父元素的樣式，如果想要改變樣式，可以給要改變樣式的對(duì)象一個(gè)id或者class多帶帶設(shè)置其屬性。注釋部分為下拉菜單隱藏，顯示的樣式。

此時(shí)可以得到如下效果圖：

提示：二級(jí)菜單的制作需要注意的三個(gè)問(wèn)題：

1、層級(jí)關(guān)系：年月日很好的詮釋了多級(jí)下拉菜單的關(guān)系，當(dāng)點(diǎn)擊年份的時(shí)候可以讓月份顯示，點(diǎn)擊月份的時(shí)候可以讓日期顯示，也就是說(shuō)我們需要給要顯示對(duì)象父級(jí)設(shè)置hover。
2、子元素會(huì)繼承父元素的樣式：在寫(xiě)css樣式是我們會(huì)發(fā)現(xiàn)子元素會(huì)繼承父元素的樣式，如果想要改變樣式，可以給要改變樣式的對(duì)象一個(gè)id或者class多帶帶設(shè)置其屬性
3、position：relative(相對(duì)定位)/absolute(絕對(duì)定位)的用法。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51296.html

相關(guān)文章

  • 前端小白進(jìn)階筆記之多級(jí)菜單分享

    摘要：注釋部分為下拉菜單隱藏，顯示的樣式。子元素會(huì)繼承父元素的樣式在寫(xiě)樣式是我們會(huì)發(fā)現(xiàn)子元素會(huì)繼承父元素的樣式，如果想要改變樣式，可以給要改變樣式的對(duì)象一個(gè)或者單獨(dú)設(shè)置其屬性相對(duì)定位絕對(duì)定位的用法。 css技術(shù)分享之二級(jí)、三級(jí)下拉菜單的制作： 首先看一下網(wǎng)頁(yè)中的三級(jí)下拉菜單： showImg(https://segmentfault.com/img/remote/14600000113377...

    Mike617 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    sutaking 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    khs1994 評(píng)論0 收藏0

  • JavaScript精編干貨

    摘要：老姚淺談怎么學(xué)鑒于時(shí)不時(shí)，有同學(xué)私信問(wèn)我老姚，下同怎么學(xué)前端的問(wèn)題。擼碼聽(tīng)歌，全局控制。 淺析用 js 解析 xml 的方法 由于項(xiàng)目上需要解析 xml，于是各種百度，然后自己總結(jié)了下各個(gè)主流瀏覽器解析 xml 的方法，只能是很淺顯的知道他的用法，但是還沒(méi)有深層次的研究。 裝 X - 建立自己的斗圖網(wǎng)站庫(kù) 之前加過(guò)一個(gè)斗圖群，看到很多經(jīng)典的表情，然后就收藏到了 QQ， 迫于本屌絲開(kāi)不起...

    Fourierr 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<