html布局之圣杯布局

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>圣杯布局</title>

    <link href="buju1.css" type="text/css" rel="stylesheet"/>

</head>

<body>

<<div class="container">

    <div class="main"></div>

    <div class="sub"></div>

    <div class="extra"></div>

</div>

</body>

</html>

CSS

body {

    min-width: 600px; /* 2*sub + extra */

}

.container {

    padding-left: 210px;

    padding-right: 190px;

}

.main {

    float: left;

    width: 100%;

    height: 300px;

    background-color: rgba(255, 0, 0, .5);

}

.sub {

    position: relative;

    left: -210px;

    float: left;

    width: 200px;

    height: 300px;

    margin-left: -100%;

    background-color: rgba(0, 255, 0, .5);

}

.extra {

    position: relative;

    right: -190px;

    float: left;

    width: 180px;

    height: 300px;

    margin-left: -180px;

    background-color: rgba(0, 0, 255, .5);

}

样式布局之双飞翼布局

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>双飞翼布局</title>

    <link href="buju.css" type="text/css" rel="stylesheet"/>

</head>

<body>

<div class="main-wrapper">

    <div class="main"></div>

</div>

<div class="sub"></div>

<div class="extra"></div>

</body>

</html>

css

.main-wrapper {

    float: left;

    width: 100%;

}

.main {

    height: 300px;

    margin-left: 210px;

    margin-right: 190px;

    background-color: rgba(255, 0, 0, .5);

}

.sub {

    float: left;

    width: 200px;

    height: 300px;

    margin-left: -100%;//这个地方要注意了margin-left设置为负值得话，位置往左移动，当移出这一行时，就会跑到上一行去，然后继续往左移动，如果margin-left设置为正值的话，位置就会往右移动，并且会一直往右动，并不会跳到下一行去。

    background-color: rgba(0, 255, 0, .5);

}

.extra {

    float: left;

    width: 180px;

    height: 300px;

    margin-left: -180px;

    background-color: rgba(0, 0, 255, .5);

}

html两大布局的更多相关文章

  1. 【转】Android开发学习笔记：5大布局方式详解

    Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...

  2. Android开发5大布局方式详解

    Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...

  3. 【Android开发学习笔记之一】5大布局方式详解

    Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...

  4. css常见的各种布局上（两列布局）

    常见的布局上(两列布局) 1.常见的两列布局 1.1左边固定,右边自适应,左边宽度已知,右边默认占满整行,使用left 左浮动,右边不浮动,设置margin-left:左侧宽度 <style&g ...

  5. css布局 - 工作中常见的两栏布局案例及分析

    突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法.临时就在我经常浏览的网站上抓的相对应的截图.(以后看到其他类型的我再补充) 既然截了图,咱们就直接看人家使用的布局方式,毕 ...

  6. Android开发之5大布局方式详解

    Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...

  7. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  8. CSS实现两栏布局

    写在前面 两栏布局是指页面布局由主栏和边栏组成,是许多网页的布局方式,一般使用CSS去实现两栏布局. 实现两栏布局的方式有多种,这里采用四种比较常见的实现方式.主要是流体布局(liquid layou ...

  9. CSS读书笔记（1）---选择器和两列布局

    (1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red" ...

随机推荐

  1. android 完全退出实现

    实现方法是在application中定义一个集合存储所有的Activity对象,在Activity创建时添加进集合中,在程序退出时,finish掉所有的Activity即可. 步骤如下: 1.自定义A ...

  2. TextView实现文字水平滚动效果

    有时候我们使用TextView显示文本,只想把所有内容用一行显示出来,但是一行又显示不完,就需要让文本实现水平滚动的效果. 具体实现方法如下: 1,实现自定义TextView并实现isFocused( ...

  3. git拆分仓库

    1.git filter-branch拆分当前分支 修改仓库目录,改成拆分后的结构 创建一个当前分支的拷贝分支 git filter-branch -f --tag-name-filter cat - ...

  4. 第20课 unique_ptr独占型智能指针

    一. unique_ptr的基本用法 (一)初始化方式 1. 直接初始化:unique<T> myPtr(new T);  //ok.但不能通过隐式转换来构造,如unique<T&g ...

  5. 小记：iterator && auto

    小记:iterator && auto iterator 众所周知,我们有一种强大的东西,它叫做STL,比如queue.vector.set.map.multimap .deque等. ...

  6. Scala中sortBy和Spark中sortBy区别

    Scala中sortBy是以方法的形式存在的,并且是作用在Array或List集合排序上,并且这个sortBy默认只能升序,除非实现隐式转换或调用reverse方法才能实现降序,Spark中sortB ...

  7. 《 .NET并发编程实战》实战习题集 - 3 - CRUD项目中使用FP

    先发表生成URL以印在书里面.等书籍正式出版销售后会公开内容.

  8. 使用Ueditor上传图片到图片服务器（二）

    上一篇主要写了前端部分如何配置ueditor的上传路径,已经jsp页面中如何使用ueditor的编辑器功能以及如何配置单独的图片上传功能. 这一篇,我分两部分:第一部分是搭建图片服务器以及配置ftp上 ...

  9. 《EOPL》 : 实现了 call/cc

    待填坑 完整代码:scheme-code/EOPL/ch5/4-LETREC (CPS)-Exception-扩展/exer-5.43__★callcc/

  10. 基于第三方vuejs库组件做适配性个性开发

    相信大家在使用vuejs时候会用到很多的第三方库,能够找到适合自己的库并且加以使用可以大大加快进度,减少bug.但是很多时候会出现这样一个尴尬的境地: 基线的第三方组件并不能很好地满足我们自己地需求, ...