用div和css样式控制页面布局

时间:2022-12-01 15:17:57
 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>网页布局练习</title> <link href="../EX_Asp_Net/css/div.css" rel="stylesheet" />
</head>
<body>
<h1 align="center">利用div和css对页面的布局进行调整</h1><hr />
<div class="d1">
<h3>窗口1</h3>
</div>
<div class="d2"><h3>窗口2</h3></div>
<div class="d3"><h3>窗口3</h3></div>
</body>
</html>

css代码:

 bod {
margin:100%;
padding:100%; }
.d1{
width:200px;
height:600px;
background-color:red;
margin-left:20px;
margin-top:20px;
position:absolute;
}
.d2{
width:800px;
height:150px;
background-color:greenyellow;
position:absolute;
left:235px;
margin-top:20px; }
.d3{
width:800px;
height:420px;
position:absolute;
left:235px;
background-color:#19a1f8 ;
margin-top:200px; }

用div和css样式控制页面布局