<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><title>背景图片自适应</title><style type="text/css">html,body {padding: 0margin: 0}div {width: 100%height: 300pxbackground: url('images/slide_01_640x340.jpg') no-repeatbackground-size: 100% 100%}</style></head><body><div></div></body></html>
2.HTML代码的截图效果：
3.自适应最重要的样式如下：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
width: 100%
background-size: 100% 100%
4.最终的效果是这样：
左右自适应两列布局：用到float属性 宽度按百分比设置。下图就是在手机中的样子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0padding: 0}
html,body{width: 100%height: 100%}
#left{
width: 60%
height: 100%
float: left
background: red
}
#right{
height: 100%
width: 40%
float: right
background: wheat
}
p{
color: white
font-size: 2em
line-height:1.5
font-weight: 800
text-indent: 2em
}
</style>
</head>
<body>
<div id="left">
<p>在建筑科学和环境科学领域，采用了国际先进的IDiDe项目管理模式，构建国际技术联盟，为建筑设计师、空间设计师、产品元素设计师提供跨文化的对话平台</p>
</div>
<div id="right">
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）