CSS的布局

html-css013

CSS的布局,第1张

在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。

所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。

<!DOCTYPE html>

2 <html xmlns="http://www.w3.org/1999/xhtml">

3 <head>

4 <meta http-equiv="Content-Type" content="text/htmlcharset=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>

1

2

3

4

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 heigh