老师看看代码

首页课程实战体系课手记专栏慕课教程

老师看看代码

来源：2-14 编程练习

JJJustin

2019-07-02 18:44:43

<!DOCTYPE html>

<html>

<head>

/*此处写代码*/

body{

padding: 0;

margin: 0;

width: 100%;

height: 1000px;

}

.header{

height: 70%;

background: skyblue;

overflow: hidden;

zoom:1;

/*margin: 0 auto;*/

}

.footer{

height: 30%;

background: pink;

overflow: hidden;

zoom:1;

}

.left{

width: 40%;

height: 90%;

float: left;

background: red;

margin-left: 5%;

margin-top: 5%;

}

.right{

width: 40%;

height: 90%;

float: right;

background: blue;

margin-right: 5%;

margin-top: 5%;

}

img{

display: block;

width: 100%;

height: 100%;

/*margin: 10% auto;*/

}

.one{

width: 33%;

height: 100%;

/*background: red;*/

float: left;

}

.one img{

width: 70%;

height: 70%;

display: block;

margin-top: 15%;

margin-left: 15%;

}

.two{

width: 34%;

height: 100%;

/*background: green;*/

float: left;

}

.two img{

width: 70%;

height: 70%;

display: block;

margin-top: 15%;

margin-left: 15%;

}

.three{

width: 33%;

height: 100%;

/*background: blue;*/

float: right;

}

.three img{

width: 70%;

height: 70%;

display: block;

margin-top: 15%;

margin-left: 15%;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

有没有更加优雅的对齐方式我觉得自己用margin+比例这样不太好

写回答

2回答

好帮手慕慕子

2019-07-02

同学你好，

老师截图修改的代码是在同学粘贴过来的代码基础上进行修改的，不提供代码哦，老师鼓励同学结合老师的提供截图亲自测试一下，这样在练习的过程更能加深记忆哦。
如下图，图片的宽度可以通过检查元素获取
如果不知道图片的宽度，可以给图片设置一个固定的宽度，不过为了保证图片不变形，一般推荐只给图片设置宽度，让高度自适应，这样图片就会等比例缩放了。

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

好帮手慕慕子

2019-07-02

同学你好，由于电脑分辨率不同设置百分比的宽度，效果实现会有差异。

建议：这里以上半部分为例

可以给上下层的大盒子一个固定的宽度，例如1000px；通过margin：0 auto；实现整体水平居中
然后给图片设置左外边距实现间距效果，使用总宽度减去图片的宽度，并除以3，就是上部分每一个间距的值，如下：1000-720（两张图片的宽度）为280px ，一共三处间距，所以除以3得到的就是margin-left值。
另，可以通过给外层盒子设置上下padding值实现上下的空白间距

下部分的图片实现原理与上部分是一样的

参考代码如下