韩顺平PHP学习视频笔记整理010div css开山篇

第十讲  div css开山篇

1、引入

传统网页，用table来布局和显示数据

缺点：

（1）显示的样式和数据是绑定在一起的

（2）布局的时候，灵活度不高

（3）一个页面可能会有大量的 

 元素，代码就会冗余

（4）增加了带宽

（5）搜索引擎不喜欢这样的布局

优点：

（1）理解比较简单

（2）不同浏览器看到的效果一般是相同的

（3）显示数据还是很好的

Div+css的基本思想：

数据和样式要分离

2、div+css是什么？

Div+css时一种目前比较流行的网页布局技术

Div来存放需要显示的数据（文字，图表...）

Css就是用来指定怎样显示，从而做到了数据和显示相互分离的效果

原理图如：图一

理解：

Div是用于存放内容（文字，图片元素）的容器

Css是用于指定存放在div中的内容如何显示，包括这些内容的位置和外观。

 

3、网页设计三个时期

（1）table网页设计

（2）table+css网页设计

（3）Div+css网页设计

注：table在显示数据很方便，所以在日后的学习中也会用到。

 

Css2.0下载：http://pan.baidu.com/s/1hqBXmJy

代码：demo1.html

1	2	3
1	2	3

my.css

.style1{
	/*宽度 */
	width: 500px;
	height: 300px;/*一定要写分号*/
	background-color: silver;
	border: 1px solid red;
	margin-left: 200px;
	margin-top: 250px;
	padding-top: 20px;
	padding-left: 20px;
}

.style1 table{
	border: 1px solid black;
	width: 100px;
}