CSS页面布局

leoperfect 发布于2019-08-29 12:20 / 2050人阅读

摘要：实现三栏布局，中间自适应负值法放第一行首尾高度固定中间自适应的布局兼容头部中间置顶中间中间到底尾部针对设定的布局粘连置于底部方法一在上用负的粘连置于底部方法二在上用负的

实现三栏布局，中间自适应（margin负值法）


middle
left
right

body {
    margin: 0;
    padding: 0;
}

.left, .right {
    height: 300px;
    width: 200px;
    float: left;
}

.right {
    margin-left: -200px;
    background-color: red;
}

.left {
    margin-left: -100%;
    background-color: #00ff00;
}

.middle {
    height: 300px;
    width: 100%;
    float: left;
    background-color: blue;
}

首尾高度固定、中间自适应的DIV布局（兼容IE6）

html, body {
    margin: 0;
    /*padding: 0;*/
    height: 100%;
    overflow: hidden;
}

.top, .bottom {
    width: 100%;
    height: 50px;
    position: absolute;
}

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

html, body, .container {
    height: 100%;
    width: 100%;
}

div {
    position: absolute;
}

.top, .bottom {
    width: 100%;
    height: 100px;
    z-index: 5;
}*/

.top {
    background: red;
    top: 0;
}

.bottom {
    background: #00ff00;
    bottom: 0;
}

.middle {
    width: 100%;
    top: 50px;
    bottom: 50px;
    background: #a7fad7;
    overflow: auto;
    position: absolute;
    /*针对ie6设定的hack*/
    _height: 100%;
    _border-top: -100px solid #eee;
    _border-bottom: -100px solid #eee;
    _top: 0;
}

flex-box布局


    
        Main Content
        I"m first in the source order.
        The key to victory is discipline, and that means a well made bed. You will practice until you can make your
            bed in your sleep. Fry, we have a crate to deliver. Hey, guess what you"re accessories to.
        I"ll get my kit! That"s not soon enough! Oh, all right, I am. But if anything happens to me, tell them I died
            robbing some old man.
    
    
        Nav
        
            Home
            About
            Clients
            Contact Us
        
    
    
        Sidebar
        I am a rather effortless column of equal height.

body {
    padding: 2em;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

h1, h2 {
    font: bold 2em Sans-serif;
    margin: 0 0 1em 0;
}

h2 {
    font-size: 1.5em;
}

p {
    margin: 0 0 1em 0;
}

.page-wrap {
    display: flex;
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
}

.main-content,
.main-sidebar,
.main-nav {
    padding: 1em;
}

.main-content {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    order: 2;
    width: 60%;
    -moz-box-flex: 1;
    background: white;
}

.main-nav {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    order: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    width: 20%;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: #ccc;
}

.main-sidebar {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 3;
    order: 3;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    width: 20%;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    background: #ccc;
}

粘连 Footer 置于底部-方法一

HTML


    在 wrapper 上用负的 margin-bottom
    
        
    
    


    Footer

CSS

html, body {
    height: 100%;
    margin: 0;
}

.content {
    min-height: 100%;
    padding: 20px;
    margin: 0 auto -50px;
}

.footer,
.push {
    height: 50px;
    padding: 20px;
}

JS

$("#add").on("click", function () {
    $("Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.").insertBefore(".push");
});

粘连 Footer 置于底部-方法二

HTML


    
        在 footer 上用负的 margin-top
        
            
        
    



    Footer

CSS

html, body {
    height: 100%;
    margin: 0;
}

.content {
    min-height: 100%;
}

.content-inside {
    padding: 20px;
    padding-bottom: 50px;
}

.footer {
    height: 50px;
    margin-top: -50px;
}

JS

$("#add").on("click", function () {
    $("Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.").appendTo(".content-inside");
});

GPU云服务器云服务器 css布局 css布局教程学习css布局页面布局

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

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

H5多列布局

摘要：多列布局基本概念多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。在网页制作时采用层叠样式表技术，可以有效地对页面的布局字体颜色背景和其它效果实现更加精确的控制。多列布局基本概念 1、多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ -webkit...

Jingbin_ 2019-08-29 16:15 评论0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。在网页制作时采用层叠样式表技术，可以有效地对页面的布局字体颜色背景和其它效果实现更加精确的控制。多列布局基本概念 1、多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ -webkit...

mayaohua 2019-08-02 11:08 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
CSS 常用布局在小程序中的应用

摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。正常文...

garfileo 2019-08-30 11:25 评论0 收藏0
CSS 常用布局在小程序中的应用

摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。正常文...

CoderDock 2019-08-30 15:44 评论0 收藏0