首页 > Web开发 > 详细

Web标准:二、一列布局

时间:2015-03-19 19:58:42      阅读:382      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!