首先，我是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. 想要远程服务器长时间挂机不断开ssh连接的技巧

    使用top命令挂着就好了,top命令执行的“查看系统进程和资源占用”的任务会一直输出动态的数据,一直有数据传输就不会因为长时间挂机而断开ssh链接了,尤其针对于海外服务器,因为高延迟经常出现挂机久了自 ...

  2. Python 字符串常用方法 day2

    1.去空格和换行符: s = ' a bc ' print(s.strip())#strip(),去掉字符串两边的空格和换行符,无法去除中间的空格 print(s.rstrip())#rstrip() ...

  3. TensorFlow实战笔记（17）---TFlearn

    目录: 分布式Estimator 自定义模型 建立自己的机器学习Estimator 调节RunConfig运行时的参数 Experiment和LearnRunner 深度学习Estimator 深度神 ...

  4. wafII笔记

    wafII笔记:    组件的使用方法:        组件属性:                 属性的设置和获取通过option方法来完成 waf("#id").wafProm ...

  5. 【hihocoder 1329】平衡树·Splay(Splay做法)

    [题目链接]:http://hihocoder.com/problemset/problem/1329 [题意] [题解] 插入操作:-,记住每次插入之后都要把它放到根节点去就好; 询问操作:对于询问 ...

  6. lucene_04_解析语法查询

    解析语法查询就是调用方法查询的原始查询 例如: 查询所有的查询器的语法为:*:*,因为lucene查询是根据term来做的,既是:key:value类型.*:*表示所有域中的所有值. api调用语法解 ...

  7. x86、Linux、GNU、GNOME是什么

    一.指令集架构: 指令集架构(英语:Instruction Set Architecture,缩写为ISA),又称指令集或指令集体系,是计算机体系结构中与程序设计有关的部分,包含了基本数据类型,指令集 ...

  8. JAVA版本号微信公众账号开源项目版本号公布-jeewx1.0（捷微）

    JeeWx, 敏捷微信开发,简称"捷微". 捷微是一款免费开源的微信公众账号开发平台. 平台介绍: 一.简单介绍 jeewx是一个开源,高效.敏捷的微信开发平台採用JAVA语言,它 ...

  9. bootstrap checkbox

    在使用bootstrap库中的checkboxlistrow时,我想要依据checkbox是否至少选中了一个选项来确定页面的跳转,即须要在js中操作checkbox.这样就存在一个问题,一般的chec ...

  10. python Flask JQuery使用说明

    0.前言     近期因为某种原因再次学习Flask框架.借助博客整理相关内容.Flask框架和Apache+PHP存在少许不同,Flask框架中JS和CSS文件存放于一个相对固定的位置. 普通情况下 ...