這篇文章給大家分享的是有關(guān)css如何設(shè)置側(cè)邊欄的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)歡迎咨詢：18982081108，為您提供成都網(wǎng)站建設(shè)網(wǎng)頁設(shè)計及定制高端網(wǎng)站建設(shè)服務(wù)，成都創(chuàng)新互聯(lián)網(wǎng)頁制作領(lǐng)域十年，包括成都集裝箱等多個方面擁有豐富的網(wǎng)站維護(hù)經(jīng)驗，選擇成都創(chuàng)新互聯(lián)，為企業(yè)保駕護(hù)航！

css設(shè)置側(cè)邊欄的方法：首先創(chuàng)建一個HTML示例文件；然后在body中設(shè)置導(dǎo)航欄內(nèi)容；最后通過設(shè)置css樣式為“#sidemenu:checked + aside {left: 0;}...”來實(shí)現(xiàn)側(cè)邊欄效果即可。

本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版、Dell G3電腦。

css怎么設(shè)置側(cè)邊欄？

CSS實(shí)現(xiàn)側(cè)邊欄導(dǎo)航

    
        
        
        
        /*隱藏checked復(fù)選框*/
            #sidemenu{                display: none;            }

            #sidemenu:checked + aside {                /*為被選中的sidemenu后的aside設(shè)置屬性（緊鄰）*/
                left: 0;                /*點(diǎn)擊按鈕即選中checked后,側(cè)邊欄位置變?yōu)橘N著左邊,配合ease-out使用,有漸變滑出的效果*/
            }

            #sidemenu:checked ~ #wrap {                /*為被選中的sidemenu后的wrap設(shè)置屬性（非緊鄰）*/
                padding-left: 220px;            }

            aside {                /*側(cè)邊欄,初始位置為-200px，即隱藏效果*/
                position: absolute;                top: 0;                bottom: 0;                left: -200px;                width: 200px;                background: black;                transition: 0.2s ease-out;                /*動畫效果的執(zhí)行方式是ease-out，即側(cè)邊欄滑動效果為漸變式，而不是生硬的突然變化*/
            }

            h3 {                color: white;                text-align: center;                font-size: 2em;            }

            /*控制側(cè)邊欄進(jìn)出的按鈕（外部包裹）*/
            #wrap {                margin-left: 20px;                padding: 10px;                transition: 0.2s ease-out;            }

            /*控制側(cè)邊欄進(jìn)出的按鈕（內(nèi)部文字樣式）*/
            label {                /*控制側(cè)邊欄進(jìn)出的按鈕*/
                background: white;                border-radius: 70px;                color: orange;                cursor: pointer;                display: block;                font-family: Courier New;                font-size: 2em;                width: 1.5em;                height: 1.5em;                line-height: 1.5em;                text-align: center;                display: inline-block;            }

            label:hover {                background: #000;            }

            #sideul li {                list-style: none;                color: white;                width: 100%;                height: 1.8em;                font-size: 1.5em;                text-align: center;            }

            a {                text-decoration: none;            }

            #sideul li:hover {                color: orange;            }
        
    

    
        
        
        
            ≡
            
        


    

感謝各位的閱讀！關(guān)于“css如何設(shè)置側(cè)邊欄”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！