两个常规的页面布局方式

表格布局

html:

<!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:

     
* {
    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:

<!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;
}

图片描述

图中例子是引用<<Head First HTML 与 CSS>>一书,为本人自己发挥所写，可能比较肤浅，大牛可绕过或者多指点指点。。。O(∩_∩)O哈哈~

两个常规的页面布局方式

表格布局

凝胶布局

靳先森

引用和评论

Ubuntu下安装wget

2025年最新反编译微信小程序的教程及工具

手写一个动态海洋和天空效果的vue hooks

你可能不知道的图片加载相关知识

原生JS大揭秘—JS代码执行原理解刨

使用CSS给标题添加书名号并超出省略

原生electron起步-从零到一完成构建和打包