兩個常規的頁面佈局方式

時間 2019-11-08

標籤兩個常規頁面佈局方式简体版

原文原文鏈接

表格佈局

html:css

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>表格佈局</title>
        <link rel="stylesheet" type="text/css" href="css/bgStyle.css" />
    </head>

    <body>
        <header></header>
        <nav></nav>
        <div class="content">
            <div class="tablecontent">
                <div class="tablerow">
                    <section id="left">
                        雜亂無章
                    </section>
                    <section id="main">
                        雜亂無章
                    </section>
                    <aside id="right">
                        雜亂無章
                    </aside>
                </div>
            </div>
        </div>
        <div class="foot">
            <footer></footer>
        </div>
    </body>

</html>

css:html

* {
    margin: 0px;
    padding: 0px;
}

html,
body {
    height: 100%;
    overflow: hidden;
    background-color: gray;
}

header {
    height: 100px;
    background-color: bisque;
    margin: 10px 10px 0 10px;
}

nav {
    height: 50px;
    background-color: blueviolet;
    margin: 10px 10px 0 10px;
}

.content {
    position: absolute;
    top: 170px;
    bottom: 100px;
    width: 100%;
}

.tablecontent {
    display: table;
    border-spacing: 10px;
    height: 100%;
    width: 100%;
}

.tablerow {
    display: table-row;
}

#left {
    display: table-cell;
    background-color: darkmagenta;
    width: 20%;
    vertical-align: top;
    padding: 15px;
    margin: 0 0 0 10px;
}

#main {
    display: table-cell;
    background-color: dodgerblue;
    width: 60%;
    padding: 15px;
    vertical-align: top;
}

#right {
    display: table-cell;
    background-color: lightcoral;
    width: 20%;
    padding: 15px;
    vertical-align: top;
}

.foot {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100px;
}

footer {
    height: 100px;
    background-color: brown;
    margin: 0 10px 10px 10px;
}

凝膠布局

html:ide

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>凝膠布局</title>
        <link rel="stylesheet" type="text/css" href="css/njStyle.css" />
    </head>

    <body>
        <header></header>
        <nav></nav>
        <div class="content clearfix">
            <section id="left">
                <article>
                    雜亂無章
                </article>
            </section>
            <section id="main">
                <article>
                    雜亂無章
                </article>
            </section>
            <aside id="right">
                <article>
                    雜亂無章
                </article>
            </aside>
        </div>
        <footer></footer>
    </body>

</html>

css：佈局

* {
    margin: 0px;
    padding: 0px;
}

html,
body {
    width: 800px;
    height: 100%;
    overflow: hidden;
    background-color: whitesmoke;
    margin-left: auto;
    margin-right: auto;
}

header {
    height: 100px;
    background-color: bisque;
    margin: 10px 10px 0 10px;
}

nav {
    height: 50px;
    background-color: blueviolet;
    margin: 10px;
}

.content {
    position: absolute;
    top: 180px;
    bottom: 110px;
    width: 800px;
    overflow: hidden;
}

#left {
    float: left;
    background-color: darkmagenta;
    width: 24%;
    margin: 0 0 10px 10px;
    height: 100%;
}

#main {
    position: absolute;
    left: 210px;
    right: 210px;
    background-color: dodgerblue;
    height: 100%;
}

#right {
    float: right;
    background-color: lightcoral;
    width: 24%;
    margin: 0 10px 0 0;
    height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
    width: 780px;
    height: 100px;
    background-color: brown;
    margin-left: 10px;
    margin-right: 10px;
}

article {
    vertical-align: top;
    padding: 15px;
}

.clearfix {
    zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    overflow: hidden;
}