传统网页用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>
<!--引入css-->
<link rel="stylesheet" type="text/css" href="my.css"/>
</head>
<body>
<div class="style">
<img src="smile.png"/>
</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;
}
效果: