将网页分为几个部分

将网页分为几个部分

关注
发信
关注(28)粉丝(399)

html - 将网页分为几个部分并做出响应

我尝试将网页分为几个部分。像页眉，导航栏，页脚，侧边栏和内容，但是这样做时我会遇到问题。

第一件事是我要在正文中留出10px的边距并要全宽。
标头是固定在顶部的，导航栏的高度不是固定的，因为它的大小将来可能会重新调整。页脚始终是底部，即使没有内容也是如此。

我为隐藏侧边栏添加了一个复选框，但是不幸的是，我无法在其上添加过渡，当我将复选框移至导航栏时，它将无法正常工作。

在这是代码，我不能维护所有的东西。请帮我。 jsFiddle

index.html

<html>

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>

    <div id="wrapper">
        <div id="header">
            <h2>My Header</h2>
            <h2>My Header</h2>
        </div>
        <div id="navbar">
            <h2>My Navbar</h2>
        </div>
        <div class="content-wrapper">
            <input id="slide-sidebar" type="checkbox" role="button" />
            <label for="slide-sidebar"><span>close</span></label>
            <div class="sidebar-left">
                <h2>Lecture Dates</h2>
                <p>11/07 - Lecture on Caesar</p>
                <p>11/08 - Lecture on Caesar</p>
                <p>11/09 - Lecture on Caesar</p>
                <p>11/10 - Lecture on Caesar</p>
                <p>11/11 - Lecture on Caesar</p>
                <p>11/07 - Lecture on Caesar</p>
                <p>11/08 - Lecture on Caesar</p>
                <p>11/09 - Lecture on Caesar</p>
                <p>11/10 - Lecture on Caesar</p>
                <p>11/11 - Lecture on Caesar</p>
                <p>11/07 - Lecture on Caesar</p>
            </div>
            <div class="portfolio">
                <h1>Hello World</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra mauris nec sem condimentum pellentesque. Praesent tincidunt non nulla in ullamcorper. Nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. Maecenas pellentesque porta cursus. In ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra mauris nec sem condimentum pellentesque. Praesent tincidunt non nulla in ullamcorper. Nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. Maecenas pellentesque porta cursus. In ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra mauris nec sem condimentum pellentesque. Praesent tincidunt non nulla in ullamcorper. Nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. Maecenas pellentesque porta cursus. In ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>
                <h2>Hello World</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra mauris nec sem condimentum pellentesque. Praesent tincidunt non nulla in ullamcorper. Nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. Maecenas pellentesque porta cursus. In ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra mauris nec sem condimentum pellentesque. Praesent tincidunt non nulla in ullamcorper. Nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. Maecenas pellentesque porta cursus. In ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>
            </div>
        </div>
        <div id="footer">
            <h3>My Footer</h3>
        </div>
    </div>
</body>

</html>


styles.css

 body {
        background-color: #9c9f84;
        margin: 0px;
        font-family: Georgia;
        font-size: 14px;
    }
    #header {
        background-color: #5c755e;
        margin: 10px;
        /*    height: 90px;*/
        border-radius: 5px;
    }
    #header h2 {
        text-align: center;
        padding: 10px;
    }
    #footer {
        background-color: #5c755e;
        margin: 10px;
        bottom: 0px;
        font-size: 110%;
        border-radius: 5px;
        position: absolute;
    }
    #footer h3 {
        text-align: center;
        padding: 10px;
    }
    #navbar {
        background-color: #5c755e;
        margin: 10px;
        height: 35px;
        border-radius: 5px;
    }
    #navbar h2 {
        text-align: center;
        padding: 10px;
    }
    .portfolio {
        background-color: #e5e4d7;
        margin-left: 320px;
        margin-bottom: 10px;
        margin-right: 10px;
        padding: 20px;
        font-size: 110%;
        border-radius: 5px;
        -moz-transition: left 1s ease;
        transition: left 1s ease;
        position: absolute;
    }
    .sidebar-left {
        background-color: #e5e4d7;
        margin-top: 0px;
        margin-left: 10px;
        margin-bottom: 10px;
        margin-right: 10px;
        border-radius: 5px;
        padding: 20px;
        font-size: 105%;
        /*    float: left;*/
        width: 260px;
        clear: both;
        position: absolute;
        -moz-transition: left 1s ease;
        transition: left 1s ease;
    }
    input:checked ~ .portfolio {
        margin-left: 10px;
        -moz-transition: left 0.5s ease;
        transition: left 0.5s ease;
    }

最佳答案

转换尚未完成，请尝试以下CSS：



body {
    background-color: #9c9f84;
    margin: 0px;
    font-family: Georgia;
    font-size: 14px;
}
#header {
    background-color: #5c755e;
    margin: 10px;
    /*    height: 90px;*/
    border-radius: 5px;
}
#header h2 {
    text-align: center;
    padding: 10px;
}
#footer {
    background-color: #5c755e;
    margin: 10px;
    bottom: 0px;
    font-size: 110%;
    border-radius: 5px;
    position: absolute;
}
#footer h3 {
    text-align: center;
    padding: 10px;
}
#navbar {
    background-color: #5c755e;
    margin: 10px;
    height: 35px;
    border-radius: 5px;
}
#navbar h2 {
    text-align: center;
    padding: 10px;
}
.portfolio {
    background-color: #e5e4d7;
    /* margin-left: 320px; */
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 20px;
    font-size: 110%;
    border-radius: 5px;
    -moz-transition: left 1s ease;
    transition: left 1s ease;
    position: absolute;
    left: 320px;
}
.sidebar-left {
    background-color: #e5e4d7;
    margin-top: 0px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    border-radius: 5px;
    padding: 20px;
    font-size: 105%;
    /*    float: left;*/
    width: 260px;
    clear: both;
    position: absolute;
    -moz-transition: left 1s ease;
    transition: left 1s ease;
}

input:checked ~ .portfolio {
    margin-left: 10px;
    left: 0;
}

input:checked ~ .sidebar-left {
    margin-left: 10px;
    left: -999em;
}

<div id="wrapper">
        <div id="header">
            <h2>My Header</h2>
            <h2>My Header</h2>
        </div>

        <div id="navbar">
            <h2>My Navbar</h2>
        </div>

        <div class="content-wrapper">
            <input id="slide-sidebar" type="checkbox" role="button" />
            <label for="slide-sidebar"><span>close</span></label>
            <div class="sidebar-left">
                <h2>Lecture Dates</h2>
                <p>11/07 - Lecture on Caesar</p>
                <p>11/08 - Lecture on Caesar</p>
                <p>11/09 - Lecture on Caesar</p>
                <p>11/10 - Lecture on Caesar</p>
                <p>11/11 - Lecture on Caesar</p>
                <p>11/07 - Lecture on Caesar</p>
                <p>11/08 - Lecture on Caesar</p>
                <p>11/09 - Lecture on Caesar</p>
                <p>11/10 - Lecture on Caesar</p>
                <p>11/11 - Lecture on Caesar</p>
                <p>11/07 - Lecture on Caesar</p>
            </div>

            <div class="portfolio">

                <h1>Hello World</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra mauris nec sem condimentum pellentesque. Praesent tincidunt non nulla in ullamcorper. Nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. Maecenas pellentesque porta cursus. In ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra mauris nec sem condimentum pellentesque. Praesent tincidunt non nulla in ullamcorper. Nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. Maecenas pellentesque porta cursus. In ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra mauris nec sem condimentum pellentesque. Praesent tincidunt non nulla in ullamcorper. Nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. Maecenas pellentesque porta cursus. In ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>
                <h2>Hello World</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra mauris nec sem condimentum pellentesque. Praesent tincidunt non nulla in ullamcorper. Nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. Maecenas pellentesque porta cursus. In ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra mauris nec sem condimentum pellentesque. Praesent tincidunt non nulla in ullamcorper. Nulla lacinia, magna ac iaculis sodales, elit odio sagittis nisl, vel egestas sem quam sit amet leo. Maecenas pellentesque porta cursus. In ornare, diam eget maximus fermentum, felis lacus bibendum nunc, aliquam egestas dui ligula ut ante.</p>
            </div>
        </div>

        <div id="footer">
            <h3>My Footer</h3>
        </div>
    </div>

关于html - 将网页分为几个部分并做出响应，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34814178/

10-09 16:11
Powered by LMLPHP ©2024 将网页分为几个部分 0.032246