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

最新推荐文章于 2021-04-11 18:27:56 发布

sky_悒晨

最新推荐文章于 2021-04-11 18:27:56 发布

阅读量622

点赞数

本文链接：https://blog.csdn.net/u011700006/article/details/38518815

版权

第十讲 div css开山篇

1、引入

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

缺点：

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

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

（3）一个页面可能会有大量的 <table> 元素，代码就会冗余

（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

<html>
<head>
<title>入门小案例</title>
<!--引入我们的css-->
<!--link rel="stylesheet"表示连接一个样式表-->
<link rel="stylesheet" type="text/css" href="my.css"/>
</head>
<body>
<div class="style1">
<img src="1.jpg"/>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</body>
</html>

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;
}

sky_悒晨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
韩顺平PHP学习视频笔记整理010div css开山篇

第十讲 div css开山篇1、引入传统网页，用table来布局和显示数据缺点：（1）显示的样式和数据是绑定在一起的（2）布局的时候，灵活度不高（3）一个页面可能会有大量的元素，代码就会冗余（4）增加了带宽（5）搜索引擎不喜欢这样的布局优点：（1）理解比较简单（2）不同浏览器看到的效果一般是相同的（3）显示数据还是很好的Div+css的基本
复制链接

扫一扫