Layout-2相关代码:3列布局代码演化[一]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.right,.left{height:300px;width:200px;}
.right{ float:right;background:#000000;}
.left{ float:left;background:#009933;}
.main{background:#F60; height:300px;}
</style>
</head>
<body>
<div class="right">RIGHT</div>
<div class="left">LEFT</div>
<div class="main">MAIN</div>
</body>
</html>
代码演化2:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.right, .left {
height: 300px;
width: 200px;
}
.right {
float: right;
background: #000000;
margin-right:10%;
}
.left {
float: left;
background: #009933;
margin-left:10%;
}
.main {
background: #F60;
height: 300px;
margin:0 10%;
}
</style>
</head>
<body>
<div class="right">RIGHT</div>
<div class="left">LEFT</div>
<div class="main">MAIN</div>
</body>
</html>
代码演化3:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#outbox {
width: 80%;
margin-right: auto;
margin-left: auto;
min-width:500px;
}
.right, .left {
height: 300px;
width: 200px;
}
.right {
float: right;
background: #000000;
}
.left {
float: left;
background: #009933;
}
.main {
background: #F60;
height: 300px;
} </style>
</head>
<body>
<div id="outbox">
<div class="right">RIGHT</div>
<div class="left">LEFT</div>
<div class="main">MAIN</div>
</div>
</body>
</html>
代码演化4：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
position: relative;
}
.right, .left {
height: 300px;
width: 200px;
z-index: 2;
}
.right {
position: absolute;
right: 0;
top: 0;
background: #000000;
}
.left {
position: absolute;
left: 0;
top: 0;
background: #009933;
}
.main {
margin-right: 200px;
background: #F60;
height: 300px;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="main">main</div>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</body>
</html>
Layout-2相关代码:3列布局代码演化[一]的更多相关文章
- Layout-3相关代码:3列布局代码演化[二]
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Layout-3相关代码:3列布局代码演化三]
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- CSS多列布局（实例）
前言 一列布局 二列布局 三列布局 1 一列布局 一列布局: HTML部分 <!DOCTYPE html> <html> <head> <meta chars ...
- 【Android】纯代码创建页面布局（含异步加载图片）
开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...
- Android利用setLayoutParams在代码中调整布局(Margin和居中)
我们平常可以直接在xml里设置margin,如: <ImageView android:layout_margin="5dip" android:src="@dra ...
- Layout 不可思议（二）—— 两侧定宽的三列布局
三列布局作为网页设计中最常见的布局,其实现方法早已被诸位前端大神摸透 网上相关的文章很多,原本已无必要再做赘述 不过既然开了 Layout 系列,三列布局就是必修课 本文整理了一些常用的实现方法,然后 ...
- 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）
代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
- java文件夹相关操作 演示样例代码
java文件夹相关操作 演示样例代码 package org.rui.io; import java.io.File; import java.io.FilenameFilter; import ja ...
- 使用Auto Layout中的VFL(Visual format language)--代码实现自动布局
使用Auto Layout中的VFL(Visual format language)--代码实现自动布局 2014-12-09 10:56 编辑: zhiwupei 分类:iOS开发 来源:机智的新手 ...
随机推荐
- nginx配置https转发http
生成ssl证书: 1.首先要生成服务器端的私钥,运行时会提示输入密码,此密码用于加密key文件: openssl genrsa -des3 -out server.key 1024 2.去除key文件 ...
- C#中的抽象类、抽象方法和虚方法
[抽象类]abstract 修饰符可与类和方法一起使用定义抽象类的目的是提供可由其子类共享的一般形式.子类可以根据自身需要扩展抽象类.抽象类不能实例化.抽象方法没有函数体.抽象方法必须在子类中给出具体 ...
- Java中switch对整型/字符型/字符串型具体实现细节
转自:http://www.hollischuang.com/archives/61 Java7中switch中支持的数据类型有: byte short int char String类型 其实swi ...
- axios 重复点击利用CancelToken阻止请求多次发送
import axios from 'axios'; axios.defaults.timeout = 5000; axios.defaults.baseURL =''; let pending = ...
- SQL中Union和Union All
工作中,看到大佬写的一段SQL,查询了五个表中的数据,最后求某个收入的总和,其中使用了Union All,因此在这里记录一下我从中学到的东西 先上语法 Union: [ Select语句1 ] U ...
- 我的代码-statistic analysis
# coding: utf-8 # In[1]: # numpy and pandas for data manipulationimport numpy as npimport pandas as ...
- hdu 1698 (延迟标记+区间修改+区间求和)
In the game of DotA, Pudge's meat hook is actually the most horrible thing for most of the heroes. T ...
- 记一次禁止chrome打印出现空白页的情况
项目中遇到一个问题:就是chrome浏览器打印时,会多少出一张空白页.经过Google,问题解决.
- Python控制台颜色
Python控制台颜色 格式:\033[显示方式;前景色;背景色m 说明: 前景色 背景色 颜色 30 40 黑色 31 41 红色 32 42 绿色 33 43 黃色 34 44 蓝色 35 45 ...
- 关于 lua table表存储函数且运用
--table 是lua的一种数据结构用来帮助我们创建不同的数据类型.如:数组和字典--lua table 使用关联型数组,你可以用任意类型的值来做数组的索引,但这个值不能是nil--lua tabl ...