Div+css简介

最新推荐文章于 2024-07-27 04:28:49 发布

木偶跳舞

最新推荐文章于 2024-07-27 04:28:49 发布

阅读量2k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/u013372487/article/details/45816543

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、Div+css简介：

传统的页面是用table来布局和显示数据。这样有以下缺点：

（1）、显示数据和样式是绑定在一起的，牵一发而动全身；

（2）、布局不够灵活；

（3）、可能导致一个页面有大量的table元素，致使代码冗余，增加带宽；

（4）、table布局不利于搜索引擎的搜索。

其也有优点：

（1）、便于理解；

（2）、不同的浏览器显示结果相同，table比较稳定；

（3）、很好的显示数据。

2、Div+css的基本思想：

（1）、数据和样式要分离（也就是用div显示内容，但要显示的内容由css文件确定样式，再将css文件规定的样式添加到div中）；

Div+css：是一种目前比较流行的网页布局技术；div来存放需要显示的数据（文字，图表等）的容器，css就是用来指定放在div中的内容怎样显示，包括这些内容的位置和外观等，从而做到数据和显示相互的效果。

网页设计的三个时期：

（1）、table网页设计

（2）、table+css网页设计

（3）、div+css网页设计

Ø Div+css并不是要我们抛弃table，因为table在显示数据时，特别方便，因此在使用div+css时，该使用table时，就得使用。

3、DIV+CSS的优势：

（1）、符合W3C标准。

（2）、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。
（3）、搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。
（4）、样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。

（5）、CSS的极大优势表现在简洁的代码（避免代码冗余），对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。
（6）、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性

4、实例：

<html>
<head>
<title>第一讲代码</title>
<!--引入准备好的css文件-->
<link rel="stylesheet" type="text/css" href="a1.css"/>
</head>
<body>
<b>1.div+css入门案例：<b><br><br>
<!--
div 中可以放任何东西；
利用class属性调用样式案例；
-->
<div class="style1">
<img src="b1.jpg" />

</div>

</body>

</html>

a1.css

/*注意：css文件中注释是这样写的*/
/*样式案例如下*/
.style1{
	width:300px;/*每写完一个属性后要带分号*/
	height:400px;
	/*背景颜色*/
	background-color:red;
	border:10px solid #c0ff00;
	margin-left:300px;/*div框左移300像素*/
	margin-top:200px;/*div框下移200像素*/
	padding-top:20px;/*div框中内容下移20像素*/
	padding-left:20px;/*div框中内容左移20像素*/
}