css如何設(shè)置側(cè)邊欄

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

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

css設(shè)置側(cè)邊欄的方法：首先創(chuàng)建一個(gè)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)航

<!DOCTYPE html><html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        /*隱藏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;                /*動(dòng)畫效果的執(zhí)行方式是ease-out，即側(cè)邊欄滑動(dòng)效果為漸變式，而不是生硬的突然變化*/
            }

            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;            }
        </style>
    </head>

    <body>
        <input type='checkbox' id='sidemenu'>
        <aside>
            <h3>主菜單</h3>
            <br />
            <ul id="sideul">
                <a href="##">
                    <li>首頁(yè)</li>
                </a>
                <a href="##">
                    <li style="color: orange;">導(dǎo)航1</li>
                </a>
                <a href="##">
                    <li>導(dǎo)航2</li>
                </a>
                <a href="##">
                    <li>導(dǎo)航3</li>
                </a>
                <a href="##">
                    <li>導(dǎo)航4</li>
                </a>
                <a href="##">
                    <li>導(dǎo)航5</li>
                </a>
                <a href="##">
                    <li>導(dǎo)航6?</li>
                </a>
            </ul>
        </aside>
        <p id='wrap'>
            <label id='sideMenuControl' for='sidemenu'>≡</label>
            <!--for 屬性規(guī)定 label 與哪個(gè)表單元素綁定，即將這個(gè)控制側(cè)邊欄進(jìn)出的按鈕與checkbox綁定-->
        </p>

    </body></html>

css如何設(shè)置側(cè)邊欄

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

分享題目：css如何設(shè)置側(cè)邊欄
文章地址：http://jinyejixie.com/article30/ggcgpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、服務(wù)器托管、虛擬主機(jī)、域名注冊(cè)、網(wǎng)站維護(hù)、小程序開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

css如何設(shè)置側(cè)邊欄