请问老师我这代码该怎么改进？不会写了

来源：4-11 编程练习

qq_慕妹9276277

2022-04-17 23:32:53

<!DOCTYPE html>
<html>
<head>
        <!-- 此处编写样式 -->
        <style type="text/css">
        #div1{
       height: 500px;
       width: 900px;
       border: 1px solid;
       margin: 0px auto;
        }
        
        p{
        line-height: 0px;
        }
        #div2{
            
            border: 1px solid;
            margin: 0px 0px;
            padding-bottom: 0px;
            float:left;
            background-color: yellow;

        }
        #div3{
            border: 1px solid;
            margin: 0px 10px;
            padding-bottom: 0px;
            float:left;
        }
        #div4{
            border: 1px solid;
            margin: 0px 10px;
            padding-bottom: 0px;

            float:left;
        }
        #div5{
            border: 1px solid;
            margin: 10px 0px;
            padding-bottom: 0px;

            float:left;
        }
        #div6{
            border: 1px solid;
            margin: 10px 10px;
            padding-bottom: 0px;

            float:left;
        }
        #div7{
            border: 1px solid;
            margin: 10px 10px;
            padding-bottom: 0px;

            float:left;
        }

        </style>
</head>
<body>   
        <!-- 此处写代码 -->
        <div id="div1">
             <div id="div2">
                 <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
                 <p>欢迎来到慕课网学习新知识</p>
             </div>

             <div id="div3">
                 <img src="http://img1.sycdn.imooc.com\/climg/590fe97d00011bda02400135.jpg"/>
                 <p>欢迎来到慕课网学习新知</p>
             </div>

             <div id="div4">
                 <img src="http://img1.sycdn.imooc.com\/climg/590fe982000150ba02400135.jpg"/>
                 <p>欢迎来到慕课网学习新知</p>
             </div>

             <div id="div5">
                 <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
                     <p>欢迎来到慕课网学习新知识</p>
             </div>

             <div id="div6">
                 <img src="http://img1.sycdn.imooc.com\/climg/590fe97d00011bda02400135.jpg"/>
                     <p>欢迎来到慕课网学习新知</p>
             </div>

             <div id="div7">
                 <img src="http://img1.sycdn.imooc.com\/climg/590fe982000150ba02400135.jpg"/>
                     <p>欢迎来到慕课网学习新知</p>
             </div>
         
            
        </div>
</body>
</html>

写回答

2回答

好帮手慕小小

2022-04-18

已采纳

同学你好，同学最新的代码老师已经测试完毕，逻辑清晰，代码实现符合题目要求，继续加油！

祝学习愉快~

hq_慕妹9276277

hp>好的，谢谢老师

h022-04-18

共1条回复

qq_慕妹9276277

提问者

2022-04-18

半夜脑抽了，作业写的稀烂

<!DOCTYPE html>
<html>
<head>
        <!-- 此处编写样式 -->
        <style type="text/css">
        #div1{
       height: 400px;
       width: 765px;
       border: 1px dotted;
       margin: 0px auto;
        }
        
        p{
        line-height: 0px;
        }
        #div2{

            border: 1px solid;
            margin: 5px 5px;
            padding-bottom: 0px;
            float:left;
            
        }

        </style>
</head>
<body>   
        <!-- 此处写代码 -->
        <div id="div1">
             <div id="div2">
                 <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
                 <p>欢迎来到慕课网学习新知识</p>
             </div>

             <div id="div2">
                 <img src="http://img1.sycdn.imooc.com\/climg/590fe97d00011bda02400135.jpg"/>
                 <p>欢迎来到慕课网学习新知</p>
             </div>

             <div id="div2">
                 <img src="http://img1.sycdn.imooc.com\/climg/590fe982000150ba02400135.jpg"/>
                 <p>欢迎来到慕课网学习新知</p>
             </div>

             <div id="div2">
                 <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
                     <p>欢迎来到慕课网学习新知识</p>
             </div>

             <div id="div2">
                 <img src="http://img1.sycdn.imooc.com\/climg/590fe97d00011bda02400135.jpg"/>
                     <p>欢迎来到慕课网学习新知</p>
             </div>

             <div id="div2">
                 <img src="http://img1.sycdn.imooc.com\/climg/590fe982000150ba02400135.jpg"/>
                     <p>欢迎来到慕课网学习新知</p>
             </div>
         
            
        </div>
</body>
</html>

目前效果是这样的，怎么让文字贴合图片呢？

hq_慕妹9276277

hpre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head>  <style type="text/css"> #div1{ height: 350px; width: 760px; border: 1px dotted; margin: 0px auto; } #div2{ border: 1px solid; margin: 5px 5px; float:left; } </style> </head> <body>  <div id="div1"> <div id="div2"> <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/><br> <label>欢迎来到慕课网学习新知识</label> </div> <div id="div2"> <img src="http://img1.sycdn.imooc.com\/climg/590fe97d00011bda02400135.jpg"/><br> <label>欢迎来到慕课网学习新知识</label> </div> <div id="div2"> <img src="http://img1.sycdn.imooc.com\/climg/590fe982000150ba02400135.jpg"/><br> <label>欢迎来到慕课网学习新知识</label> </div> <div id="div2"> <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/><br> <label>欢迎来到慕课网学习新知识</label> </div> <div id="div2"> <img src="http://img1.sycdn.imooc.com\/climg/590fe97d00011bda02400135.jpg"/><br> <label>欢迎来到慕课网学习新知识</label> </div> <div id="div2"> <img src="http://img1.sycdn.imooc.com\/climg/590fe982000150ba02400135.jpg"/><br> <label>欢迎来到慕课网学习新知识</label> </div> </div> </body> </html>

可以了，请老师检查

h022-04-18

共1条回复

0 学习 · 16556 问题

查看课程

相似问题

为什么图片float之后文字不会位于图片下面

回答 1

老师，为什么用你上节课说的那个就无法清除成功？但是直接就写clear:both;就可以了？

回答 1

作业答疑，求改进

回答 2

老师，您好！浮动脱离文档流是一种怎样的脱离？

回答 3

老师请问我这样设置是对的吗？

回答 2

打开慕课网App查看更多内容