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. MACbook安装WIN7后亮度调节的办法

     MACbook安装WIN7后亮度调节的办法:1.按WIN+X打开移动中心,第一个就是亮度调节.或者右击托盘区的电池,选择移动中心也可以.2.右击托盘区域的电池,选择电源管理,在界面中调节亮度. 3. ...

  2. ansys meshing划分无厚度的面

    优酷播放地址: https://v.youku.com/v_show/id_XNDQ3MjAyODYzMg==.html?spm=a2hzp.8244740.0.0 原版视频教程下载地址: https ...

  3. 用欧拉计划学Rust语言（第17~21题）

    最近想学习Libra数字货币的MOVE语言,发现它是用Rust编写的,所以先补一下Rust的基础知识.学习了一段时间,发现Rust的学习曲线非常陡峭,不过仍有快速入门的办法. 学习任何一项技能最怕没有 ...

  4. 常用HTTP状态码总结

    HTTP状态码(HTTP Status Code) 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明 (继续) 请求者应当继续提出请求. 服务器返回此代码表示已收到请求 ...

  5. java基础之----cookie，session，jwt

    概要 web中为什么要引入cookie.session机制,为了验证用户的身份,验证用户的身份是为了系统的安全,那如果是系统和系统之间的API调用怎么办呢?因为系统之间调用往往是没有用户系统的(用户系 ...

  6. C#：ref关键字和out关键字的区别

    1.在不使用关键字(比如ref关键字.out关键字等)修饰函数的情况下,大部分函数的参数是以值传递的方式,也就是说,“调用函数”在使用参数(比如myNumber)时,是把该参数复制多一份,然后将其传递 ...

  7. HTML+css基础 img 标签的属性

    img: src=”” src是标签的属性 等号右边是属性值.就是图片的路径. 路径 1. 绝对路径:按照一个路径能找到,具体到某一个盘符下,某一个文件夹内. 2. 相对路径:以当前页面为参考物,去查 ...

  8. PHP服务端优化全面总结

    一.优化PHP原则 1.1PHP代码的优化 (1)升级最新的PHP版本 鸟哥PPT里的对比数据,就是WordPress在PHP5.6执行100次会产生70亿次的CPU指令执行数目,而在PHP7中只需要 ...

  9. RabbitMQ消息中间件的用法

    1.什么是RabbitMQ RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然在同步消 ...

  10. node、npm、gulp安装

    1.先安装node.js ,官网下载地址:https://nodejs.org/en/ 2.安装完node之后,npm自动就安装了.可以直接在visual studio code 通过命令查看 nod ...