如下图：

需求：

1. 如图

2. 可以从body标签开始。

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <style>

         #content {

             overflow: hidden;

         }

         .column-left {

             float: left;

             width: 200px;

             min-height: 500px;

         }

         .column-right {

             margin: 25px 25px 25px 225px;

             min-height: 500px;

         }

     </style>

 </head>

 <body>

     <div id="header" style="height: 50px; background: blue;">

     </div>

     <div id="content">

         <div class="column-left" style="background-color: purple;">

         </div>

         <div class="column-right" style="background-color: yellow;">

         </div>

     </div>

 </body>

 </html>

HTML和CSS经典布局2的更多相关文章

  1. css经典布局——头尾固定高度中间高度自适应布局

    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...

  2. css经典布局之左侧固定大小右侧自动适应

    最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会出现一堆饭的列表,左侧是饭的分类,右侧是 ...

  3. 只要一行代码，实现五种 CSS 经典布局

    常用的页面布局,其实就那么几个.下面我会介绍5个经典布局,只要掌握了它们,就能应对绝大多数常规页面. 这几个布局都是自适应的,自动适配桌面设备和移动设备.代码实现很简单,核心代码只有一行,有很大的学习 ...

  4. css经典布局学习

    ． 布局 布局是css的重头戏,每个系统的布局都有其各自的特点.无好无坏,肯定是各有优缺点,不妨拿出几个比较典型的例子来一起分析一下.例如: 经典三列布局 Bootstrap栅格布局 百度首页布局 微 ...

  5. CSS经典布局-圣杯布局、双飞翼布局

    圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...

  6. css经典布局—Sticky footers布局

    参考:http://www.w3cplus.com/CSS3/css-secrets/sticky-footers.html 效果:将footer固定到底部.文章内容不足满屏时 footer在底部,超 ...

  7. css经典布局之双飞翼

    经典的两个布局方式有圣杯布局和双飞翼布局,圣杯布局主要用在国外,双飞翼布局是淘宝的UED团队开发的,优化了圣杯布局.   主要解决页面分不同列显示的问题,   一般只做页面的时候,我们分三部分,左边, ...

  8. CSS经典布局之弹性布局

    当我们在浏览浏览器的时候,经常会放大/缩小浏览器的显示比例,或者在不同的设备上.所处的分辨率也不尽同样. 因此.我们须要学习一个新的知识:弹性盒模型. 弹性盒模型 实现项目对齐,方向,排序(即使项目大 ...

  9. css经典布局—stick footer布局

    html部分 <div id="wrap"> <div id="main" class="clearfix"> &l ...

  10. CSS经典布局——圣杯布局与双飞翼布局

    一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...

随机推荐

  1. Git版本控制管理学习笔记5-提交

        这个标题其实有些让人费解,因为会想这个提交是动词还是名称?     提交动作是通过git commit命令来实现的,提交之后会在对象库中新增一个提交对象.提交过程中会发生哪些变化,在上一篇笔记 ...

  2. 【转载】 wpf无边框的方法以及拖拽的问题

    今天在做wpf程序的时候遇到了一个制作无边框的窗体并且有透明圆角的问题,我把解决的过程写下来,和大家学习 正常窗体必须把WindowStyle="None"这个属性加上去,但是加上 ...

  3. poj上的dp专题

    更新中... http://poj.org/problem?id=1037 dp[i][j][0]表示序列长度为i,以j开始并且前两位下降的合法序列数目; dp[i][j][1]表示序列长度为i, 以 ...

  4. Redis 数据库入门指南

    Redis 是一个开源数据库,它使用内存数据结构存储,可作为数据库.缓存和消息代理使用.Redis 支持丰富的数据结构,有:字符串(Strings).哈希(Hashs).列表(Lists).集合(Se ...

  5. Android 谈谈封装那些事 --BaseActivity 和 BaseFragment(二)

      1.前言 昨天谈了BaseActivity的封装,Android谈谈封装那些事--BaseActivity和BaseFragment(一)有很多小伙伴提了很多建议,比如: 通用标题栏可以自定义Vi ...

  6. UVA 11168 Airport（凸包+直线方程）

    题意:给你n[1,10000]个点,求出一条直线,让所有的点都在都在直线的一侧并且到直线的距离总和最小,输出最小平均值(最小值除以点数) 题解:根据题意可以知道任意角度画一条直线(所有点都在一边),然 ...

  7. 安装openssl 扩展的时候出现Cannot find config.m4. Make sure that you run '/usr/local/php/bin/phpize' in the top level source directory of the module的解决方法

    进入php源码包目录:cd /usr/local/php-5.6.25/ext/openssl 执行命令:  cp ./config0.m4 ./config.m4 即可

  8. Tween Animation---Scale渐变尺寸缩放动画

    博主都是自己把代码测试过了才给大家分享的 在res/创建一个anim文件夹用来保存动画属性的xml 新建一个scale.xml <?xml version="1.0" enc ...

  9. 【转】C/S,B/S区别

    C/S结构,即Client/Server(客户机/服务器)结构,是大家熟知的软件系统体系结构,通过将任务合理分配到Client端和Server端,降低了系统的通讯开销,可以充分利用两端硬件环境的优势. ...

  10. js 判断浏览器和ie版本号 收集

    function testB () { // body... var isOpera = !!window.opera ||!!window.opr|| navigator.userAgent.ind ...