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>
<!--引入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;
}
效果:



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值