国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS+JS相應式導航菜單

Carl / 1183人閱讀

摘要:響應式導航菜單響應式導航菜單就是當網頁在其他不同視口的樣式,不同的設備需要不同的樣式需要掌握的知識掌握媒體查詢,如果你不是很懂那就看我寫的響應式布局掌握重的簡單的方法下面是代碼響應式菜單首頁產品購買服務聯系樣式代

響應式導航菜單 響應式導航菜單就是當網頁在其他不同視口的樣式,不同的設備需要不同的樣式 需要掌握的知識

- 掌握媒體查詢,如果你不是很懂那就看我寫的CSS響應式布局

掌握CSS重的display:none;

簡單的JS方法

下面是HTML代碼




    
    響應式菜單
    
    


    

CSS樣式

*{
    margin:0;
    padding:0;
    text-decoration:none;
    list-style:none;
}
.nav{
    background:blue;
    width:100%;
    position:relative;
}
.pic{
    background:url(bottom.jpg) no-repeat;
    position:absolute;
    width:128px;
    height:46px;
    top:8px;
    left:60px;
}
.btn{
    font-size:20px;
    color:#fff;
    background:#13138a;
    display:none;
}
.btn i{
    padding:20px;
}
ul{
    margin-left:200px;
    
}
ul li{
    float:left;
}
ul li a:hover{
    background:pink;
}
ul li a{
    display:block;
    padding:20px 30px;
    color:#fff;
}
.clearfix:after{
    display:block;
    height:0;
    content:"";
    visibility:hidden;
    clear:both;
}
@media screen and (max-width:768px){
    ul li{
        float:none;
        width:100%;
        text-align:center;
    }
    ul{
        width:100%;
        display:none;
        margin:0;
    }
    .btn{
        display:block;
    }
    .pic{
        left:50%;
        margin-left:-64px;
    }
}

js代碼:

當視口大于768px的時候:

當視口小于768px的時候,導航菜單需要隱藏起來:

持續更新,歡迎大家指教

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52695.html

相關文章

  • CSS+JS相應導航菜單

    摘要:響應式導航菜單響應式導航菜單就是當網頁在其他不同視口的樣式,不同的設備需要不同的樣式需要掌握的知識掌握媒體查詢,如果你不是很懂那就看我寫的響應式布局掌握重的簡單的方法下面是代碼響應式菜單首頁產品購買服務聯系樣式代 響應式導航菜單 響應式導航菜單就是當網頁在其他不同視口的樣式,不同的設備需要不同的樣式 需要掌握的知識 - 掌握媒體查詢,如果你不是很懂那就看我寫的CSS響應式布局 掌握C...

    printempw 評論0 收藏0
  • 響應導航菜單css+js

    摘要:響應式導航菜單先來看下效果圖把當視口大于的時候,導航條會顯示在外,當視口小于的時候,導航菜單需要隱藏起來代碼如下響應式首頁產品購買服務聯系代碼如下持續更新,歡迎大家指教 1.響應式導航菜單 先來看下效果圖把:showImg(https://segmentfault.com/img/bVbecgx?w=1206&h=533); 當視口大于640px的時候,導航條會顯示在外,當視口小于76...

    CodeSheep 評論0 收藏0
  • 響應導航菜單css+js

    摘要:響應式導航菜單先來看下效果圖把當視口大于的時候,導航條會顯示在外,當視口小于的時候,導航菜單需要隱藏起來代碼如下響應式首頁產品購買服務聯系代碼如下持續更新,歡迎大家指教 1.響應式導航菜單 先來看下效果圖把:showImg(https://segmentfault.com/img/bVbecgx?w=1206&h=533); 當視口大于640px的時候,導航條會顯示在外,當視口小于76...

    sanyang 評論0 收藏0
  • 響應布局入門之——側欄菜單

    摘要:年月初,中共中央國務院發布了關于構建和諧勞動關系的意見,明確提出切實保障職工休息休假的權利,完善并落實國家關于職工工作時間全國年節及紀念日假期帶薪年休假等規定。下一步要抓好這項工作的落實。 一直以來響應式布局都是利用的bootstrap來做,但是在手機上瀏覽的話,bootstrap樣式文件還是有點大 118k,如果再用上一些js庫的話,上個幾百k是輕輕松松了,這樣一來用移動流量的話真的...

    singerye 評論0 收藏0
  • 響應布局入門之——側欄菜單

    摘要:年月初,中共中央國務院發布了關于構建和諧勞動關系的意見,明確提出切實保障職工休息休假的權利,完善并落實國家關于職工工作時間全國年節及紀念日假期帶薪年休假等規定。下一步要抓好這項工作的落實。 一直以來響應式布局都是利用的bootstrap來做,但是在手機上瀏覽的話,bootstrap樣式文件還是有點大 118k,如果再用上一些js庫的話,上個幾百k是輕輕松松了,這樣一來用移動流量的話真的...

    AlphaWatch 評論0 收藏0

發表評論

0條評論

Carl

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<