css有哪些页面布局

html-css020

css有哪些页面布局,第1张

五种基本布局定位类型:* 弹性布局 - 总体宽度及其中所有栏的值都以 em 单位编写。这应使布局能够使用浏览器的指定基本字体大小缩放。 对于视力不好的用户, 这可能更有吸引力、更易于访问, 因为栏宽度将变得更宽, 能以任何大小显示更舒适、更可读的行长度。 由于总体宽度将缩放, 您的设计必须允许可这宽度。* 固定布局 - 总体宽度及其中所有栏的值都以像素单位编写。 布局位于用户浏览器的中心。* 流体布局 - 总体宽度及其中所有栏的值都以百分比编写。 百分比通过用户浏览器窗口的大小计算。* 混合布局 - 混合布局组合两种其他类型的布局 - 弹性和流体。 页面的总宽度为 100%, 但侧栏值设置为 em 单位。* 绝对定位布局 - 所有前述布局的外栏使用浮动内容。 而绝对定位布局完全如其名所示 - 有绝对定位的外栏。 必须记住, 当使用这些布局时, 侧栏会“提出文档流程”, 因而可能有一些不合适的结果 (例如, 页脚可能“看不见”在侧栏在何处结束并在主要内容区域包含的内容少于侧栏的页面与页脚重叠)。

<!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