css实现上下左右布局
<!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=gb2312" />
<title> </title>
<style type="text/css">
#head{
height:40px;
background-color:#0033CC;
margin:0;
}
#content{
background:#CCCCCC;
height:200px;
margin:0;
}
#left{
width:20%;
height:200px;
background:#CCCC66;
float:left;
margin:0;
}
#c{
width:60%;
height:200px;
background:red;
margin:0;
float:left;
}
#right{
width:20%;
height:200px;
background:#339966;
float:right;
margin:0;
}
#foot{
background:#0099CC;
height:40px;
margin:0;
}
</style>
</head>
<body>
<div id="head">head</div>
<div id="content">
<div id="left">left</div>
<div id="c">content</div>
<div id="right">rigth</div>
</div>
<div id="foot">foot</div>
</body>
</html>
来源http://www.cnblogs.com/8765h/p/3512116.html
css实现上下左右布局的更多相关文章
- CSS HTML元素布局及Display属性
本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...
- CSS多列布局
× 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...
- DIV+CSS常用网页布局技巧！
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
- DIV+CSS列表式布局（同意图片的应用）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- PHP.4-DIV+CSS标准网页布局准备工作（下）
DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...
- PHP.3-DIV+CSS标准网页布局准备工作（上）
DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...
- html响应式布局，css响应式布局，响应式布局入门
html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...
- 演示：纯CSS实现自适应布局表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- css两列布局，一边固定宽度，另一边自适应
<!DOCTYPE HTML><HTML> <head> <meta charset="utf-8" ...
随机推荐
- 如何在 Linux 上安装 Nginx (源码安装)
如何在 Linux( CentOS ) 上安装 Nginx 1.下载 nginx 链接 : https://pan.baidu.com/s/1sll0Hrf 密码 : xnem 2.安装 gcc ( ...
- ASP.NET-权限管理五张表
ASP.NET 权限管理五张表 权限管理的表(5张表) 每个表里面必有的一些信息 序号 名称 字段 类型 主键 默认值 是否为空 备注 1 用户ID ID INT 是 ...
- [Ubuntu]安装中文输入法
安装了英文版的Ubuntu12.04之后.使用ctrt+space无法切换到中文,才反应过来. 于是查询了下怎么在Ubuntu下安装和配置中文输入法. 第一步安装语言包: 在左側的菜单条中点击 sys ...
- Tachyon在Spark中的作用（Tachyon: Reliable, Memory Speed Storage for Cluster Computing Frameworks 论文阅读翻译）
摘要: Tachyon是一种分布式文件系统,能够借助集群计算框架使得数据以内存的速度进行共享.当今的缓存技术优化了read过程,可是,write过程由于须要容错机制,就须要通过网络或者 ...
- 基于sparksql调用shell脚本运行SQL
[Author]: kwu 基于sparksql调用shell脚本运行SQL,sparksql提供了类似hive中的 -e , -f ,-i的选项 1.定时调用脚本 #!/bin/sh # uplo ...
- [Android] Android开发优化之——从代码角度进行优化
通常我们写程序,都是在项目计划的压力下完成的,此时完成的代码可以完成具体业务逻辑,但是性能不一定是最优化的.一般来说,优秀的程序员在写完代码之后都会不断的对代码进行重构.重构的好处有很多,其中一点,就 ...
- How to Hide Zip Files Inside a Picture Without any Extra Software in Windows
http://www.howtogeek.com/119365/how-to-hide-zip-files-inside-a-picture-without-any-extra-software/ c ...
- TensorFlow高层次机器学习API (tf.contrib.learn)
TensorFlow高层次机器学习API (tf.contrib.learn) 1.tf.contrib.learn.datasets.base.load_csv_with_header 加载csv格 ...
- [codeforces 1037D] Valid BFS? 解题报告（验证bfs序，思维题）
题目链接:http://codeforces.com/problemset/problem/1037/D 题目大意: 给出一棵树,询问一个序列是否可能为这棵树从节点1开始遍历的bfs序 题解: 对于每 ...
- Ubuntu14.04下Mongodb官网卸载部署步骤（图文详解）（博主推荐）
不多说,直接上干货! 前期博客 Ubuntu14.04下Mongodb官网安装部署步骤(图文详解)(博主推荐) https://docs.mongodb.com/manual/tutorial/ins ...