Div+css-1 - 爱码网

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

缺点：

1.显示的样式和数据绑定在一起

2.布局时灵活度不高

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

4.增加带宽

5.搜索引擎不容易解析这种布局

优点：

1.容易理解

2.不同浏览器运行效果一般是相同的

3.显示数据效果比较好

Div+css是什么？

Div+css是一种网页布局技术

Div用来存放需要显示的数据(文字，图标...)，css用来指定数据怎样显示,从而做到数据和显示相互分离的效果。

我们可以这样简单的理解div+css

div是用于存放内容(文字,图片,元素)的容器。

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

Div+css的优点：

网页设计的三个历史时期是table,table+css,div+css

1.table网页设计：内容和样式(外观和布局)混合

2.table+css网页设计：table布局,css指定外观

3.div+css网页设计：div放内容,css指定样式(外观和布局),内容和样式彻底分离

入门案例：

demo.html

<html>

<head>

<title>css入门案例</title>

</head>

<body>

</div>

</body>

</html>

my.css

.style{

/*div的宽度高度背景颜色位置坐标*/

width:400;

height:300;

background-color:silver;

margin-left:200;

margin-top:100;

/*图片位置*/

padding-top:50;

padding-left:50;

}

效果：