您的位置：首页 > Web前端 > CSS

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

2016-05-30 00:00 603 查看 
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5     <title>网页布局练习</title>
6
7     <link href="../EX_Asp_Net/css/div.css" rel="stylesheet" />
8 </head>
9 <body>
10     <h1 align="center">利用div和css对页面的布局进行调整</h1><hr />
11     <div class="d1">
12         <h3>窗口1</h3>
13     </div>
14     <div class="d2"><h3>窗口2</h3></div>
15     <div class="d3"><h3>窗口3</h3></div>
16 </body>
17 </html>


css代码：

1 bod {
2  margin:100%;
3  padding:100%;
4
5 }
6 .d1{
7  width:200px;
8  height:600px;
9  background-color:red;
10  margin-left:20px;
11  margin-top:20px;
12  position:absolute;
13 }
14 .d2{
15  width:800px;
16  height:150px;
17  background-color:greenyellow;
18  position:absolute;
19  left:235px;
20  margin-top:20px;
21
22 }
23 .d3{
24  width:800px;
25  height:420px;
26  position:absolute;
27  left:235px;
28  background-color:#19a1f8 ;
29  margin-top:200px;
30
31 }


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航