发新贴  快速回复

完成作业,请老师看下

妙味用户196346
2017-07-24 11:09
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1
        {
            width: 414px;
            height: 414px;
            padding: 88px 140px;
            background-color:#e56d76;
        }
        .box2
        {
            width: 346px;
            height: 346px;
            padding: 32px;
            background-color:#e56b75;
            border: 3px dashed #ffffff;
        }
        .box3
        {
            width: 276px;
            height: 276px;
            background-color:#ea8891;
            padding: 33px;
            border: 2px solid #ffffff;
        }
        .box4
        {
            width: 214px;
            height: 214px;
            padding:30px;
            background-color:#fdad5f;
            border: 2px dotted #fffbf8;
        }
        .box5
        {
            width: 198px;
            height: 198px;
            padding: 7px;
            background-color:#faec4d;
            border: 1px dashed #ffffff;
        }
        .box6
         {
            width: 113px;
            height: 113px;
            padding: 43px 38px;
            background-color: #bfc649;
            border: 1px dashed #ffffff;
        }
        .box7
        {
            width: 113px;
            height: 113px;
            background-color:#e56d76;
            border: 2px solid #ffffff;
        }
        .box_0
        {
            width: 698px;
            height: 599px;
            background-color:#3c3b4b;
            border: 1px solid #3c3b4b;
        }
        .box_1
        {
            width: 410px;
            height: 410px;
            margin:92px 140px;
            border:5px solid #f38db9;
            background-color:#3c3b4b;
        }
        .box_2
        {
            width: 344px;
            height: 344px;
            border: 3px dotted #bae1fd;
            margin: 30px;
            background-color:#c5acdb;
        }
        .box_3
        {
            width: 276px;
            height: 276px;
            border: 2px dashed #ffffff;
            background-color: #9dc4f5;
            margin: 32px;
        }
        .box_4
        {
            width: 214px;
            height: 214px;
            border: 1px dashed #ffffff;
            background-color:#b9e0fe;
            margin:30px;
        }
        .box_5
        {
            width: 198px;
            height: 198px;
            border: 1px dashed #ffffff;
            margin: 7px;
            background-color:#b7b3e5;
        }
        .box_6
        {
            width: 113px;
            height: 113px;
            border: 2px dashed #ffffff;
            margin: 43px 38px;
            background-color:#bae1fd;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2">
        <div class="box3">
            <div class="box4">
                <div class="box5">
                    <div class="box6">
                        <div class="box7"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="box_0">
    <div class="box_1">
        <div class="box_2">
            <div class="box_3">
                <div class="box_4">
                    <div class="box_5">
                        <div class="box_6"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

本帖内容针对以下视频发布:

17-盒模型线框图(marging_padding)练习
 
TOM-c

作业完成得非常好,布局合理,代码风格、缩进等都非常好,继续加油哦!

2017-07-28 12:37  回复本帖
妙味用户282149

TOM-c 2017-07-28 12:37发表的内容:

作业完成得非常好,布局合理,代码风格、缩进等都非常好,继续加油哦!

我和前面那个同学是反着的,我一个盒子用的margin,第二个盒子用的paading。老师看看我有什么地方是错的么?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box1{
        width: 698px;
        height: 597px;
        border:1px solid #e56d76;
        background-color: #e56d76
    }
    #b1{
        width: 414px;
        height: 414px;
        border:3px dashed #ffffff;
        margin:90px 140px 90px 140px;
    }
    #b2{
        width:346px;
        height: 346px;
        border:2px solid #ffffff;
        margin: 32px;
        background-color: #ea8891
    }    
    #b3{
        width: 276px;
        height: 276px;
        border: 2px dashed #ffffff;
        margin: 33px;
        background-color: #fdad5f;
    }
    #b4{
        width: 214px;
        height: 214px;
        border:1px dashed #ffffff;
        margin: 30px ;
        background-color: #faec4d;
    }
    #b5{
        width: 198px;
        height: 198px;
        border:1px dashed #ffffff;
        margin: 7px;
        background-color: #bfc649;
    }
    #b6{
        width: 113px;
        height: 113px;
        border: 2px solid #ffffff;
        margin: 38px;
        background-color: #e56d76;
    }
    #Box2{
        width: 420px;
        height: 420px;
        background-color: #3c3b4b;
        padding: 92px 140px;
    }
    #B1{
        width: 350px;
        height: 350px;
        border: 5px solid #f38db9;
        padding:30px;
    }
    #B2{
        width: 281px;
        height: 281px;
        background-color: #c5acdb;
        padding:32px;
        border:3px dashed #bae1fd;

    }
    #B3{
        width: 212px;
        height: 212px;
        background-color: #9dc4f5;
        padding: 30px;
        border: 2px dashed #ffffff;
    }
    #B4{
        width: 200px;
        height: 200px;
        background-color: #b9e0fe;
        padding: 7px;
        border: 1px dashed #ffffff;
    }
    #B5{
        width: 122px;
        height: 122px;
        background-color: #b7b3e5;
        padding: 38px;
        border: 1px dashed #ffffff;
    }
    #B6{
        width:117px;
        height: 117px;
        background-color: #bae1fd;
        border: 1px dashed #ffffff;
    }
    </style>
</head>
<body>
<div id="box1">
    <div id="b1">
        <div id="b2">
            <div id="b3">
                <div id="b4">
                    <div id="b5">
                        <div id="b6">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="Box2">
    <div id="B1">
        <div id="B2">
            <div id="B3">
                <div id="B4">
                    <div id="B5">
                        <div id="B6">
                        </div>
                    </div>
                </div>
            <div>
        </div>
    </div>
</div>
</body>
</html>

2017-08-14 18:17  回复本帖
妙味用户282149

TOM-c 2017-07-28 12:37发表的内容:

作业完成得非常好,布局合理,代码风格、缩进等都非常好,继续加油哦!

我和前面那个同学是反着的,我一个盒子用的margin,第二个盒子用的paading。老师看看我有什么地方是错的么?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box1{
        width: 698px;
        height: 597px;
        border:1px solid #e56d76;
        background-color: #e56d76
    }
    #b1{
        width: 414px;
        height: 414px;
        border:3px dashed #ffffff;
        margin:90px 140px 90px 140px;
    }
    #b2{
        width:346px;
        height: 346px;
        border:2px solid #ffffff;
        margin: 32px;
        background-color: #ea8891
    }    
    #b3{
        width: 276px;
        height: 276px;
        border: 2px dashed #ffffff;
        margin: 33px;
        background-color: #fdad5f;
    }
    #b4{
        width: 214px;
        height: 214px;
        border:1px dashed #ffffff;
        margin: 30px ;
        background-color: #faec4d;
    }
    #b5{
        width: 198px;
        height: 198px;
        border:1px dashed #ffffff;
        margin: 7px;
        background-color: #bfc649;
    }
    #b6{
        width: 113px;
        height: 113px;
        border: 2px solid #ffffff;
        margin: 38px;
        background-color: #e56d76;
    }
    #Box2{
        width: 420px;
        height: 420px;
        background-color: #3c3b4b;
        padding: 92px 140px;
    }
    #B1{
        width: 350px;
        height: 350px;
        border: 5px solid #f38db9;
        padding:30px;
    }
    #B2{
        width: 281px;
        height: 281px;
        background-color: #c5acdb;
        padding:32px;
        border:3px dashed #bae1fd;

    }
    #B3{
        width: 212px;
        height: 212px;
        background-color: #9dc4f5;
        padding: 30px;
        border: 2px dashed #ffffff;
    }
    #B4{
        width: 200px;
        height: 200px;
        background-color: #b9e0fe;
        padding: 7px;
        border: 1px dashed #ffffff;
    }
    #B5{
        width: 122px;
        height: 122px;
        background-color: #b7b3e5;
        padding: 38px;
        border: 1px dashed #ffffff;
    }
    #B6{
        width:117px;
        height: 117px;
        background-color: #bae1fd;
        border: 1px dashed #ffffff;
    }
    </style>
</head>
<body>
<div id="box1">
    <div id="b1">
        <div id="b2">
            <div id="b3">
                <div id="b4">
                    <div id="b5">
                        <div id="b6">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="Box2">
    <div id="B1">
        <div id="B2">
            <div id="B3">
                <div id="B4">
                    <div id="B5">
                        <div id="B6">
                        </div>
                    </div>
                </div>
            <div>
        </div>
    </div>
</div>
</body>
</html>

2017-08-14 18:17  回复本帖
妙味用户282149

TOM-c 2017-07-28 12:37发表的内容:

作业完成得非常好,布局合理,代码风格、缩进等都非常好,继续加油哦!

我和前面那个同学是反着的,我一个盒子用的margin,第二个盒子用的paading。老师看看我有什么地方是错的么?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box1{
        width: 698px;
        height: 597px;
        border:1px solid #e56d76;
        background-color: #e56d76
    }
    #b1{
        width: 414px;
        height: 414px;
        border:3px dashed #ffffff;
        margin:90px 140px 90px 140px;
    }
    #b2{
        width:346px;
        height: 346px;
        border:2px solid #ffffff;
        margin: 32px;
        background-color: #ea8891
    }    
    #b3{
        width: 276px;
        height: 276px;
        border: 2px dashed #ffffff;
        margin: 33px;
        background-color: #fdad5f;
    }
    #b4{
        width: 214px;
        height: 214px;
        border:1px dashed #ffffff;
        margin: 30px ;
        background-color: #faec4d;
    }
    #b5{
        width: 198px;
        height: 198px;
        border:1px dashed #ffffff;
        margin: 7px;
        background-color: #bfc649;
    }
    #b6{
        width: 113px;
        height: 113px;
        border: 2px solid #ffffff;
        margin: 38px;
        background-color: #e56d76;
    }
    #Box2{
        width: 420px;
        height: 420px;
        background-color: #3c3b4b;
        padding: 92px 140px;
    }
    #B1{
        width: 350px;
        height: 350px;
        border: 5px solid #f38db9;
        padding:30px;
    }
    #B2{
        width: 281px;
        height: 281px;
        background-color: #c5acdb;
        padding:32px;
        border:3px dashed #bae1fd;

    }
    #B3{
        width: 212px;
        height: 212px;
        background-color: #9dc4f5;
        padding: 30px;
        border: 2px dashed #ffffff;
    }
    #B4{
        width: 200px;
        height: 200px;
        background-color: #b9e0fe;
        padding: 7px;
        border: 1px dashed #ffffff;
    }
    #B5{
        width: 122px;
        height: 122px;
        background-color: #b7b3e5;
        padding: 38px;
        border: 1px dashed #ffffff;
    }
    #B6{
        width:117px;
        height: 117px;
        background-color: #bae1fd;
        border: 1px dashed #ffffff;
    }
    </style>
</head>
<body>
<div id="box1">
    <div id="b1">
        <div id="b2">
            <div id="b3">
                <div id="b4">
                    <div id="b5">
                        <div id="b6">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="Box2">
    <div id="B1">
        <div id="B2">
            <div id="B3">
                <div id="B4">
                    <div id="B5">
                        <div id="B6">
                        </div>
                    </div>
                </div>
            <div>
        </div>
    </div>
</div>
</body>
</html>

2017-08-14 18:17  回复本帖
妙味用户282149

TOM-c 2017-07-28 12:37发表的内容:

作业完成得非常好,布局合理,代码风格、缩进等都非常好,继续加油哦!

我和前面那个同学是反着的,我一个盒子用的margin,第二个盒子用的paading。老师看看我有什么地方是错的么?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box1{
        width: 698px;
        height: 597px;
        border:1px solid #e56d76;
        background-color: #e56d76
    }
    #b1{
        width: 414px;
        height: 414px;
        border:3px dashed #ffffff;
        margin:90px 140px 90px 140px;
    }
    #b2{
        width:346px;
        height: 346px;
        border:2px solid #ffffff;
        margin: 32px;
        background-color: #ea8891
    }    
    #b3{
        width: 276px;
        height: 276px;
        border: 2px dashed #ffffff;
        margin: 33px;
        background-color: #fdad5f;
    }
    #b4{
        width: 214px;
        height: 214px;
        border:1px dashed #ffffff;
        margin: 30px ;
        background-color: #faec4d;
    }
    #b5{
        width: 198px;
        height: 198px;
        border:1px dashed #ffffff;
        margin: 7px;
        background-color: #bfc649;
    }
    #b6{
        width: 113px;
        height: 113px;
        border: 2px solid #ffffff;
        margin: 38px;
        background-color: #e56d76;
    }
    #Box2{
        width: 420px;
        height: 420px;
        background-color: #3c3b4b;
        padding: 92px 140px;
    }
    #B1{
        width: 350px;
        height: 350px;
        border: 5px solid #f38db9;
        padding:30px;
    }
    #B2{
        width: 281px;
        height: 281px;
        background-color: #c5acdb;
        padding:32px;
        border:3px dashed #bae1fd;

    }
    #B3{
        width: 212px;
        height: 212px;
        background-color: #9dc4f5;
        padding: 30px;
        border: 2px dashed #ffffff;
    }
    #B4{
        width: 200px;
        height: 200px;
        background-color: #b9e0fe;
        padding: 7px;
        border: 1px dashed #ffffff;
    }
    #B5{
        width: 122px;
        height: 122px;
        background-color: #b7b3e5;
        padding: 38px;
        border: 1px dashed #ffffff;
    }
    #B6{
        width:117px;
        height: 117px;
        background-color: #bae1fd;
        border: 1px dashed #ffffff;
    }
    </style>
</head>
<body>
<div id="box1">
    <div id="b1">
        <div id="b2">
            <div id="b3">
                <div id="b4">
                    <div id="b5">
                        <div id="b6">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="Box2">
    <div id="B1">
        <div id="B2">
            <div id="B3">
                <div id="B4">
                    <div id="B5">
                        <div id="B6">
                        </div>
                    </div>
                </div>
            <div>
        </div>
    </div>
</div>
</body>
</html>

2017-08-14 18:17  回复本帖
妙味用户282149

TOM-c 2017-07-28 12:37发表的内容:

作业完成得非常好,布局合理,代码风格、缩进等都非常好,继续加油哦!

我和前面那个同学是反着的,我一个盒子用的margin,第二个盒子用的paading。老师看看我有什么地方是错的么?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box1{
        width: 698px;
        height: 597px;
        border:1px solid #e56d76;
        background-color: #e56d76
    }
    #b1{
        width: 414px;
        height: 414px;
        border:3px dashed #ffffff;
        margin:90px 140px 90px 140px;
    }
    #b2{
        width:346px;
        height: 346px;
        border:2px solid #ffffff;
        margin: 32px;
        background-color: #ea8891
    }    
    #b3{
        width: 276px;
        height: 276px;
        border: 2px dashed #ffffff;
        margin: 33px;
        background-color: #fdad5f;
    }
    #b4{
        width: 214px;
        height: 214px;
        border:1px dashed #ffffff;
        margin: 30px ;
        background-color: #faec4d;
    }
    #b5{
        width: 198px;
        height: 198px;
        border:1px dashed #ffffff;
        margin: 7px;
        background-color: #bfc649;
    }
    #b6{
        width: 113px;
        height: 113px;
        border: 2px solid #ffffff;
        margin: 38px;
        background-color: #e56d76;
    }
    #Box2{
        width: 420px;
        height: 420px;
        background-color: #3c3b4b;
        padding: 92px 140px;
    }
    #B1{
        width: 350px;
        height: 350px;
        border: 5px solid #f38db9;
        padding:30px;
    }
    #B2{
        width: 281px;
        height: 281px;
        background-color: #c5acdb;
        padding:32px;
        border:3px dashed #bae1fd;

    }
    #B3{
        width: 212px;
        height: 212px;
        background-color: #9dc4f5;
        padding: 30px;
        border: 2px dashed #ffffff;
    }
    #B4{
        width: 200px;
        height: 200px;
        background-color: #b9e0fe;
        padding: 7px;
        border: 1px dashed #ffffff;
    }
    #B5{
        width: 122px;
        height: 122px;
        background-color: #b7b3e5;
        padding: 38px;
        border: 1px dashed #ffffff;
    }
    #B6{
        width:117px;
        height: 117px;
        background-color: #bae1fd;
        border: 1px dashed #ffffff;
    }
    </style>
</head>
<body>
<div id="box1">
    <div id="b1">
        <div id="b2">
            <div id="b3">
                <div id="b4">
                    <div id="b5">
                        <div id="b6">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="Box2">
    <div id="B1">
        <div id="B2">
            <div id="B3">
                <div id="B4">
                    <div id="B5">
                        <div id="B6">
                        </div>
                    </div>
                </div>
            <div>
        </div>
    </div>
</div>
</body>
</html>

2017-08-14 18:17  回复本帖
妙味用户282149

TOM-c 2017-07-28 12:37发表的内容:

作业完成得非常好,布局合理,代码风格、缩进等都非常好,继续加油哦!

我和前面那个同学是反着的,我一个盒子用的margin,第二个盒子用的paading。老师看看我有什么地方是错的么?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box1{
        width: 698px;
        height: 597px;
        border:1px solid #e56d76;
        background-color: #e56d76
    }
    #b1{
        width: 414px;
        height: 414px;
        border:3px dashed #ffffff;
        margin:90px 140px 90px 140px;
    }
    #b2{
        width:346px;
        height: 346px;
        border:2px solid #ffffff;
        margin: 32px;
        background-color: #ea8891
    }    
    #b3{
        width: 276px;
        height: 276px;
        border: 2px dashed #ffffff;
        margin: 33px;
        background-color: #fdad5f;
    }
    #b4{
        width: 214px;
        height: 214px;
        border:1px dashed #ffffff;
        margin: 30px ;
        background-color: #faec4d;
    }
    #b5{
        width: 198px;
        height: 198px;
        border:1px dashed #ffffff;
        margin: 7px;
        background-color: #bfc649;
    }
    #b6{
        width: 113px;
        height: 113px;
        border: 2px solid #ffffff;
        margin: 38px;
        background-color: #e56d76;
    }
    #Box2{
        width: 420px;
        height: 420px;
        background-color: #3c3b4b;
        padding: 92px 140px;
    }
    #B1{
        width: 350px;
        height: 350px;
        border: 5px solid #f38db9;
        padding:30px;
    }
    #B2{
        width: 281px;
        height: 281px;
        background-color: #c5acdb;
        padding:32px;
        border:3px dashed #bae1fd;

    }
    #B3{
        width: 212px;
        height: 212px;
        background-color: #9dc4f5;
        padding: 30px;
        border: 2px dashed #ffffff;
    }
    #B4{
        width: 200px;
        height: 200px;
        background-color: #b9e0fe;
        padding: 7px;
        border: 1px dashed #ffffff;
    }
    #B5{
        width: 122px;
        height: 122px;
        background-color: #b7b3e5;
        padding: 38px;
        border: 1px dashed #ffffff;
    }
    #B6{
        width:117px;
        height: 117px;
        background-color: #bae1fd;
        border: 1px dashed #ffffff;
    }
    </style>
</head>
<body>
<div id="box1">
    <div id="b1">
        <div id="b2">
            <div id="b3">
                <div id="b4">
                    <div id="b5">
                        <div id="b6">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="Box2">
    <div id="B1">
        <div id="B2">
            <div id="B3">
                <div id="B4">
                    <div id="B5">
                        <div id="B6">
                        </div>
                    </div>
                </div>
            <div>
        </div>
    </div>
</div>
</body>
</html>

2017-08-14 18:17  回复本帖
妙味用户282149

TOM-c 2017-07-28 12:37发表的内容:

作业完成得非常好,布局合理,代码风格、缩进等都非常好,继续加油哦!

我和前面那个同学是反着的,我一个盒子用的margin,第二个盒子用的paading。老师看看我有什么地方是错的么?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box1{
        width: 698px;
        height: 597px;
        border:1px solid #e56d76;
        background-color: #e56d76
    }
    #b1{
        width: 414px;
        height: 414px;
        border:3px dashed #ffffff;
        margin:90px 140px 90px 140px;
    }
    #b2{
        width:346px;
        height: 346px;
        border:2px solid #ffffff;
        margin: 32px;
        background-color: #ea8891
    }    
    #b3{
        width: 276px;
        height: 276px;
        border: 2px dashed #ffffff;
        margin: 33px;
        background-color: #fdad5f;
    }
    #b4{
        width: 214px;
        height: 214px;
        border:1px dashed #ffffff;
        margin: 30px ;
        background-color: #faec4d;
    }
    #b5{
        width: 198px;
        height: 198px;
        border:1px dashed #ffffff;
        margin: 7px;
        background-color: #bfc649;
    }
    #b6{
        width: 113px;
        height: 113px;
        border: 2px solid #ffffff;
        margin: 38px;
        background-color: #e56d76;
    }
    #Box2{
        width: 420px;
        height: 420px;
        background-color: #3c3b4b;
        padding: 92px 140px;
    }
    #B1{
        width: 350px;
        height: 350px;
        border: 5px solid #f38db9;
        padding:30px;
    }
    #B2{
        width: 281px;
        height: 281px;
        background-color: #c5acdb;
        padding:32px;
        border:3px dashed #bae1fd;

    }
    #B3{
        width: 212px;
        height: 212px;
        background-color: #9dc4f5;
        padding: 30px;
        border: 2px dashed #ffffff;
    }
    #B4{
        width: 200px;
        height: 200px;
        background-color: #b9e0fe;
        padding: 7px;
        border: 1px dashed #ffffff;
    }
    #B5{
        width: 122px;
        height: 122px;
        background-color: #b7b3e5;
        padding: 38px;
        border: 1px dashed #ffffff;
    }
    #B6{
        width:117px;
        height: 117px;
        background-color: #bae1fd;
        border: 1px dashed #ffffff;
    }
    </style>
</head>
<body>
<div id="box1">
    <div id="b1">
        <div id="b2">
            <div id="b3">
                <div id="b4">
                    <div id="b5">
                        <div id="b6">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="Box2">
    <div id="B1">
        <div id="B2">
            <div id="B3">
                <div id="B4">
                    <div id="B5">
                        <div id="B6">
                        </div>
                    </div>
                </div>
            <div>
        </div>
    </div>
</div>
</body>
</html>

2017-08-14 18:17  回复本帖
妙味用户282149

TOM-c 2017-07-28 12:37发表的内容:

作业完成得非常好,布局合理,代码风格、缩进等都非常好,继续加油哦!

我和前面那个同学是反着的,我一个盒子用的margin,第二个盒子用的paading。老师看看我有什么地方是错的么?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box1{
        width: 698px;
        height: 597px;
        border:1px solid #e56d76;
        background-color: #e56d76
    }
    #b1{
        width: 414px;
        height: 414px;
        border:3px dashed #ffffff;
        margin:90px 140px 90px 140px;
    }
    #b2{
        width:346px;
        height: 346px;
        border:2px solid #ffffff;
        margin: 32px;
        background-color: #ea8891
    }    
    #b3{
        width: 276px;
        height: 276px;
        border: 2px dashed #ffffff;
        margin: 33px;
        background-color: #fdad5f;
    }
    #b4{
        width: 214px;
        height: 214px;
        border:1px dashed #ffffff;
        margin: 30px ;
        background-color: #faec4d;
    }
    #b5{
        width: 198px;
        height: 198px;
        border:1px dashed #ffffff;
        margin: 7px;
        background-color: #bfc649;
    }
    #b6{
        width: 113px;
        height: 113px;
        border: 2px solid #ffffff;
        margin: 38px;
        background-color: #e56d76;
    }
    #Box2{
        width: 420px;
        height: 420px;
        background-color: #3c3b4b;
        padding: 92px 140px;
    }
    #B1{
        width: 350px;
        height: 350px;
        border: 5px solid #f38db9;
        padding:30px;
    }
    #B2{
        width: 281px;
        height: 281px;
        background-color: #c5acdb;
        padding:32px;
        border:3px dashed #bae1fd;

    }
    #B3{
        width: 212px;
        height: 212px;
        background-color: #9dc4f5;
        padding: 30px;
        border: 2px dashed #ffffff;
    }
    #B4{
        width: 200px;
        height: 200px;
        background-color: #b9e0fe;
        padding: 7px;
        border: 1px dashed #ffffff;
    }
    #B5{
        width: 122px;
        height: 122px;
        background-color: #b7b3e5;
        padding: 38px;
        border: 1px dashed #ffffff;
    }
    #B6{
        width:117px;
        height: 117px;
        background-color: #bae1fd;
        border: 1px dashed #ffffff;
    }
    </style>
</head>
<body>
<div id="box1">
    <div id="b1">
        <div id="b2">
            <div id="b3">
                <div id="b4">
                    <div id="b5">
                        <div id="b6">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="Box2">
    <div id="B1">
        <div id="B2">
            <div id="B3">
                <div id="B4">
                    <div id="B5">
                        <div id="B6">
                        </div>
                    </div>
                </div>
            <div>
        </div>
    </div>
</div>
</body>
</html>

2017-08-14 18:17  回复本帖
妙味用户282149

TOM-c 2017-07-28 12:37发表的内容:

作业完成得非常好,布局合理,代码风格、缩进等都非常好,继续加油哦!

我和前面那个同学是反着的,我一个盒子用的margin,第二个盒子用的paading。老师看看我有什么地方是错的么?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box1{
        width: 698px;
        height: 597px;
        border:1px solid #e56d76;
        background-color: #e56d76
    }
    #b1{
        width: 414px;
        height: 414px;
        border:3px dashed #ffffff;
        margin:90px 140px 90px 140px;
    }
    #b2{
        width:346px;
        height: 346px;
        border:2px solid #ffffff;
        margin: 32px;
        background-color: #ea8891
    }    
    #b3{
        width: 276px;
        height: 276px;
        border: 2px dashed #ffffff;
        margin: 33px;
        background-color: #fdad5f;
    }
    #b4{
        width: 214px;
        height: 214px;
        border:1px dashed #ffffff;
        margin: 30px ;
        background-color: #faec4d;
    }
    #b5{
        width: 198px;
        height: 198px;
        border:1px dashed #ffffff;
        margin: 7px;
        background-color: #bfc649;
    }
    #b6{
        width: 113px;
        height: 113px;
        border: 2px solid #ffffff;
        margin: 38px;
        background-color: #e56d76;
    }
    #Box2{
        width: 420px;
        height: 420px;
        background-color: #3c3b4b;
        padding: 92px 140px;
    }
    #B1{
        width: 350px;
        height: 350px;
        border: 5px solid #f38db9;
        padding:30px;
    }
    #B2{
        width: 281px;
        height: 281px;
        background-color: #c5acdb;
        padding:32px;
        border:3px dashed #bae1fd;

    }
    #B3{
        width: 212px;
        height: 212px;
        background-color: #9dc4f5;
        padding: 30px;
        border: 2px dashed #ffffff;
    }
    #B4{
        width: 200px;
        height: 200px;
        background-color: #b9e0fe;
        padding: 7px;
        border: 1px dashed #ffffff;
    }
    #B5{
        width: 122px;
        height: 122px;
        background-color: #b7b3e5;
        padding: 38px;
        border: 1px dashed #ffffff;
    }
    #B6{
        width:117px;
        height: 117px;
        background-color: #bae1fd;
        border: 1px dashed #ffffff;
    }
    </style>
</head>
<body>
<div id="box1">
    <div id="b1">
        <div id="b2">
            <div id="b3">
                <div id="b4">
                    <div id="b5">
                        <div id="b6">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="Box2">
    <div id="B1">
        <div id="B2">
            <div id="B3">
                <div id="B4">
                    <div id="B5">
                        <div id="B6">
                        </div>
                    </div>
                </div>
            <div>
        </div>
    </div>
</div>
</body>
</html>

2017-08-14 18:17  回复本帖
妙味用户282149

TOM-c 2017-07-28 12:37发表的内容:

作业完成得非常好,布局合理,代码风格、缩进等都非常好,继续加油哦!

我和前面那个同学是反着的,我一个盒子用的margin,第二个盒子用的paading。老师看看我有什么地方是错的么?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box1{
        width: 698px;
        height: 597px;
        border:1px solid #e56d76;
        background-color: #e56d76
    }
    #b1{
        width: 414px;
        height: 414px;
        border:3px dashed #ffffff;
        margin:90px 140px 90px 140px;
    }
    #b2{
        width:346px;
        height: 346px;
        border:2px solid #ffffff;
        margin: 32px;
        background-color: #ea8891
    }    
    #b3{
        width: 276px;
        height: 276px;
        border: 2px dashed #ffffff;
        margin: 33px;
        background-color: #fdad5f;
    }
    #b4{
        width: 214px;
        height: 214px;
        border:1px dashed #ffffff;
        margin: 30px ;
        background-color: #faec4d;
    }
    #b5{
        width: 198px;
        height: 198px;
        border:1px dashed #ffffff;
        margin: 7px;
        background-color: #bfc649;
    }
    #b6{
        width: 113px;
        height: 113px;
        border: 2px solid #ffffff;
        margin: 38px;
        background-color: #e56d76;
    }
    #Box2{
        width: 420px;
        height: 420px;
        background-color: #3c3b4b;
        padding: 92px 140px;
    }
    #B1{
        width: 350px;
        height: 350px;
        border: 5px solid #f38db9;
        padding:30px;
    }
    #B2{
        width: 281px;
        height: 281px;
        background-color: #c5acdb;
        padding:32px;
        border:3px dashed #bae1fd;

    }
    #B3{
        width: 212px;
        height: 212px;
        background-color: #9dc4f5;
        padding: 30px;
        border: 2px dashed #ffffff;
    }
    #B4{
        width: 200px;
        height: 200px;
        background-color: #b9e0fe;
        padding: 7px;
        border: 1px dashed #ffffff;
    }
    #B5{
        width: 122px;
        height: 122px;
        background-color: #b7b3e5;
        padding: 38px;
        border: 1px dashed #ffffff;
    }
    #B6{
        width:117px;
        height: 117px;
        background-color: #bae1fd;
        border: 1px dashed #ffffff;
    }
    </style>
</head>
<body>
<div id="box1">
    <div id="b1">
        <div id="b2">
            <div id="b3">
                <div id="b4">
                    <div id="b5">
                        <div id="b6">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="Box2">
    <div id="B1">
        <div id="B2">
            <div id="B3">
                <div id="B4">
                    <div id="B5">
                        <div id="B6">
                        </div>
                    </div>
                </div>
            <div>
        </div>
    </div>
</div>
</body>
</html>

2017-08-14 18:17  回复本帖
妙味用户282149

TOM-c 2017-07-28 12:37发表的内容:

作业完成得非常好,布局合理,代码风格、缩进等都非常好,继续加油哦!

我和前面那个同学是反着的,我一个盒子用的margin,第二个盒子用的paading。老师看看我有什么地方是错的么?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box1{
        width: 698px;
        height: 597px;
        border:1px solid #e56d76;
        background-color: #e56d76
    }
    #b1{
        width: 414px;
        height: 414px;
        border:3px dashed #ffffff;
        margin:90px 140px 90px 140px;
    }
    #b2{
        width:346px;
        height: 346px;
        border:2px solid #ffffff;
        margin: 32px;
        background-color: #ea8891
    }    
    #b3{
        width: 276px;
        height: 276px;
        border: 2px dashed #ffffff;
        margin: 33px;
        background-color: #fdad5f;
    }
    #b4{
        width: 214px;
        height: 214px;
        border:1px dashed #ffffff;
        margin: 30px ;
        background-color: #faec4d;
    }
    #b5{
        width: 198px;
        height: 198px;
        border:1px dashed #ffffff;
        margin: 7px;
        background-color: #bfc649;
    }
    #b6{
        width: 113px;
        height: 113px;
        border: 2px solid #ffffff;
        margin: 38px;
        background-color: #e56d76;
    }
    #Box2{
        width: 420px;
        height: 420px;
        background-color: #3c3b4b;
        padding: 92px 140px;
    }
    #B1{
        width: 350px;
        height: 350px;
        border: 5px solid #f38db9;
        padding:30px;
    }
    #B2{
        width: 281px;
        height: 281px;
        background-color: #c5acdb;
        padding:32px;
        border:3px dashed #bae1fd;

    }
    #B3{
        width: 212px;
        height: 212px;
        background-color: #9dc4f5;
        padding: 30px;
        border: 2px dashed #ffffff;
    }
    #B4{
        width: 200px;
        height: 200px;
        background-color: #b9e0fe;
        padding: 7px;
        border: 1px dashed #ffffff;
    }
    #B5{
        width: 122px;
        height: 122px;
        background-color: #b7b3e5;
        padding: 38px;
        border: 1px dashed #ffffff;
    }
    #B6{
        width:117px;
        height: 117px;
        background-color: #bae1fd;
        border: 1px dashed #ffffff;
    }
    </style>
</head>
<body>
<div id="box1">
    <div id="b1">
        <div id="b2">
            <div id="b3">
                <div id="b4">
                    <div id="b5">
                        <div id="b6">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="Box2">
    <div id="B1">
        <div id="B2">
            <div id="B3">
                <div id="B4">
                    <div id="B5">
                        <div id="B6">
                        </div>
                    </div>
                </div>
            <div>
        </div>
    </div>
</div>
</body>
</html>

2017-08-14 18:17  回复本帖
登录 后才可以发表回复