请检查代码是否正确?另外实现代码同样的效果,如果不按要求操作,是否可以设置第二种?

来源:2-14 编程练习

吾里刘三岁

2020-03-11 17:13:44

第一种效果:

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    *{

      margin: 0;

      padding:0;

    }

    .test{

     width: 800px;

     height: 100px;

     background: red;

     /*此处写代码*/

     position:fixed;

     top:0px;

     left:50%;

     margin-left:-400px;

   }

   .out{

    width: 100%;

    height: 2000px;

    background-color: #abcdef;

  }

</style>

</head>

<body>

  <div class="out">

    <div class="test"></div>

  </div>

</body>

</html>

第二种效果:

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    *{

      margin: 0;

      padding:0;

    }

    .test{

     width: 800px;

     height: 100px;

     background: red;

     /*此处写代码*/

     position:fixed;

     top:0px;

     left:0px;

     right:0px;

     bottom:0px;

     margin:0 auto;

   }

   .out{

    width: 100%;

    height: 2000px;

    background-color: #abcdef;

  }

</style>

</head>

<body>

  <div class="out">

    <div class="test"></div>

  </div>

</body>

</html>


写回答

1回答

好帮手慕粉

2020-03-11

同学你好,关于同学的问题回答如下:

1、第一种是正确的。

2、第二种是正确的。

3、可以的。代码的实现方式有很多种,只要能够正确实现效果就行。

祝学习愉快~

0

0 学习 · 40143 问题

查看课程