divcss布局最简单 (div css布局实例教程)

divcss简单布局,div+css布局入门教程

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

#shang {

background-color: #999;

height: 300px;

width: 1000px;

}

#zhong {

background-color: #aaa;

height: 150px;

width: 1000px;

}

#xia {

font-size: 12px;

color: #333;

background-color: #CCC;

text-align: center;

height: 30px;

width: 980px;

padding: 10px;

}

#zuo {

background-color: #9F0;

float: left;

height: 150px;

width: 362px;

}

#zhongzhong {

background-color: #FC3;

float: left;

height: 100px;

width: 315px;

}

#you {

background-color: #FCF;

width: 264px;

padding-top: 22px;

padding-left: 19px;

float: left;

height: 69px;

}

</style>

</head>

<body>

<div id="shang">此处显示 id "shang" 的,内容图像1234</div>

<div id="zhong">

<div id="zuo">此处显示 id "zuo" 的内容,图像5:362*38</div>

<div id="zhongzhong">此处显示 id "zhongzhong" 的内容,图像6:315*100</div>

<div id="you">此处显示 id "you" 的内容,图像9:264*69,上22,下19</div>

</div>

<div id="xia">此处显示 id "xia" 的内容</div>

</body>

</html>