老师,如果做成自适应的百分比模式改怎样设置

老师,如果做成自适应的百分比模式改怎样设置

<!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>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,可以把px设置成%。但是效果就不能准确的实现了。在目前阶段,同学使用px这种方法就可以了。

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

好帮手慕言 2019-12-07 11:02:48

同学你好,类名为footer元素里面的三张图片,没有实现垂直居中的效果。

父级的高度是200px,图片的高度是60,一共两个间隙,所以margin-top值应该为:200-60=140/2=70px。代码参考:
http://img1.sycdn.imooc.com//climg/5deb15c409597e2d04860301.jpg

以目前学习的知识不能实现自适应,在后面的课程中会有讲解,同学不要着急。

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 提问者 siegelions #1
    老师我是想问如果把里面的宽高设置成百分比模式怎么改
    2019-12-07 11:53:33
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师