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. Express服务器开发

    作者 | Jeskson 来源 | 达达前端小酒馆 Express服务器开发 创建Express应用程序,Express路由,pug视图模板的使用 Express简介: 让我们来创建Express应用 ...

  2. [LeetCode] 723. Candy Crush 糖果消消乐

    This question is about implementing a basic elimination algorithm for Candy Crush. Given a 2D intege ...

  3. Java GUI ： 实现排序算法的动态演示

    0.用到的jar包 jcommon-1.0.16.jar.jfreechart-1.0.13.jar 1.实现思路 自定义一个类---用于存放排序算法的操作状态--SortEntity 定义一个方法类 ...

  4. MATLAB 赋值命令计算结果在命令窗口显示结果

    MATLAB 赋值命令计算结果在命令窗口显示结果 MATLAB如何控制计算结果是否显示在命令窗口 在运算结方程或者设定参数后面加分号也就是 ; 命令窗口就不会显示这些参数或结果了.举个例子clccle ...

  5. windbg排查线上线程数爆炸问题

    1.早上发现有个job的线程数一直居高不下 2.于是dump一个文件拉到本地,查到都在执行 StartInner方法 3.查询代码,此方法是个静态类开启线程的地方,理论上没有任何问题 4.思索了半天, ...

  6. 动手学深度学习5-softmax回归

    softmax回归 softmax 回归模型 单样本分类的矢量计算表达式 小批量样本分类的矢量计算表达式 交叉熵损失函数 模型预测以及评价 小结 softmax回归 前几节介绍的是线性回归模型适用于输 ...

  7. Using MS Soap toolkit to generate web services .md

    Different SOAP encoding styles - RPC, RPC-literal, and document-literal SOAP Remote Procedure Call(R ...

  8. Laravel源码解析之model（代码）

    本篇文章给大家带来的内容是关于Laravel源码解析之model(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 前言 提前预祝猿人们国庆快乐,吃好.喝好.玩好,我会在电视上看 ...

  9. 通过IP获取MAC地址例子（应用层）

    博客地址:http://home.cnblogs.com/u/zengjianrong/ 由于某种需求,需要获取某个ip的mac地址,在应用层实现例子如下代码. 流程:1. 先遍历arp表,若存在对应 ...

  10. centos安装sftp服务

    一.创建sftp服务数据目录及相关测试用户 [root@localhost ~]# mkdir -pv /data/sftp/ #sftp数据目录 [root@localhost ~]# chown ...