CSS 布局实现

原创 2016年05月31日 15:45:35
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
body{
	background-color:#F0E9D8;
}
#wrap {
	margin: 0px auto;
	width: 80%;
	background-color:#FFF;
}
#left {
	float:left;
	width:20%;
	height:500px;
	border:2px solid #0F0;
	margin-top:10px;
	margin-left:10px;
}
#right{
	float:right;
	width:35%;
	height:600px;
	border:2px solid #00F;
	margin-top:10px;
	margin-right:10px;
}
#center{
	float:left;
	width:40%;
	height:800px;
	margin-top:10px;
	margin-bottom:50px;
	margin-right:5px;
	margin-left:5px;
	border:2px solid #300;
}
#bottom{
	clear:both;
	margin:0px auto;
	width:90%;
	height:30px;
	border:2px solid #099;
}
#ad{
	position:fixed;
	border:#999 solid 2px;
	width:120px;
	height:200px;
	right:0px;
	top:160px;
	background-image:url(200912317295935977803.jpg);
}
</style>
</head>

<body>
<div id="wrap">
  <div id="left"> </div>
  <div id="center"> </div>
  <div id="right"> </div>
  <div id="bottom"> </div>
</div>
<div id="ad"></div>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

html javascript+css实现div自由布局

  • 2015年12月31日 17:23
  • 2KB
  • 下载

DIV+CSS实现3列布局

  • 2010年03月12日 14:24
  • 19KB
  • 下载

使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

今天太累了,写不了了,先留着写。  1.css3之前       三种方法:圣杯布局 2 , css3新特性    多栏布局    弹性盒模型布局...

jQuery+css3实现3D翻书页面布局效果

  • 2013年09月18日 11:30
  • 556KB
  • 下载

移动换H5 の 纯CSS3实现大转盘抽奖布局 by FungLeo

移动换H5 の 纯CSS3实现大转盘抽奖布局 by FungLeo前言本教程不涉及JS控制旋转部分,也不涉及后端输出抽奖结果部分.这篇教程讲的是如何去实现大转盘抽奖的布局.在制作大转盘抽奖的时候,一般...
  • FungLeo
  • FungLeo
  • 2016年03月17日 11:01
  • 11202

div+css实现frameset网页布局

  • 2016年03月02日 11:20
  • 1.35MB
  • 下载

css3的calc()实现自适应布局

随着自适应布局的出现,我们在制作页面的时候,经常会碰到元素的宽度为100%的情况。了解盒模型的朋友不难想到,如果这个元素有margin,padding,border的时候,此时的元素整体宽度必会大于父...
  • r1283
  • r1283
  • 2015年12月30日 13:11
  • 2284

CSS布局实例用ul、li来实现表格

  • 2009年08月29日 09:42
  • 165KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS 布局实现
举报原因:
原因补充:

(最多只允许输入30个字)