css怎么设置侧边栏

css设置侧边栏的方法：首先创建一个HTML示例文件；然后在body中设置导航栏内容；最后通过设置css样式为“#sidemenu:checked + aside { left: 0; } ...”来实现侧边栏效果即可。

本文操作环境：windows7系统、HTML5& & CSS3版、Dell G3电脑。

css怎么设置侧边栏？

CSS实现侧边栏导航

!DOCTYPE html>
    html>
        head>
            meta charset="UTF-8">
            tITle>
    /title>
            style type="text/css">
        /*隐藏checked复选框*/            #sidemenu{
                    display: none;
            }
            #sidemenu:checked + aside {
                    /*为被选中的sidemenu后的aside设置属性（紧邻）*/                left: 0;
                /*点击按钮即选中checked后,侧边栏位置变为贴着左边,配合ease-out使用,有渐变滑出的效果*/            }
            #sidemenu:checked ~ #wrap {
                    /*为被选中的sidemenu后的wrap设置属性（非紧邻）*/                padding-left: 220px;
            }
            aside {
                    /*侧边栏,初始位置为-200px，即隐藏效果*/                position: absolute;
                    top: 0;
                    bottom: 0;
                    left: -200px;
                    width: 200px;
                    background: black;
                    transition: 0.2s ease-out;
                /*动画效果的执行方式是ease-out，即侧边栏滑动效果为渐变式，而不是生硬的突然变化*/            }
            h2 {
                    color: white;
                    text-align: center;
                    font-Size: 2em;
            }
            /*控制侧边栏进出的按钮（外部包裹）*/            #wrap {
                    margin-left: 20px;
                    padding: 10px;
                    transition: 0.2s ease-out;
            }
            /*控制侧边栏进出的按钮（内部文字样式）*/            label {
                    /*控制侧边栏进出的按钮*/                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>
                h2>
    主菜单/h2>
                br />
                ul id="sideul">
                    a href="##">
                        li>
    首页/li>
                    /a>
                    a href="##">
                        li style="color: orange;
    ">
    导航1/li>
                    /a>
                    a href="##">
                        li>
    导航2/li>
                    /a>
                    a href="##">
                        li>
    导航3/li>
                    /a>
                    a href="##">
                        li>
    导航4/li>
                    /a>
                    a href="##">
                        li>
    导航5/li>
                    /a>
                    a href="##">
                        li>
    导航6ʳ/li>
                    /a>
                /ul>
            /aside>
            p id='wrap'>
                label id='sideMenuControl' for='sidemenu'>
    ≡/label>
                !--for 属性规定 label 与哪个表单元素绑定，即将这个控制侧边栏进出的按钮与checkbox绑定-->
            /p>
        /body>
    /html>
    

【推荐学习：《css视频教程》】

以上就是css怎么设置侧边栏的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！