请检查一下代码哪里需要改正吗

来源：4-12 编程练习

muke_xinke

2020-07-20 18:44:37

<!DOCTYPE html>
<html>
<head>
        <!-- 此处编写样式 -->
        <style>
            #div1{
                width:800px;
                height:400px;
                border:1px dashed;
            }
            #div2,#div3,#div4{
                float:left;
                margin:20px 10px;
            }
            .div5{
                border:1px solid orange;
            }
            .div6{
                border:1px solid orange;
                margin-top:20px;
            }
        </style>
</head>
<body>   
        <!-- 此处写代码 -->    
        <div id="div1">
            <div id="div2">
                <div class="div5">
                    <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br>
                    欢迎来到慕课网学习新知识！
                </div>
                <div class="div6">
                    <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br>
                    欢迎来到慕课网学习新知识！
                </div>
            </div>
            <div id="div3">
                <div class="div5">
                    <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br>
                    欢迎来到慕课网学习新知识！
                </div>
                <div class="div6">
                    <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br>
                    欢迎来到慕课网学习新知识！
                </div>
            </div>
            <div id="div4">
                <div class="div5">
                    <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><br>
                    欢迎来到慕课网学习新知识！
                </div>
                <div class="div6">
                    <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><br>
                    欢迎来到慕课网学习新知识！
                </div>
            </div>
        </div>
</body>
</html>

写回答

1回答

好帮手慕小班

2020-07-20

已采纳

同学你好，复制运行贴出代码运行效果是正确的，实现了题目要求的浮动效果。

只是根据题目要求，需要一个大的容器来容纳这六个小的模块，这六个小模块中，每个小模块包含了两部分，上面的图片和下面的文字。同学可以参考如下例子看看，

<!DOCTYPE html>
<html>
<head>
    <title>folat</title>
    <style type="text/css">
        #content{
            border-style: dashed;
            border-color: grey;
            float:left;
            width: 790px;
        }

        .block{
            margin: 10px;
            border-style: solid;
            border-width: 1px;
            border-color: grey;
            float: left;
        }
        p{
            margin-top: 0px;
            margin-bottom: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="content">
        <div class="block" id="b1">
            <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
            <p>欢迎来到慕课网学习新知识！</p>
        </div>

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

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

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

        <div class="block" id="b6">
            <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
            <p>欢迎来到慕课网学习新知识！</p>
        </div>
    </div>
</body>
</html>

继续加油祝：学习愉快~

huke_xinke

h 明白了题目要分为6个小模块我按上下算一个模块等于分成3个模块了没符合题目要求

h020-07-20

共1条回复

0 学习 · 9666 问题

查看课程

相似问题

请问还有哪里需要改进的吗？

回答 2

烦请老师检查一下～

回答 1

键盘输入文字“此处输入代码”变了样子？

回答 2

老师，请帮忙检查一下，为什么不能出现图片

回答 1

老师，帮我检查一下实现的对吗？有什么需要改进的？

回答 1

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