一些网站整体布局代码

一栏水平居中布局

在网页布局中，常会用到单栏水平居中布局，水平居中布局实现方式与很多

1. inline-block + text-align
2. table + margin
3. absolute + transform

inline-block + text-align

浏览器兼容性较好，但text-align具有继承性，如果需要子元素左对齐，需要重新设置样式

实例

<div class="main">
    <div class="box">内容</div>
</div>
<style>
    *{
        margin: 0; padding: 0;
    }
    .main{
        background: #f0a1a8;
        text-align: center; /* 为内容设置对齐方式 */
    }
    .box{
        width: 1200px;
        height: 800px;
        background: #2376b7;
        display: inline-block;/* 更改标签模式 */
    }
</style>

演示地址

table + margin

只需要对子级元素进行设置，但如果子元素设置position脱离文档流，会导致margin属性失效

实例

<div class="main">
    <div class="box">内容</div>
</div>
<style>
    *{
        margin: 0; padding: 0;
    }
    .main{
        background: #f0a1a8;
    }
    .box{
        width: 1200px;
        height: 800px;
        margin: 0 auto;  /* 根据浏览器左右自适应等分 */
        background: #2376b7;
        display: table;   /*或者： display: block; */
    }
</style>

演示地址

absolute + transform

父级元素是否脱离文档流，不影响子级元素水平居中，但ransform是CSS3新增的，有浏览器兼容的问题

实例

<div class="main">
    <div class="box">内容</div>
</div>
<style>
    *{
        margin: 0; padding: 0;
    }
    .main{
        background: #f0a1a8;
        height: 500px;
        position: relative;  /* 父级元素开启定位 */
    }
    .box{
        width: 1200px;
        height: 500px;
        background: #93b5cf;
        position: absolute; 
        left: 50%;
        transform: translateX(-50%); /* 偏移 */
        
    }
</style>

演示地址

三栏布局双飞翼和圣杯布局

圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染

双飞翼布局

双飞翼布局是将一个网页分为左列、中列和右列三部分，并且我们要得到的效果是：左列和右列宽度恒定，中间列的宽度根据浏览器窗口的大小自适应

实例

<div class="container">
    <div class="column center">中</div>
    <div class="column left">左</div>
    <div class="column right">右</div>
</div>
<style>
    *{margin: 0; padding: 0;}
    body{text-align: center;}
    /* 双飞翼布局 */
    .container{
        width: 100%;
        overflow: hidden;
    }
    .column{
        float: left;
        height: 500px;
    }
    .left{
        width: 300px;
        background-color: #1685a9;
        margin-left: -100%;
    }
    .center{
        width: 100%;
        background-color: #ff2d51;
    }
    .right{
        width: 300px;
        background-color: #bce672;
        margin-left: -300px;
    }
</style>

演示地址

圣杯布局

圣杯布局和双飞翼布局实现的问题都是三列布局，两边定宽，中间自适应布局

实现方式：左侧和右侧固定宽度，中间是流动布局

实例

<div class="container">
    <div class="column center">中</div>
    <div class="column left">左</div>
    <div class="column right">右</div>
</div>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        min-width: 600px;
    }
    /*主体*/
    .container{
        padding: 0 200px;
        overflow: hidden;
    }
    .column{
        float: left;
        height: 500px;
        position: relative;
    }
    .left{
        width: 200px;
        background-color: #44cef6;
        margin-left: -100%;
        left: -200px;
    }
    .center{
        width: 100%;
        background-color: #f00056;
    }
    .right{
        width: 200px;
        background-color: #9ed900;
        margin-left: -200px;
        right:-200px;
    }
</style>

演示地址

侧边栏布局

两列右侧自适应布局

实例

<div class="container">
    <div class="left">左侧固定</div>
    <div class="right">右侧自适应</div>
</div>
<style>
    body{
        font-size: 18px;
        min-width: 600px;
    }
    .container{
        width: 100%;
        overflow: hidden;
    }
    .left{
        width: 150px;
        height: 200px;/* 实际开发中，不要给出高度，高度是由内容自行撑开 */
        float: left;
        background-color: #f00;
        color: #fff;
        margin-right: -150px;
        position: relative;
    }
    .right{
        width: 100%;
        height: 200px;
        float: left;
        background-color: #0f0;
        color: #fff;
        margin-left: 155px;
    }
</style>

演示地址

三列中间自适应

实例

<div class="container">
    <div class="left">左侧固定</div>
    <div class="center">
        <div class="content">中间自适应</div>
    </div>
    <div class="right">右侧固定</div>
</div>
<style>
    .container{
        color: #fff;
        overflow: hidden;
    }
    .left,.right{
        float: left;

        height: 200px;
        line-height: 200px;
        position: relative;
    }
    .left{
        width: 200px;
        background-color: #00ff00;
        margin-right: -200px;
    }
    .center{
        float: left;
        width: 100%;
        background-color: #ff0;
        line-height: 200px;
    }
    .content{
        margin: 0 200px;
    }
    .right{
        width: 150px;
        background-color: #0ff;
        margin-left: -150px;
    }
</style>

演示地址

三列左侧自适应布局

实例

<div class="container">
    <div class="left">
        <div class="content">左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应</div>
    </div>
    <div class="right">右侧定宽</div>
    <div class="center">中间定宽</div>
</div>
<style>
    .container{
        color: #fff;
        overflow: hidden;
    }
    .left{
        width: 100%;
        float: left;
        background-color: #ad513d;
        margin-right: -300px;
    }
    .content{
        height: 200px;
        line-height: 200px;
        margin-right: 300px;
    }
    .center,.right{
        float: right;
        width: 150px;
        height: 200px;
        line-height: 200px;
    }
    .center{
        background-color: #44ffc5;
    }
    .right{
        background-color: #ff6bb1;
    }
</style>

演示地址