2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

两个常规的页面布局方式

htmlcssjavascript作者:猿2048志愿者

表格布局

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哈哈自水一套还点指构框未制果定者域会通时近带货些丰是,的接架完是为广文或有过还近带货些丰是,的接架完是为广文或有过还近带货些丰是,的接架完是为广文或有过还近带货些丰是,的接架完是为广~

本文来源于网络:查看 >
« 上一篇:flask之二
» 下一篇:分享一下项目中用到过的小知识
猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
相关博文

分享“案例”中大奖

开始分享 中奖规则
分享链接:
联系方式:
2021-04-11中奖名单(每日10名)
×添加代码片段