html两大布局
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两大布局的更多相关文章
- 【转】Android开发学习笔记：5大布局方式详解
Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...
- Android开发5大布局方式详解
Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...
- 【Android开发学习笔记之一】5大布局方式详解
Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...
- css常见的各种布局上（两列布局）
常见的布局上(两列布局) 1.常见的两列布局 1.1左边固定,右边自适应,左边宽度已知,右边默认占满整行,使用left 左浮动,右边不浮动,设置margin-left:左侧宽度 <style&g ...
- css布局 - 工作中常见的两栏布局案例及分析
突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法.临时就在我经常浏览的网站上抓的相对应的截图.(以后看到其他类型的我再补充) 既然截了图,咱们就直接看人家使用的布局方式,毕 ...
- Android开发之5大布局方式详解
Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...
- css 两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
- CSS实现两栏布局
写在前面 两栏布局是指页面布局由主栏和边栏组成,是许多网页的布局方式,一般使用CSS去实现两栏布局. 实现两栏布局的方式有多种,这里采用四种比较常见的实现方式.主要是流体布局(liquid layou ...
- CSS读书笔记（1）---选择器和两列布局
(1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red" ...
随机推荐
- xshell 与服务器断开连接后 服务停止500internal error
看某教程用uwsgi +nginx运行django项目,但是xshell关掉之后服务会停止. 大佬一席话,胜趟十天坑. 把supervisor配置好之后正常运行. 如何配置?百度啊! 附录一个好的教程 ...
- 把 DataTable 输出到 excel 文件
''' <summary> ''' 把 DataTable 输出到 excel 文件 ''' </summary> ''' <param name="dt_da ...
- 推荐WEB 端批量移动设备管理控制工具STF
推荐WEB 端批量移动设备管理控制工具STF 1 官方网站 https://openstf.io/ 2 github https://github.com/openstf/stf 后面有时间了,抽空也 ...
- 结合Spring实现策略模式
最近系统需要对不同维度的数据进行差异化计算,也就会使用不同算法.为了以后更加容易扩展,结合Spring框架及策略模式对实现架构做了系统设计. 1. 定义策略接口(Strategy): import c ...
- eclipse web 新建servers时选中tomcat版本后不能继续操作,next是灰色.
解决方案: 1.退出 eclipse2.到[工程目录下]/.metadata/.plugins/org.eclipse.core.runtime3.把org.eclipse.wst.server.co ...
- Python 脚本如何执行另一个脚本
关于Python 脚本如何执行另一个脚本,可以使用os.system()来实现 os.system()的参数: 执行的命令 +执行的内容 举例说明: (1)显示当前文件夹下的全部目录和文件夹 os.s ...
- Oracle 自定义函数实现列转行效果
在 Oracle 领域,我相信一说到列转行大部分人都会立马想到 WM_CONCAT 函数,我觉得主要是因为该函数比较实用.但事实上 WM_CONCAT 并非官方公开函数,使用会存在一定的风险:函数返回 ...
- Prometheus PromSQL 常用资源
Prometheus PromSQL 常用资源 PromSQL 使用 运算乘:*除:/加:+减:- 函数 sum() 函数:求出找到所有value的值 irate() 函数:统计平均速率 by (标签 ...
- app 崩溃测试 （转：CSDN 我去热饭）
首先,崩溃有几种情况: 闪退 提示停止运行 无响应 ( 不同情况虽然没有严格意义上区分开引起原因,但是都有侧重.在之后的工作中,我会实时补充统计.) 1.接口返回值 ［直接原因］:app无法解析接口返 ...
- Linux ip Command
Syntax ip OBJECT COMMAND ip [options] OBJECT COMMAND ip OBJECT help Understanding ip command OBJECTS ...