首页 > Web开发 > 详细

Web标准：二、一列布局

时间：2015-03-19 19:59:04 阅读：116 评论：0 收藏：0 [点我收藏+]

标签：

知识点：

1.一列固定宽度

2.一列固定宽度居中

3.一列自适应宽度

4.一列自适应宽度居中

5.一列二至多块布局

1）一列固定宽度

下图是定义了一个高300px，宽400px，颜色是#99FFcc的样式表。

技术分享

技术分享

显示如下：

技术分享

2）一列固定宽度居中

与一列固定宽度相比，只要加一个居中的属性即可，这里用到的是CSS的外边距属性：margin。增加属性margin：auto；技术分享

技术分享

技术分享

显示如下：

技术分享

3）一列自适应宽度

自适应宽度是相对于浏览器，将CSS中的“width：400px；”去掉，或者使用“width：100%；”。可以看到两侧会有白边，这个是body的默认边距。技术分享

技术分享

这里我们可以加一个body{margin：0；}，可以把body的默认边距去掉。h1-h6，ul等元素均有默认边距

技术分享

技术分享

技术分享

4）一列自适应宽度居中

只要设置div的外边距为auto即可实现居中

技术分享

技术分享

技术分享

5）一列二至多块布局

一般网站可以分为三部分，头部、中间主体、底部。我们可以用三个div来划分。

技术分享

技术分享

技术分享

技术分享

同样的我们可以将三个div放到一行上，只要给width一个固定的百分比，并且加一个“float:left”即可

技术分享

技术分享

技术分享

CSS选择器：

技术分享

CSS语法由三部分组成，选择器：可以是ID、CLASS或p等标签；属性和值是来定义这个物体的某一个特性。

ID和CLASS选择器：

id只能作用与一个对象，不能作用于多个对象，优先级高于class，这是id和class的区别。

Web标准：二、一列布局

标签：

原文地址：http://www.cnblogs.com/meitian/p/4351314.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！