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" ...
随机推荐
- 洛谷 P1617 爱与愁的一千个伤心的理由
P1617 爱与愁的一千个伤心的理由 题目背景 (本道题目隐藏了两首歌名,找找看哪~~~) <爱与愁的故事第一弹·heartache>第二章. 经历了心痛后,爱与愁大神不行了. 题目描述 ...
- Edison Chou
.NET中那些所谓的新语法之中的一个:自己主动属性.隐式类型.命名參数与自己主动初始化器 开篇:在日常的.NET开发学习中,我们往往会接触到一些较新的语法.它们相对曾经的老语法相比.做了非常多的改进, ...
- CSS3弹性布局内容对齐（justify-content）属性使用具体解释
内容对齐(justify-content)属性应用在弹性容器上.把弹性项沿着弹性容器的主轴线(main axis)对齐. 该操作发生在弹性长度以及自己主动边距被确定后. 它用来在存在剩余空间时怎样加以 ...
- 主站sinox.org堵塞太厉害，大家用sinox.3322.org訪问
近期 www.sinox.org域名堵塞太厉害了.差点儿不能訪问,如今大家用sinox.3322.org訪问 sinox.org仅仅是显示正在建设 一直以来sinox.org仅仅是个摆设,并非主要域名 ...
- ORACLE 11GR2 RAC的网络规划解析
在ORACLE 11gR2中,安装RAC发生了显著变化.在10g以及11gR1的时代,安装RAC的步骤是先安装CRS,再安装DB,而到了11gR2的时代,crs与asm被集成在一起,合称为GRID,必 ...
- 用pigz来加速解压tar.gz
兼容tar.gz 多线程的解压工具, 用于解压大文件时使用. https://zlib.net/pigz/ 方法: 1. 安装pigz 2. 使用tar时,选择pigz tar --use-compr ...
- Android ViewPager 动画效果
找到个不错的开源项目:https://github.com/jfeinstein10/JazzyViewPager Android ViewPager 动画效果
- Pyinstaller 1 使用PyInstaller
使用PyInstaller pyinstaller命令的语法是: pyinstaller[ options ] script [ script ...] | spec文件 在最简单的情况下,将当前目录 ...
- 转：利用 T-sql 的从句 for xml path('') 实现多行合并到一行, 并带有分隔符
http://blog.csdn.net/rav009/article/details/50723307 T-sql 有一个for xml path('')的从句能把多行结果合并到一行,并成为xml ...
- HDU 2122 Ice_cream’s world III【最小生成树】
解题思路:基础的最小生成树反思:不明白为什么i从1开始取,就一直WA,难道是因为村庄的编号是从0开始的吗 Ice_cream’s world III Time Limit: 3000/1000 MS ...