田字格布局html div

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=gb2312">

<title>田字格布局</title>

<style>

#prat1{

width: 200px;

height: 200px;

background: #CDAD00;

float: left;

}

#prat2{

width: 200px;

height: 200px;

background: #CD6839;

float: left;

}

#prat3{

width: 200px;

height: 200px;

background: #CD6090;

float: left;

clear: left;

}

#prat4{

width: 200px;

height: 200px;

background: #CD3333;

float: left;

}

</style>

</head>

<body>

<div id="prat1">块1</div>

<div id="prat2">块2</div>

<div id="prat3">块3</div>

<div id="prat4">块4</div>

</body>

</html>

块1

块2

块3

块4

巴特西

田字格布局html div

最新文章

热门文章