请老师检查一下,有没有问题。
对于下面的代码,我有两个问题:
1、效果显示的每个小模块的图片和模块的边框不是非常贴合,稍微有些偏差,应该怎么改进啊?
2、为什么img不加float:left,图片下面的文字为什么不会出现在图片的右边呢?按照学习的内容,应该会出现在右边才对。我不是很懂。
代码如下:
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style text="text/css">
#div-main{
border-color:grey;
border-style:dashed;
border-width:2px;
float:left;
padding:10px 10px 10px 10px;
}
#block{
border-color:grey;
border-style:solid;
border-width: 1px;
float:left;
margin:10px;
}
p{
line-height: 18px;
margin:0px;
text-align: center;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id="div-main">
<div id="block">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
<p>
欢迎来到慕课网学习新知识!
</p>
</div>
<div id="block">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
<p>
欢迎来到慕课网学习新知识!
</p>
</div>
<div id="block">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
<p>
欢迎来到慕课网学习新知识!
</p>
</div>
<br>
<div id="block">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
<p>
欢迎来到慕课网学习新知识!
</p>
</div>
<div id="block">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
<p>
欢迎来到慕课网学习新知识!
</p>
</div>
<div id="block">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
<p>
欢迎来到慕课网学习新知识!
</p>
</div>
</div>
</body>
</html>20
收起
正在回答 回答被采纳积分+1
3回答
2. 从网页搭建入门JavaWeb
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手,到Java Web基础,前后端结合助你完成Java Web小白的蜕变!
了解课程







恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星