34.CSS传统布局【上】

最新推荐文章于 2025-07-04 12:15:00 发布

转载最新推荐文章于 2025-07-04 12:15:00 发布 · 54 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/keshuai752100461/p/8485233.html

本文介绍了传统的网页布局方式，包括表格布局和浮动布局两种方法。详细讲述了如何使用表格进行固定及流体布局，并演示了利用浮动属性实现内容的左浮与右浮布局。

第二十七章传统布局【上】

一、布局模型

二、表格布局（非常不建议使用）

就是通过设定固定的单元格，去除表格边框和填充实现的布局，他应该在二维表格的数据显示

1、固定布局

//html部分

<!DOCTYPE html>

<head>

</head>

<body>

<tr>

<td colspan="2" class="header">header</td>

</tr>

<tr>

<td class="aside">aside</td>

<td class="section">section</td>

</tr>

<tr>

<td colspan="2" class="footer">footer</td>

</tr>

</table>

</body>

</html>

//CSS部分

@charset "utf-8"

body{

margin:0; /*去掉外边距*/

}

table{

width: 960px;

margin:0 auto; /*auto是居中*/

/*border-spacing: 0px;*/

border-collapse: collapse; /* 设完这个属性或上面那个，就可以把前面的border值由1改为0，使表格线消掉*/

}

.header{

height: 120px;

background-color: olive;

}

.aside{

width:200px;

height:500px;

background-color: purple;

}

.section{

width:760px;

background-color: maroon;

}

.footer{

height:120px;

background-color: gray;

}

2、流体布局

表格的固定布局该成流体布局非常简单，只需要设置table为100%即可。

//修改table

table{

width：100%；

}

三、浮动布局

浮动布局主要采用float和clear两个属性来构建

1、固定布局

//html布局

<!DOCTYPE html>

<head>

</head>

<body>

header

</header>

<aside>

aside

</aside>

section

</section>

footer

</footer>

</body>

</html>

//css布局

@charset "utf-8"

body{

margin:0 auto;

width: 960px;

}

header{

height: 120px;

background-color: olive;

}

aside{

width:200px;

height:500px;

background-color: purple;

float:left;

}

section{

width:760px;

height: 500px;

background-color: maroon;

float: right;

}

footer{

height:120px;

background-color: gray;

}

2、流体布局

只要更改body元素的限定长度为auto或100%，然后左右两侧分别设置20%和80%即可

//css部分

body{

width：auto；

}

aside{

width：20%；

}

section{

width：80%；

}

转载于:https://www.cnblogs.com/keshuai752100461/p/8485233.html