麻烦老师帮我看一下代码以及代码的实现是否正确。
来源：3-4 编程练习
努力学习的小张
2020-09-30 20:28:29
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
.big{width:1200px;
height:900px;
}
.big .one{border:1px;
border-color:'grey';
padding-top:1px;
float:left;
width:250px;
}
.big .two{border:1px;
border-color:'grey';
padding-top:1px;
float:left;
width:250px;
}
.big .three{border:1px;
border-color:'grey';
padding-top:1px;
float:left;
width:250px;
}
.big .four{border:1px;
border-color:'grey';
padding-top:1px;
float:left;
width:250px;
clear:left;
}
.big .five{border:1px;
border-color:'grey';
padding-top:1px;
float:left;
width:250px;
}
.big .six{border:1px;
border-color:'grey';
padding-top:1px;
float:left;
width:250px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="big">
<div class="one">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
</div>
<div class="two"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></div>
<div class="three"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></div>
<div class="four">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
</div>
<div class="five"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></div>
<div class="six"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></div>
</div>
</body>
</html>
1回答
-
好帮手慕鹤
2020-10-07
同学你好，页面效果没有实现，页面中有以下几个问题：
1、页面中的文字没有添加上，如下：
2、这六个容器块的宽度设置太大，如下：
建议宽、高设置小一点，正好能把这六个块包裹住即可，宽度、高度都是按照盒模型来计算的。
3、代码中，给模块设置边框颜色的css样式没有成功，如下：
这是因为border属性就包含了border-color这个属性，所以样式没有成功，建议修改为：
4、img标签是行内块标签，行内块标签自带间距，如下：
建议给img设置display：block；通过这个css属性，把行内块标签转换为块标签，把自带的间距去掉，参考下图：
5、建议给每个块都添加个边距样式，样页面效果更美观.
6、六个盒子的样式是一样的，可以通过群组选择器来写css样式，这样代码比较简练不容易出错。
7、img图片的宽度是240px，那么建议图片容器的宽度也设置为240px。
参考下图修改：
如果帮助到了你，欢迎采纳，祝学习愉快，继续加油！
0
相似问题