4-11的float编程练习还可以优化吗？总感觉哪里不对。
来源：4-12 编程练习
慕沐7264149
2019-09-30 22:48:59
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
#div0{
float:left;
}
#small{
border:1px solid;
padding:1px;
margin:3px;
float:left;
line-height:10px
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id="div0">
<div id="small">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div id="small">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div id="small">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div id="small">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div id="small">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div id="small">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识!</p>
</div>
</div>
</body>
</html>写回答
1回答
-
好帮手慕阿莹
2019-10-06
1、同学你好，同学的代码有些和作业要求不一致哦：作业要求如下图所示
外层有一圈虚线的框框
而同学的当屏幕比较大时，会是如下：
修改建议：
1、修改建议同学可以看一下老师写的注释哦，修改后如下
<!DOCTYPE html> <html> <head> <!-- 此处编写样式 --> <style> #div0{ margin:20px 20px 20px 20px; width: 850px; background-color: #ffffff; border:1px dashed grey;/* 设置边框 */ float: left; } #small{ margin:20px 20px 20px 20px; float: left; /* 设置边框，并使文字水平居中 */ border:1px solid grey; text-align: center; } </style> </head> <body> <!-- 此处写代码 --> <div id="div0"> <div id="small"> <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/> <p>欢迎来到慕课网学习新知识!</p> </div> <div id="small"> <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/> <p>欢迎来到慕课网学习新知识!</p> </div> <div id="small"> <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/> <p>欢迎来到慕课网学习新知识!</p> </div> <div id="small"> <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/> <p>欢迎来到慕课网学习新知识!</p> </div> <div id="small"> <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/> <p>欢迎来到慕课网学习新知识!</p> </div> <div id="small"> <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/> <p>欢迎来到慕课网学习新知识!</p> </div> </div> </body> </html>如果我的回答解决了你的疑问，请采纳，祝学习愉快。
0
相似问题