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" ...
随机推荐
- NYIST 749 蚂蚁的难题(八)
蚂蚁的难题(八)时间限制:2000 ms | 内存限制:65535 KB难度:5 描述蚂蚁是一个古玩爱好者,他收藏了很多瓶瓶罐罐. 有一天,他要将他的宝贝们一字排开, 摆放到一个长度为L的展台上. 已 ...
- windows部署iBase4J
所需环境:jdk 1.8.eclipse(myeclipse不可以).nginx.activeMQ .zookeeper.redis 第一步 下载jdk1.8 按步骤安装至指定位置即可 第二步 安装e ...
- UI_UIImagePickerController（读取图片）
创建图片 #pragma mark - 创建 photoImageView - (void)createphotoImageView { self.photoImageView = [[UIImage ...
- jdbc14 及 jdbc16 共存所带来的问题【未完待续】
在JAVA中JDK版本号与JDBC版本号的一致性十分重要,开发都们经常会忽略了这一点导致非常多不必要的错误. 昨天给客户排查了一个关于EDB在JBoss中使用时关于这方面的问题,希望给大家一点启示. ...
- poj_3071概率dp
确定好对手就简单了. #include<iostream> #include<cstdio> #include<cstring> #include<algor ...
- bzoj5204: [CodePlus 2018 3 月赛]投票统计(离散化+暴力)
5204: [CodePlus 2018 3 月赛]投票统计 题目:传送门 题解: 谢谢niang老师的一道sui题 离散化之后直接搞啊(打完之后还错了...) 代码: #include<cst ...
- http协议无状态中的 "状态" 到底指的是什么？！（转载）
转载自:https://www.cnblogs.com/bellkosmos/p/5237146.html 引子: 最近在好好了解http,发现对介绍http的第一句话[http协议是无状态的,无 ...
- CentOS 安装 MySQL8
@Linux 官网:https://dev.mysql.com/doc/refman/8.0/en/binary-installation.html 个人博客:https://www.xingchen ...
- win10+ubuntu的坑
最近几天考虑了诸多,包括分区大小,使用烧写工具等等. 但是实际动手还是遇到了彩蛋.rufus是知乎的大神推荐的,因为UUI貌似有些版本安装时候有些问题. 而rufus的界面有诸多选项.ubuntu的图 ...
- 机器学习(十一) 支持向量机 SVM（下）
支持向量机通过某非线性变换 φ( x) ,将输入空间映射到高维特征空间.特征空间的维数可能非常高.如果支持向量机的求解只用到内积运算,而在低维输入空间又存在某个函数 K(x, x′) ,它恰好等于在高 ...