xhtml+css基础第2课-列布局

1、CSS语法

css选择器

如图所示,CSS语法由如下三部分构成,选择器:可以是ID、CLASS或标签;属性和值是用来定义这个物件的某一个特性。如一张桌子的长120cm,宽60cm,套用css的格式为,桌子{长:120cm;宽:60cm;},这样是不是容易理解。

2、ID和CLASS选择器

id只能在页面中对应一个元素,就像我们的身份证号一样,每个人的都不一样;class为类,可以对应多个元素,比如说一年级三班的学生,它所对应的可能是10个20个学生。

id的优先级高于class,比如说今天三班的学生上体育课,小明留下来打扫卫生。那么三班的学生上体育课这是一个类,而小明打扫卫生这是个id,虽然小明也是三班的学生,但id高于class,所以小明执行打扫卫生的任务。

3、CSS缩写

css的许多属性是可以简写的,这样便于阅读和修改,减少代码量。比如颜色值为#ff6600;可以简写为#f60;两位两位一样的才可以简写,像#c2c2c2是不可以简写的。

4、CSS格式化

如果你用DW软件的话,选择命令-应用源格式。

5、一列固定宽度

6、一列固定宽度居中

一列固定宽度居中和一列固定宽度相比,我们要解决的问题就是居中。这里我们用到css的外边距属性:margin。在IE6及以上版本和标准的浏览器当中,当设置一个盒模型的的margin:auto;时,可以让这个盒模型居中。我们下边在css样式表中加上这个属性看看效果:

7、一列自适应宽度

自适应宽度是相对于浏览器而言,盒模型的宽度随着浏览器宽度的改变而改变。这时要用到宽度的百分比。当一个盒模型不设置宽度时,它默认是相对于浏览器显示的。我们把刚才的固定宽度例子中的宽度去掉看看:

如果不加body { margin:0;}会有白边。这个是由body默认的外边距造成的。当我们不用任何样式表进行定义时,body,h1-h6,ul等元素默认有外边距或其它样式的。这里我们在css样式中增加一项:body {margin:0;},就可以把body默认的外边距去掉,这时再预览一下,白边就没了。

8、一列自适应宽度居中

同样和固定宽度居中一样,我们只需要设置div的外边距为auto即可实现居中了。

9、一列多块布局

一般的网站整体可以分为上中下结构,即:头部、中间主体、底部。那么我们可以用三个div块来划分,分别给它们起名为:头部(header)、主体(maincontent)、底部(footer)。

采用固定宽度居中的方式,代码如下:

许多朋友在问:为什么两个相邻的容器中间的间距不是10px,而是5px呢?按照我们正常的理解,认为应该是两个值相加,其实这里是两个合并后取最大值。用css手册中的话说:块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心(有关块级元素和行内元素的概念在下一节讲到)。

AD:站点文章对你有帮助,可以选择去百度口碑好评下,还可以点击此处

赞 (0) 口碑
分享到:更多 ()

本文共有2人发表了自己的想法,下一个就是你!

评论 2

表情 签到
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 三亚婚纱照
    签到成功!签到时间:上午1:42:30,陌小雨,你很棒!一起加油哦哦~回复

本站能为你提供什么?

从这里开始使用WordPress

快速认识WordPress,熟悉WordPress,掌握WordPress。

选择更好用的模板主题

海量的WordPress主题模板供应下载,搭建网站更加轻松、便捷!

让您的网站更安全可靠

在这里,可以了解更多关于网站安全方面的常识问题,做个攻不可破的webmaster

让您的网站更符合你的需求

学习技术教程,自己也能改网站,学前端,做设计,成为一名WEB开发者