老师你好，请问我这样写法还缺点什么才能让图片像练习那样？
来源：3-4 编程练习
Liu1997
2019-07-31 15:40:16
<!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>
*{padding: 0;margin: 0; }
.container{width: 1000px;margin:0 auto; border: 1px solid gray;
overflow: hidden;}
a{text-decoration: none;}
.one{float: left; border: 1px solid #7d7d7d; width: 200px;height: 100px;margin: 10px;}
.two{float: left; border: 1px solid #7d7d7d; width: 200px;height: 100px;margin: 10px;}
.three{float: left;border: 1px solid #7d7d7d; width: 200px;height: 100px;margin: 10px; }
.four{float: left; border: 1px solid #7d7d7d; width: 200px;height: 100px;margin: 10px;}
.five{float: left; }
.six{float: left; }
</style>
</head>
<body>
<div class="container">
<div class="one"><a href="#"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" alt="logo1">
<p>欢迎来到慕课网学习新知识！</p></a></div>
<div class="two"><a href="#"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" alt="logo2">
<p>欢迎来到慕课网学习新知识！</p></a></div>
<div class="three"><a href="#"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" alt="logo3">
<p>欢迎来到慕课网学习新知识！</p></a></div>
<div class="four"><a href="#"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" alt="logo1">
<p>欢迎来到慕课网学习新知识！</p></a></div>
<div class="five"><a href="#"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" alt="logo2">
<p>欢迎来到慕课网学习新知识！</p></a></div> -->
<div class="six"><a href="#"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" alt="logo3">
<p>欢迎来到慕课网学习新知识！</p></a></div>
</div>
</body>
</html>
1回答
-
同学你好，
① 这里代码书写不规范哦~多写了-->
② 每一个div设置的宽高过小，建议：
③ 练习中图片到边框之间的距离是和图片到图片之间的距离相等的，所以要把
重合的margin去掉哦。
建议：
④ 最外层的宽度设置的太大，建议修改成776px，原因是：
建议：
0
相似问题