3-15练习

来源：3-19 编程练习

慕标4569417

2017-09-21 15:54:14

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>border属性</title>
    <style type="text/css">
        .container{
          width:200px;
          height:200px;
          background-color:pink;
            /*补充样式*/
            
            
        }
        .content{
          width:100px;
          height:100px;
          background-color:purple;
          padding:50px 100px;
           /*补充样式*/
           
           
        }
span{background-color:yellow; padding:30px;}
    </style>
</head>
<body>
    <div class="container">
      <div class="content">
         <span>
           我是span元素
          </span>
</div>
    </div>
</body>
</html>

麻烦老师帮忙看看这写的对不对

写回答

1回答

樱桃小胖子

2017-09-21

整体来说大体的思路是对的，但是实现的效果是不正确的，我在你的代码上进行了完善，建议对比参考一下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>border属性</title>
    <style type="text/css">
    .container{
        width: 300px;
        height: 280px;
        background-color:pink;
        /*添加overflow:hidden是为了解决content设置margin:50px 0 0 100px; 导致的粉色背景同时下移的效果*/
        overflow:hidden;
        /*补充样式*/
    }

    .content {
        width: 165px;
        height: 165px;
        background-color: green;
       /* padding: 50px 100px;*/
       margin:50px 0 0 100px; 
        /*补充样式*/
    }

    span {
    	display: inline-block;
        background-color: yellow;
        margin: 30px;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="content">
            <span>
           	我是span元素
          </span>
        </div>
    </div>
</body>

</html>

祝学习愉快！

0 学习 · 36712 问题

查看课程

相似问题

关于3-11编程练习

回答 2

3-15编程练习

回答 1

3-15 编程练习问题

回答 3

3-15练习请老师批改

回答 1

盒子模型3-15编程练习

回答 1

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