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" ...
随机推荐
- UVALive 2664 One-way traffic
One-way traffic Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVALive. Or ...
- angular-基础
AngularJs特点: 1.依赖注入 2.模块化 3.双向绑定 4.语义化标签 当网页加载完毕,AngularJS 自动开启. ng-app 指令告诉 AngularJS,<div> 元 ...
- 关于amd64和ia64的理解
关于amd64和ia64的理解 学习了:http://blog.csdn.net/zubin006/article/details/5060383 IA64指的是Intel安腾系列CPU,不是X86架 ...
- hdu 4521 小明系列问题——小明序列(线段树+DP或扩展成经典的LIS)
小明系列问题--小明序列 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) Tot ...
- ubuntu16.04通过ipv6进行学术搜索
https://www.polarxiong.com/archives/%E8%A7%A3%E5%86%B3ubuntu%E4%B8%8Bipv6%E8%BF%9E%E6%8E%A5%E4%B8%80 ...
- web security
brute force cracking 暴力破解 Brute force (also known as brute force cracking) is a trial and error me ...
- 性能监控之监控SQL语句
分析表 analyze table tablename compute statistics for all indexes; analyze table tablename compute stat ...
- JQuery中的find、filter和each方法学习
find() 概述 搜索所有与指定表达式匹配的元素.这个函数是找出正在处理的元素的后代元素的好方法. 所有搜索都依靠jQuery表达式来完成.这个表达式可以使用CSS1-3的选择器语法来写. 参数 e ...
- SpringCloud学习笔记（4）----Spring Cloud Netflix之Eureka的配置
1. Eureka监控配置 Eureka的客户端需要加入依赖 <dependency> <groupId>org.springframework.boot</groupI ...
- Collections库使用
Date: 2019-05-27 Author: Sun Collections库 Python拥有一些内置的数据类型,比如str, int, list, tuple, dict等, collec ...