小伙伴们,学习了margin外边距属性,根据效果图的提示,补充代码   。

效果图如下:

前端零基础入门 / 页面化妆师CSS/盒子模型/3-24编程练习

 

任务

 

第一步:设置列表项之间的距离

第二步:设置列表项与父元素之间的距离

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>margin外边距</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
             }
            ul{
                list-style:none;width:300px;height:400px;
                background-color:pink;
                padding-top:40px;
            }
            li{
                width:200px;height:50px;background-color:yellow;
                /*样式补充*/
                margin: 40px;
                
            }
        </style>
    </head>
    <body>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </body>
</html>

相关文章:

  • 2021-10-08
  • 2021-06-24
  • 2021-04-02
  • 2021-04-06
  • 2021-10-11
  • 2021-10-13
  • 2021-05-18
  • 2021-06-21
猜你喜欢
  • 2021-10-17
  • 2021-09-28
  • 2021-05-21
  • 2021-05-04
  • 2021-05-19
  • 2021-05-23
相关资源
相似解决方案