css+div网页布局使用教程
CSS(层叠式样式表)是用来进行网页样式设计的标识语言，与HTML一样属于解释性语言。如设计链接文本初始显示为蓝色，当光标移过时字体变成红色且显示下划线，这就是一种样式。通过设计样式表，可以统一控制HTML中各个标签的显示属性。CSS样式表可以使用户更有效地控制网页外观，精确指定网页元素位置，创建以及观察特殊效果。使用CSS，可以将网页结构和内容与表现形式分离开来，网页结构和内容被存放在HTML文档中，而用于定义表现形式的CSS规则被存放在另一个CSS样式表文件中。
文档结构基本构成元素是div元素。很多读者误以为div元素是没有语义的，但实际上，div代表区块，它提供了将文档分割为有意义的区域的方法。通过将主要内容区域包围在div中并分配ID名，就可以在文档中添加结构和意义。
网站重构概念的出现，也使div结构布局开始流行，因此出现了div+css这样一个对网站布局的叫法。单从div+css的叫法来分析，可以了解CSS的作用已经被大家认识并用在页面布局上了。但一个页面不是只要控制了div就控制了全部，HTML的标签有很多，曾经用过table布局的页面一样可以用CSS来控制。
操作方法
- 01
CSS代码被分割为一个个样式，它就是CSS代码的最小单元。每一个CSS样式（也有人称为规则）都必须有两部分组成:选择器（selector）和声明（declaration）。例如body{padding: 0px};一个样式不是仅可以包含一个声明，而是可以包含无限个声明，例如：body{font-size:14px; color:#000}
- 02
1.用记事本新键一个网页
- 03
2.然后在<style type="text/css">标签中输入下面的样式代码。定义div元素显示为方形盒子，显示蓝色边框，且并列显示在一行，同时增加4px的边界。
- 04
然后保存为test.html网页文档，在文档中定义两个div元素，并分别设置它们的class属性值为green和red。
- 05
总的代码为： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">div { /*定义div元素为方形显示*/ width:200px; height:200px; border:solid 2px blue; float:left; margin:4px;}.green{background-color:green;}/*设置背景色为绿色*/.red{background-color:red;} /*设置背景色为红色*/</style><title>上机练习</title></head><body><div class="red"></div><div class="green"></div></body></html>