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

时间：2016-01-15 15:14:47

标签： html css html5 css3 css-transitions

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

第一件事是我想在身体边缘10px并且想要全宽。 标题是固定顶部，导航栏高度不固定，因为它的大小可能会在将来重新调整大小，根据侧边栏和内容转移到底部，边距也是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;
    }

1 个答案:

答案 0 :(得分：1)

转换未完成，请尝试此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>

相关问题
最新问题