首先，我是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. bzoj 4994: [Usaco2017 Feb]Why Did the Cow Cross the Road III 树状数组_排序

    Description 给定长度为2N的序列,1~N各处现过2次,i第一次出现位置记为ai,第二次记为bi,求满足ai<aj<bi<bj的对数 题解: 方法一: 搞一个KDtree, ...

  2. Labview学习笔记（一）

    一.概述 Labview是一种工业标准图形化编程工具,主要用于开发测试.测量与控制系统,拥有一个可以完成任何编程任务的庞大函数库,包括数据采集.GPIB.串口控制.数据分析.数据显示及数据存储等. L ...

  3. sqlserver 和MySQL的一些函数的区别

    相同的表数据在sqlserver和MySQL中使用各自的函数得到相同的结果,如下表 drop table tb;create table tb(id int, value1 varchar(10), ...

  4. Codeforces 898D - Alarm Clock

    传送门:http://codeforces.com/contest/898/problem/D 有n个闹钟,第i(1≤i≤n)个闹钟将在第ai(1≤ai≤106)分钟鸣响,鸣响时间为一分钟.当在连续的 ...

  5. Spring Boot-properties使用(二)

    自定义属性 @value注入 在application.properties新增配置 student.name=小明student.age=12student.info=${student.name} ...

  6. java里面的队列

    非阻塞无界队列 ConcurrentLinkedQueue   public static void main(String[] args) throws InterruptedException { ...

  7. eclipse断点调试教程

    1.断点就是你希望程序运行到哪暂停, 2.断点就是你希望程序运行到哪暂停, 3.断点就是你希望程序运行到哪暂停,断点往往就是你觉得程序可能出错的地方.  设定断点的办法很简单,在你认为出错的那一行的行 ...

  8. HDU 3002

    无向图最小割. #include <iostream> #include <cstdio> #include <cstring> using namespace s ...

  9. 很实用的50个CSS代码片段

    原文:50 Useful CSS Snippets Every Designer Should Have          面对每年如此多的 新趋势 ,保持行业的率先是个非常困难问题. 站点设计者和前 ...

  10. python爬虫解决百度贴吧登陆验证码问题

    作为贴吧重度用户,写了个贴吧爬虫脚本 抄了一些别人的代码.记得有个验证码解决的.可是忘了链接了,今天最终自己攻克了. 首先要让登陆须要验证码,不停地登陆就好了...度娘非常快会加上验证码大法的... ...