首先，我是CSS盲[只听说过box model]，没动手实践过，关于margin padding只知名称，不明细节。刚看过一叶斋大哥关于css布局的博文，再动手实践，动手记录下点滴积累以备后用。

<!DOCTYPE>

    <html>

    <head>

    <style type="text/css">

        #header{background-color: gray;}

        #content{background-color: red;}

        #sidebar_left{background-color: blue;float:left;width:100;}

    #sidebar_left_left{background-color:gray;float:left;width:30}

    #sidebar_left_middle{background-color:green;margin:0 35px 0 35px;}

    #sidebar_left_right{background-color:yellow;float:right;width:30}

        #sidebar_right{background-color: green;float:right;width:160}

        #footer{background-color: yellow;}

    </style>

    </head>

    <body>

    <div id="page">

        <div id="header"><h1>这里是标题</h1></div>

        <div id="sidebar_left">

            <div id="sidebar_left_left"><p>左侧边栏左</p></div>

            <div id="sidebar_left_right"><p>左侧边栏右</p></div>

            <div id="sidebar_left_middle"><p>左侧边栏中中中中中中中中中</p></div>

        </div>

        <div id="sidebar_right">

            <p>侧边栏2：地图投影，是将地球表面投影到地图平面的过程，将地理坐标转换为平面直角坐

            标的过程。因为毕业论文需要，我重新回顾了一下地图投影的知识并且作了比较全面且简洁的总

            结。如果你之前未系统了解过地图投影，又对地图投影感兴趣，这篇博文也许能成为一篇简洁务

            实的阅读材料。</p>

        </div>

        <div id="content" style="margin-left:100;margin-right:160">

            <p>这里是一些文字</P>

            <p>再来一大段文字</P>

            <p>地图投影，是将地球表面投影到地图平面的过程，将地理坐标转换为平面直角坐标的过程。

            因为毕业论文需要，我重新回顾了一下地图投影的知识并且作了比较全面且简洁的总结。如果你

            之前未系统了解过地图投影，又对地图投影感兴趣，这篇博文也许能成为一篇简洁务实的阅读材

            料。</p>

        </div>

        <div id="footer" style="clear:both"><p>没人关注的页脚</P></div>

    </div>

    </body>

    </html>

细节可以参考一叶斋的博文。

自己的心得：

　　1.标题栏header占一行；页脚footer最下边(使用clear:both控制当中间红色部分比两边内容的height小时，依然独占一行，详见一叶斋博文)

　　2.右边绿色部分用float:right + width(100)控制；同样左边蓝色部分用float:left + width(150)控制；

　　3.主要一点，左蓝右绿的<div>在整个html文档中出现的顺序必须在中间红色部分之前。参见此文

　　4.中间content部分，即红色一段用margin控制其距浏览器左右边界的距离，margin:0 100(右绿的width) 0 150(左蓝的width);

　　以上四不就完成简单的header+中间(左栏+中栏+右栏)+footer的布局；以下是用同样的方法将左栏(蓝色部分)分成三部分：即分别用sidebar_left_left、sidebar_left_middle、sidebar_left_right的float和margin属性控制。

CSS 三栏布局入门的更多相关文章

  1. Css三栏布局自适应实现几种方法

    Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...

  2. css三栏布局方案整理

    日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 <!DOCTYPE htm ...

  3. 三种方法实现CSS三栏布局

    本文由云+社区发表 作者:前端林子 本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法 实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...

  4. CSS三栏布局

    一.绝对定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  5. CSS三栏布局的四种方法

    总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...

  6. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  7. CSS布局：Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  8. 转：CSS布局：Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  9. 记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。

    前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...

随机推荐

  1. 【剑指Offer】17、树的子结构

      题目描述:   输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构)   解题思路:   要查找树A中是否存在和树B结构一样的子树,我们可以分为两步:第一步, ...

  2. @dalao help!!!

  3. python爬虫03：那个叫做 Urllib 的库让我们的 python 假装是浏览器

    相信你已经摸清了 浏览器各种请求的套路 也知道了怎么在手机上进行请求和返回数据的抓取 那么接下来我们就开始来使用 python 了 代码 lu 起来 那么 怎么用 python 写各种请求呢? 今天要 ...

  4. C#学习笔记_01_基础内容

    01_基础内容 进(位)制 十进制:逢10进1,数字由0-9组成: 二进制:逢2进1,数字由0-1组成: 八进制:逢8进1,数字由0-7组成: 十六进制:逢16进1,数字由0-9和a-f组成: 进制转 ...

  5. tp5 封装百度地图api接口

    //服务器端api extend\Map <?php /** * 百度地图业务封装 */ class Map{ /** * 根据地址来获取经纬度 * @param $address */ pub ...

  6. [bzoj1610][Usaco2008 Feb]Line连线游戏_暴力枚举

    Line连线游戏 bzoj-1610 Usaco-2008 Feb 题目大意:Farmer John最近发明了一个游戏,来考验自命不凡的贝茜.游戏开始的时 候,FJ会给贝茜一块画着N (2 <= ...

  7. Eclipse没有Run On Server的问题解决

    1.[项目]->[右击]->[Properties]->[Project Facets]->[Modify Project],选择[Java]和[Dynamic Web Mod ...

  8. Eclipse全局搜索

    按[Ctrl]+[H] 搜索时支持一些正则表达式. 参考: http://blog.csdn.net/huaweitman/article/details/38709323

  9. 公众号和app和web都是客户端，都可以对接一个后台

    1.公众号和app和web都是客户端,都可以对接一个后台 2.域名中包含端口号吗?:不包括,不包括 3.目前在IIS服务器上搭建了一个网站,域名也申请了,可是80端口不能使用,可以使用8000,每次访 ...

  10. HDU 4528

    一直在纠结怎么样表示找到了人,,,开始时竟灰笨得设两个BOOL.后来参考别人的可以使用二进制位. 另外,此处有一个剪枝就是,就到达该点之后的状态的found(即找到人的状态)在之前已出现过,可以剪去. ...