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

第十讲  div css开山篇

1、引入

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

缺点:

(1)显示的样式和数据是绑定在一起的

(2)布局的时候,灵活度不高

(3)一个页面可能会有大量的 

 元素,代码就会冗余

(4)增加了带宽

(5)搜索引擎不喜欢这样的布局

优点:

(1)理解比较简单

(2)不同浏览器看到的效果一般是相同的

(3)显示数据还是很好的

Div+css的基本思想:

数据和样式要分离

韩顺平PHP学习视频笔记整理010div css开山篇_第1张图片


2div+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;
}


你可能感兴趣的:(韩顺平PHP学习视频笔记整理010div css开山篇)