3-18编程练习问题

3-18编程练习问题

老师帮我看看我的代码是否正确,我的代码是:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>margin外边距</title>

        <style type="text/css">

            ul{

                list-style:none;width:300px;height:400px;

                background-color:pink;

                padding-top:40px;

                

                

            }

            li{

                width:200px;height:50px;background-color:yellow;

                /*样式补充*/

                margin-top:80px;

                margin-bottom:40px;

                margin-left:40px;

            }

        </style>

    </head>

    <body>

        <ul>

            <li>HTML</li>

            <li>CSS</li>

            <li>JavaScript</li>

        </ul>

    </body>

</html>

要实现的效果是:

http://img1.sycdn.imooc.com//climg/59fe7aff0001001e03110453.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>margin外边距</title>

        <style type="text/css">

            ul{

                list-style:none;width:300px;height:400px;

                background-color:pink;

                padding-top:40px;

                padding-left:0px;/*添加上,题目要求是左边距40px*/

            }

            li{

                width:200px;height:50px;background-color:yellow;

                margin-top:40px;/*margin-top:80px;对每一个li有效,80px>40px会显示80px的上外边距,所以不能用80px*/

                margin-bottom:40px;

                margin-left:40px;

            }

        </style>

    </head>

    <body>

        <ul>

            <li>HTML</li>

            <li>CSS</li>

            <li>JavaScript</li>

        </ul>

    </body>

</html>

题目中的无序列表是三个列表项的列表,所以你设置的 li{margin-top:80px;}对每一个li有效,自己上机操作下,注释我给你写好了

  • 慕运维3752689 提问者 #1
    为什么li里面要设置margin-bottom为40px,题目里面没有要求啊?还有li的margin-top里面为什么不能设置为80px,它题目本身就是要求80px的上外边距啊?
    2017-11-06 09:06:21
  • 前端射鸡师 回复 提问者 慕运维3752689 #2
    题目要求的是第一个列表项上方是80px,如果你在li设置了margin-top,相当于对每个li的上方都设置了80px外边距,图中的列表项之间是40px
    2017-11-06 09:36:40
  • 前端射鸡师 回复 提问者 慕运维3752689 #3
    可以不设置margin-bottom:40px,因为已经设置了margin-top:40px,所以列表项之间是40px的外边距,设置了也不矛盾,不影响结果,比如第一个li的下外边距是40px,第二个li的上外边距是40px,由于两个li的边距相等,所以他们之间的距离就是40px
    2017-11-06 09:39:47
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师