一个现成的响应式HTML5圣杯布局模板

经典3列布局模板：header+main content（三列）+footer。

html5, template

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3625
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    font-family: Georgia, serif;
    color: #101096;
    padding: 0;
    margin: 0;
}
.content {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-width: 20em;
}
header {
    background-color: #7dd8d6;
    padding: .5em 1em;
}
main {
    background-color: #66FFB2;
    width: 100%;
    box-sizing: border-box;
    order: 2;
    padding: .5em;
}
.left,
.right {
    background-color: #49b4e7;
    box-sizing: border-box;
    padding: .5em;
    margin: 0;
    width: 100%;
}
.left {
    order: 1;
}
.right {
    order: 3
}
.left ul {
    list-style: none;
    padding: 0;
}
.left li {
    padding: .2em;
    display: inline-block;
}
footer {
    background-color: #7dd8d6;
    padding: .5em;
    clear: both;
    margin: 0;
}
@media screen and (min-width: 700px) {
    .content {
        display: block;
        height: calc(100vh - 8em);
        overflow-y: hidden;
        margin: 0;
    }
    main {
        position: relative;
        float: left;
        width: 100%;
        padding: .2em 13.5em;
        height: 100%;
    }
    .left {
        position: relative;
        float: left;
        margin-left: -100%;
        width: 12.5em;
        height: 100%;
    }
    .right {
        position: relative;
        float: right;
        margin-left: -100%;
        width: 12.5em;
        height: 100%;
    }
    .left li {
        display: block;
    }
    header {
        height: 6em;
    }
    footer {
        height: 2em;
    }
}

HTML

<header class="header">
    <h1>Title</h1>
</header>

<div class="content">
    <main class="main">
        <h2>Main Content</h2>
        <p> This is my solution to a "Holy Grail" CSS layout. My version also snaps into flex box at a small screen width.

<p> The rules of the "Holy Grail" are as follows: </p>
            <ol>
                <li>Have a fluid center with fixed width sidebars. </li>
                <li>Allow the center column to appear first in the source.</li>
                <li>Allow any column to be the tallest, require only a single extra div of markup.</li>
                <li>Require very simple CSS, with minimal hacks patches.</li>
            </ol>
            <p>Read more at: <a href="#" title="A List Apart dot com">AListApart.com</a>
            </p>
    </main>
    <aside class="left">
        <h3>Navigation</h3>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>RSS</li>
            <li>Contact</li>
        </ul>
    </aside>
    <aside class="right">
        <h3>Latest News</h3>
    </aside>
</div>

<footer>
    Footer
</footer>

经典3列布局模板：header+main content（三列）+footer。

html5, template

编辑器支持Emmet

快捷键

经典3列布局模板：header+main content（三列）+footer。

html5, template

一款不错的HTML5响应式个人主页模板

HTML5 CSS3新奇的响应式皂形网格布局页面模板 | mask-image使用示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：