老师,如果做成自适应的百分比模式改怎样设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
/*此处写代码*/
*{padding:0; margin:0;}
.container{width:80%;height:600px;margin: auto auto;}
.header{background:skyblue;width:1000px;height: 300px;margin: 0 auto;line-height: 300px;}
.header img{display: block; float: left; margin-top: 42.5px;margin-left: 93.3px;}
.footer{background:pink;width:1000px;height: 200px;margin: 0 auto;line-height: 200px;}
.footer img{display: block;float: left;margin-left: 100px;margin-top:60px;}
</style>
</head>
<body>
<div class="container">
<div class="header">
<img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg"/>
<img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg"/>
</div>
<div class="footer">
<img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg"/>
<img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg"/>
<img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg"/>
</div>
</div>
</body>
</html>
正在回答
同学你好,可以把px设置成%。但是效果就不能准确的实现了。在目前阶段,同学使用px这种方法就可以了。
如果我的回答帮到了你,欢迎采纳,祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星