请老师检查,有没有需要改进的地方?“控制位置为网页底部居中”这一部分应该怎么实现?

请老师检查,有没有需要改进的地方?“控制位置为网页底部居中”这一部分应该怎么实现?

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

       div {

            font-family: Arial;

            font-size: 72px;

            font-weight: bold;

            position: fixed;

            right: 0;

            left: 0;

            width: 30px;

            height: 30px;

            margin: auto;

            transform: rotate(90deg);

            bottom:30px;

            animation: move 1s linear 5s infinite;

        }

        @keyframes move {

            from {

                bottom:40px;

            }

            to {

               bottom:20px;

            }

        }

    </style>

</head>

<body>

    <div>&gt;</div>

</body>

</html>


正在回答 回答被采纳积分+1

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

1回答
好帮手慕久久 2021-10-15 16:16:41

同学你好,效果是对的。代码可以优化一下:

1、箭头所在的父元素,宽度设置太小了,文字超出了:

https://img1.sycdn.imooc.com//climg/616937c70907e30c03350072.jpg

建议调整宽高(数值合适就行),如下:

https://img1.sycdn.imooc.com//climg/6169382e09062e2c04550168.jpg

2、练习要求,延时0.5s,不是5s。建议调整延时时间:

https://img1.sycdn.imooc.com//climg/61693859091846ae06370090.jpg

问题解答如下:

同学已经实现了让箭头居于页面顶部,并水平居中:

https://img1.sycdn.imooc.com//climg/616938ca092ed52506200413.jpg

祝学习愉快!


  • 提问者 临溪倚山靠 #1

    left: 0;

    right: 0;

    margin:auto;

    老师,为什么这三行代码表示水平居中呢?那margin(0 auto),又是什么?


    2021-10-15 17:30:57
  • 好帮手慕久久 回复 提问者 临溪倚山靠 #2

    同学你好,这里算是定位的特殊用法,记住即可具体如下:

    1、当设置left:0、right:0,左右margin是auto时,就可以让元素水平居中:

    https://img1.sycdn.imooc.com//climg/61694fd409d82a3207470412.jpg

    2、当top:0、bottom:0,上下margin是auto时,就可以让元素垂直居中:

    https://img1.sycdn.imooc.com//climg/6169531e0980156c05460313.jpg

    3、如下这样写,则会水平、垂直居中:

    https://img1.sycdn.imooc.com//climg/6169536109ac6a2f06430364.jpg

    补充说明:

    margin:0 auto;意思是margin-left、margin-right均是auto,而margin-top、margin-bottom是0。


    2021-10-15 18:11:04
  • 提问者 临溪倚山靠 回复 好帮手慕久久 #3

    老师,left,right,top,bottom和margin-left、margin-right,margin-top、margin-bottom两组方位表示的含义分别是什么?这两组词的意义不同吗?

    2021-10-17 09:13:02
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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