请老师帮忙检查下,混合布局

请老师帮忙检查下,混合布局


<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

  *{margin:0;padding:0;}

  .subject{width:100%;height:800px;background:red;}

  /*top*/

  .top{width:100%;height:600px;background:cyan;text-align: center;}

  .top img{width:400px;height:300px;}

  .css,.html{width:400px;height:300px;}

  .css{float: left;margin-top:150px;margin-left:20%;}

  .html{float: right;margin-top:150px;margin-right:20%;}

  /*bottom*/

  .bottom{width:100%;height:200px;text-align: center;}

    .bottom img{height:100px;margin-top:50px;}

    .img1{float: left;margin-left:150px;}

    .img3{float: right;margin-right:150px;}


  </style>

</head>

<body>

    <div class="subject">

  <div class="top">

      <div class="css"><img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg"/></div>

      <div class="html"><img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg"/></div>

  </div>

  <div class="bottom">

     <!--<div class="logo">-->

    <img class="img1" src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg"/>

    <img class="img2" src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg"/>

    <img class="img3" src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg"/>

    <!--</div>-->

  </div>

  </div>

</body>

</html>

感觉问题很多,请老师帮助下

请问那些部分需要修改或者优化呢?

请问top部分可以像bottom部分一样写吗。  3块img图片怎么判断相隔的边距呢?

正在回答 回答被采纳积分+1

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

3回答
好帮手慕码 2019-11-08 09:49:08

同学你好,同学是说div宽度设置固定值的时候,间距是否也可以使用百分比的方式对吗?这样是可以的哦~不过,更准确的是使用定值的方式。

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

好帮手慕码 2019-11-07 14:20:47

同学你好!

可以使用百分比来表示。比如说我这边的电脑屏幕是1903,即是视口100%,两个盒子的宽度是800px,800/1903大约是0.42,因此间距的宽度就是1-0.42 = 0.58 = 58%。有三个间隙,那么就是19.333%。

因为这个数值是大概估算,因此不建议使用100%来设置宽度,而是使用固定宽度。

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


  • 提问者 慕少7027160 #1
    设置视口显示的固定宽度也可以吗
    2019-11-07 20:08:23
好帮手慕码 2019-11-07 09:50:33

同学你好!

效果没有实现,练习要求图片之间的每个间隙相等;建议修改。整体可以设置一个固定宽度,要求实现居中显示,top和bottom的间距通过计算得出,如下:

http://img1.sycdn.imooc.com//climg/5dc37841091516ff10530699.jpg

http://img1.sycdn.imooc.com//climg/5dc3784f09b7a4ea08220801.jpg

http://img1.sycdn.imooc.com//climg/5dc378660990e67107990498.jpg

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

  • 提问者 慕少7027160 #1
    请问老师如果设置的宽度是视口100%,那该怎么计算间距呢
    2019-11-07 10:14:40
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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