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" ...
随机推荐
- ZJU 2605 Under Control
Under Control Time Limit: 2000ms Memory Limit: 65536KB This problem will be judged on ZJU. Original ...
- 洛谷 P1825 [USACO11OPEN]玉米田迷宫Corn Maze
P1825 [USACO11OPEN]玉米田迷宫Corn Maze 题目描述 This past fall, Farmer John took the cows to visit a corn maz ...
- hadoop相关
执行wordcount 代码 package org.apache.hadoop.examples; import java.io.IOException; import java.util.Iter ...
- CNN tflearn处理mnist图像识别代码解说——conv_2d参数解释，整个网络的训练，主要就是为了学那个卷积核啊。
官方参数解释: Convolution 2D tflearn.layers.conv.conv_2d (incoming, nb_filter, filter_size, strides=1, pad ...
- 用pigz来加速解压tar.gz
兼容tar.gz 多线程的解压工具, 用于解压大文件时使用. https://zlib.net/pigz/ 方法: 1. 安装pigz 2. 使用tar时,选择pigz tar --use-compr ...
- Android Fragment中调用getActivity为null的问题
在使用fragment的时候经常会遇到getActivity()为null的情况.比如我在一个异步网路请求的回调中调用了getActivity()就会出现空指针问题.之前解决这个问题,通常都是直 ...
- .NET深入解析LINQ框架1
1.LINQ简述 2.LINQ优雅前奏的音符 2.1.隐式类型 (由编辑器自动根据表达式推断出对象的最终类型) 2.2.对象初始化器 (简化了对象的创建及初始化的过程) 2.3.Lambda表达式 ( ...
- *hiho 1475 - 数组拆分，dp，由N^2降到NlogN
题目链接 描述 小Ho得到了一个数组作为他的新年礼物,他非常喜欢这个数组! 在仔细研究了几天之后,小Ho成功的将这个数组拆成了若干段,并且每段的和都不为0! 现在小Ho希望知道,这样的拆分方法一共有多 ...
- QNX多线程同步之Barrier(屏障)
之前和大家介绍过QNX上的线程同步方法metux和semophore,通过这两种方法可以对一个或者几个资源进行加锁,避免资源使用上的冲突.在另一种情况下,某个线程需要在其它线程完成工作后才继续执行,这 ...
- 优动漫 PAINT 导航窗口面板
导航窗口面板用于管理画布的视图.本节将介绍如何在其中缩放.旋转.翻转画布. 如何使用导航窗口面板 使用[导航窗口]面板便于把握整个画布,以下将为您详细介绍. 什么是[导航窗口]面板 [导航窗口]面板用 ...