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" ...
随机推荐
- Windows下面使用curl
Windows下面使用curl 学习了:https://www.cnblogs.com/xing901022/p/4652624.html 下载地址:https://curl.haxx.se/down ...
- java文件对照工具
今天想比較一下两个java文件.这两个文件是本地的. 就在网上下载了一个对照工具(破解版)认为挺好用的对于不同的地方有高亮显示. 就给大家分享一下.软件名叫:beyond compare 软件下载地址 ...
- 零基础学python-5.2 数字表达式操作符
表达式是处理数字最主要的工具 a=1#常量 a=a+1#表达式 操作符 操作符 描写叙述 yield 生成 器函数发送协议 lambda args:expression 生成匿名函数 x if y e ...
- FPGA视频拼接器的放大和缩小功能
视频视频器能够把信号源放大和缩小. 对于我们的拼接器而言,它的架构这种: 信号源进入到拼接器中.先进入缩小模块.然后存进DDR中.然后从DDR中读出视频.进入到放大模块,最后依据屏幕的位置,输出到屏幕 ...
- SICP 习题 （1.41）解题总结
SICP 习题1.41 看似和周边的题目没有关系,突然叫我们去定义一个叫double的过程,事实上这道题的核心还是高阶函数. 题目要求我们定义一个过程double,它以一个过程作为參数,这个作为參数的 ...
- .net中的目录
System.Environment.CurrentDirectory Application.StartupPath https://msdn.microsoft.com/en-us/library ...
- hdoj--4501--小明系列故事——买年货（三维背包）
小明系列故事--买年货 Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) Tota ...
- ActiveMQ学习笔记（8）----ActiveMQ的消息存储持久化
1. 概述 ActiveMQ不仅支持persistent和non-persistent两种方式,还支持消息的恢复(recovery)方式. 2. PTP Queue的存储是很简单的,其实就是FIFO的 ...
- size_type类型
由string类类型和vector类类型定义的类型,用以保存任意string对象或vector对象的长度,标准库类型将size_type定义为unsigned类型 string::size_type它 ...
- Vue项目结合vux使用
引入vux 1.直接安装或者更新: npm install vux --save 或者使用 yarn yarn add vux // 安装 yarn upgrade vux // 更新 2.vux2必 ...