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. [LeetCode] 918. Maximum Sum Circular Subarray 环形子数组的最大和

    Given a circular array C of integers represented by A, find the maximum possible sum of a non-empty ...

  2. [LeetCode] 694. Number of Distinct Islands 不同岛屿的个数

    Given a non-empty 2D array grid of 0's and 1's, an island is a group of 1's (representing land) conn ...

  3. mod35云掩膜产品用法

    在网上一直没找到一个明确说怎么用MOD35产品的,都是说去看用户手册,第一次看了过一段时间我又忘记怎么搞了,赶紧记下来. 而且现在才发现第一次自己搞的都弄错了. 简单的判断是否是云,只要读取mod35 ...

  4. QLayout及其子类 清除添加的widget

    起初,我的思路是,先取得Layout的items数量, 然后通过索引来移除每一个items,代码如下: QHBoxLayout * hly = new QHBoxLayout; ; i < ; ...

  5. ElasticSearch使用RestHighLevelClient进行搜索查询

    Elasticsearch Java API有四类client连接方式:TransportClient.  RestClient .Jest. Spring_Data_Elasticsearch.其中 ...

  6. 强大的Scala模式匹配

    用过Scala的模式匹配,感觉Java的弱爆了.Scala几乎可以匹配任何数据类型,如果默认的不能满足你的要求,你可以自定义模式匹配. 介绍Scala的模式匹配前,我们先了解清楚unapply()与u ...

  7. 深入学习 esp8266 wifimanager源码解析（打造专属自己的web配网）

    QQ技术互动交流群:ESP8266&32 物联网开发 群号622368884,不喜勿喷 单片机菜鸟博哥CSDN 1.前言 废话少说,本篇博文的目的就是深入学习 WifiManager 这个gi ...

  8. spring boot开启gzip

    Web服务使用Spring Boot2X且运行在Tomcat或者Jetty中,支持gzip压缩可以 修改配置文件 application.properties server.compression.e ...

  9. jsp之el表达式jstl标签

    不管是el表达式还是jstl标签最终的目的都是要消除jsp中的java代码,当然是消除显式的java代码 el表达式的出现是为了简化jsp中读取数据并写入页面的操作. el表达式的功能不多,也很好记 ...

  10. CentOS7部署vsftpd服务

    1.查看是否已经安装了vsftpd vsftpd -version 2.安装vsftpd(CentOS7) yum install -y vsftpd 3.新建FTP目录 创建的FTP目录如下: /d ...