两个常规的页面布局方式

feng409 发布于2019-08-29 15:16 / 677人阅读

摘要：表格布局表格布局杂乱无章杂乱无章杂乱无章凝胶布局凝胶布局杂乱无章杂乱无章杂乱无章图中例子是引用与一书为本人自己发挥所写，可能比较肤浅，大牛可绕过或者多指点指点。。。

表格布局

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:

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

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

GPU云服务器云服务器 js获取两个页面的数据类型 android布局方式页面布局 html页面布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113206.html

两个常规的页面布局方式

摘要：表格布局表格布局杂乱无章杂乱无章杂乱无章凝胶布局凝胶布局杂乱无章杂乱无章杂乱无章图中例子是引用与一书为本人自己发挥所写，可能比较肤浅，大牛可绕过或者多指点指点。。。表格布局 html: 表格布局 ...

赵春朋 2019-08-22 16:57 评论0 收藏0
两个常规的页面布局方式

摘要：表格布局表格布局杂乱无章杂乱无章杂乱无章凝胶布局凝胶布局杂乱无章杂乱无章杂乱无章图中例子是引用与一书为本人自己发挥所写，可能比较肤浅，大牛可绕过或者多指点指点。。。表格布局 html: 表格布局 ...

xorpay 2019-08-02 10:20 评论0 收藏0
CSS中重要的BFC

摘要：中有个重要的概念，搞懂可以让我们理解中某些原本诡异的地方。简介在解释之前，先说一下文档流。我们常说的文档流其实分为定位流浮动流普通流三种。使用包含浮动元素注意，这里触发并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。 CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位...

plus2047 2019-08-29 14:20 评论0 收藏0
CSS学习笔记(六) 元素定位

摘要：方法一为父元素添加方法二同时浮动元素方法三添加非浮动的清除元素定位布局的核心是属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。绝对定位绝对定位会把元素彻底从文档流中拿出来，然后相对于其他元素默认是定位上下文定位。 1.盒模型盒模型，就是浏览器为页面中的每个 HTML 元素生成的矩形盒子。这些盒子们都要按照可见版式模型（visual formattin...

浠ラ箍 2019-08-28 18:03 评论0 收藏0
解剖CSS布局原理

摘要：前言本文将带你重新认识布局，带你解剖布局原理，前提是你要有基础本文将解除你在布局方面的疑惑。以下将对布局元素和文档流进行详细讲解。而且还能保持文档流，这是其他元素做不到的。前言本文将带你重新认识CSS布局，带你解剖布局原理，前提是你要有基础！本文将解除你在布局方面的疑惑。认识每个布局元素，了解他们的特性，你才知道为什么会是这样的结果。本文内容纯属个人理解，不代表官方。此文主要为理...

李文鹏 2019-08-29 12:28 评论0 收藏0