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" ...
随机推荐
- 在Action中获取servlet API
Struts2的Action组件是不依赖servlet API 的.那么当你在action中的业务需要处理HttpServletRequest和HttpServletResponse的时候(比如要对响 ...
- 基于nginx的静态网页部署
背景: 一序列的html网页需要部署 基于nginx的部署: 本文采用的基于openresty的nginx 配置. 简单地配置 Nginx 的配置文件,以便在启动 Nginx 时去启用这些配置即可实现 ...
- ASP.NET-JSON.NET技巧
第一个技巧,字符串转JSON 单条的json数据可以使用JObject.Parse将对象转化成JObject对象,你可以接着使用JsonConvert.SerializeObject方法把这个对象序列 ...
- 练练脑，继续过Hard题目
http://www.cnblogs.com/charlesblc/p/6384132.html 继续过Hard模式的题目吧. # Title Editorial Acceptance Diffi ...
- python爬虫 分页获取图片并下载
--刚接触python2天,想高速上手,就写了个爬虫,写完之后,成就感暴增,用起来顺手多了. 1.源代码 #coding=utf-8 import urllib import re class Pag ...
- 37、ifconfig命令
很多windows很熟悉ipconfig命令行工具.它被用来获取网络接口配置信息并对此进行改动.Linux系统拥有一个类似的工具,也就是ifconfig(interfaces config). 通常须 ...
- TSNE——目前最好的降维方法
转自:http://blog.csdn.net/u012162613/article/details/45920827 1.流形学习的概念 流形学习方法(Manifold Learning),简称流形 ...
- poj--3984--迷宫问题（bfs+路径记录）
迷宫问题 Time Limit: 1000MS Memory Limit: 65536KB 64bit IO Format: %I64d & %I64u Submit Status D ...
- js中cookie的使用 以及缺点
什么是Cookie Cookie意为“甜饼”,是由W3C组织提出,最早由Netscape社区发展的一种机制.目前Cookie已经成为标准,所有的主流浏览器如IE.Netscape.Firefox. ...
- Date日期类 Calendar日历类 完成可视化日历
package com.test; import java.text.DateFormat; import java.text.ParseException; import java.text.Sim ...