首先，我是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. 01 DOS常用命令

    有时候没有可视化窗口,命令行对文件进行操作更方便快捷 cmd 命令弹出 dir 查看当前所在目录下的文件 ctrl+c 退出 \a 显示隐藏文件 cd /改变到根目录 dir /a 显示隐藏文件 di ...

  2. linux 下取进程占用 cpu/内存 最高的前10个进程

    linux下获取占用CPU资源最多的10个进程,可以使用如下命令组合: ;|head linux下获取占用内存资源最多的10个进程,可以使用如下命令组合: ;|head 命令组合解析(针对CPU的,M ...

  3. UIAutomator定位简介

    UIAutomator元素定位是 Android 系统原生支持的定位方式,虽然与 xpath 类似,但比它更加好用,且支持元素全部属性定位.定位原理是通过android 自带的android uiau ...

  4. 【编程工具】Vim编辑器的使用

    1.Vim简介   Vim最初起源于古老的贝尔实验室,由"Bram Moolenaar等人"开发,是一个功能强大的文本编辑器,被推崇为类Vi编辑器中最好的一个.   Vim是一个类 ...

  5. C#第七节课

    for嵌套 using System;using System.Collections.Generic;using System.Linq;using System.Text;using System ...

  6. js-2018-11-09 关于Array中的srot()方法和compare()方法

    Array中的srot()方法 sort()方法是用来重排序的方法.在默认情况下,sort()方法按升序排列数组项----即最小的值位于最前面,最大的值排在最后面. 我们看看官方是怎么说的: arra ...

  7. 【例题4-2 uva489】Hangman Judge

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 水题. 中间就赢了算赢.(重复说,算错 [代码] #include <bits/stdc++.h> using name ...

  8. dubbo-源码阅读之bean装配过程(四)

    Spring自定义schema 我们再使用dubbo进行时 会经常看到这样的标签 <!--开启注解扫描--> <context:component-scan base-package ...

  9. mongodb-replication set 复制集

    推荐一篇mongodb集群的博客 replication set 多台服务器维护相同的数据副本,提高服务的可用性 1.启动3个实例,且声明属于某复制集 mongod --port 27017 --db ...

  10. Data Binding Guide——google官方文档翻译（下）

    这篇博客是Data Binding Guide官网文档翻译的下篇.假设没看过前半部分翻译的能够先看Data Binding Guide--google官方文档翻译(上)  一,数据对象 不论什么不含业 ...