老师这样写可以嘛

老师这样写可以嘛

<!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>css布局-应用4</title>

  <style type="text/css">

* {

padding: 0;

margin: 0;

}

.container {

width: 100%;

margin: 0 auto;


}

.top,.bottom {

width: 80%;

margin: 0 auto;

overflow: hidden;

zoom: 1;

}

.top {

background: rgb(173, 216, 230);

}

.top img {

margin: 20px 120px;

float: left;

}

.bottom {

background: rgb(255, 182, 193);

}

.bottom img {

margin: 20px 100px;

float: left;

}

img {

display: block;

}

  </style>

</head>

<body>

<div class="container">

<div class="top">

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

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

</div>

<div class="bottom">

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

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

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

</div>

</div>

</body>

</html>


正在回答

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

2回答

同学你好!

是这样的,现在是学习初期,这个宽高一般是我们自己定的。但是在工作中,会有设计师给设计稿,宽高都会标注好的哦

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

好帮手慕码 2019-07-10 10:28:02

同学你好!

图片之间的间隙应该是一样的,可以计算下来实现:

(1)可以给.top,.bottom设置一个固定宽度和高度

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

(2)通过计算去实现间隙相等,以上面为例:

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

下面的实现方法和上面一样哦,同学可以试下

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

  • 提问者 慕工程1011968 #1
    谢谢老师,已经更改之后,能够正常显示样式效果。还想请问一下老师,如何较准确的去设置盒子的固定宽度和高度,就如这个.top,.bottom的width:810px;height:300px;
    2019-07-10 14:24:47
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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