害羞的新手 发表于 2020-11-6 21:49:39

这是怎么回事？

为什么我的喜剧的标题会空出来一些位置，而其他的没什么变化啊？<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>实验四</title>
    <style>
      .box1 {
            margin: 0 auto;
            width: 900px;
            border-bottom: double lightpink 5px;
      }

      .box1 span {
            display: block;
            float: right;
            font-size: 25px;
            margin-top: 10px;
            margin-right: 10px;
      }

      .box2 {
            width: 900px;
            height: 400px;
            margin: 5px auto;
      }

      .box2 img {
            width: 900px;
            height: 400px;
      }

      .box2 #box2 {
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(50, 34, 15, 0.5);
            position: relative;
            bottom: 225px;
      }

      .box2 span {
            font-size: 20px;
            color: white;
      }

      .box2-1 {
            float: left;
      }

      .box2-2 {
            float: right;
      }

      .box2-3 {
            width: 100px;
            display: flex;
            justify-content: space-around;
      }

      .box2-3 div {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            bottom: 50px;
            left: 325px;
            margin-left: 2px;
            margin-right: 1px;
      }

      .box3 {
            width: 900px;
            margin: 25px auto;
            border-top: dotted gray 3px;
      }

      .box3-1 {
            display: flex;
            justify-content: space-between;
      }

      .box3-1 img {
            width: 140px;
      }
    </style>
</head>

<body>
    <div class="box1">
      <img src="images/logo.jpg" alt="图片显示错误">
      <span><b>登录&nbsp;|&nbsp;注册</b></span>
    </div>
    <div class="box2">
      <a href="video/myVideo.mp4" target="blank"><img src="images/tuijian/tuijian-1.jpg" alt="图片无法显示"></a>
      <div class="box2-1" id="box2"><span>&lt;</span></div>
      <div class="box2-2" id="box2"><span>&gt;</span></div>
      <div class="box2-3">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
      </div>
    </div>
    <div class="box3">
      <h1>喜剧&gt;&gt;</h1>
      <div class="box3-1">
            <img src="images/xiju/xiju-1.png">

            <img src="images/xiju/xiju-2.png">

            <img src="images/xiju/xiju-3.png">

            <img src="images/xiju/xiju-4.png">

            <img src="images/xiju/xiju-5.png">

            <img src="images/xiju/xiju-6.png">
      </div>
    </div>
    <div class="box3">
      <h1>动画&gt;&gt;</h1>
      <div class="box3-1">
            <img src="images/donghua/donghua-1.png">

            <img src="images/donghua/donghua-2.png">

            <img src="images/donghua/donghua-3.png">

            <img src="images/donghua/donghua-4.png">

            <img src="images/donghua/donghua-5.png">

            <img src="images/donghua/donghua-6.png">
      </div>
    </div>
    <div class="box3">
      <h1>动作&gt;&gt;</h1>
      <div class="box3-1">
            <img src="images/dongzuo/dongzuo-1.png">

            <img src="images/dongzuo/dongzuo-2.png">

            <img src="images/dongzuo/dongzuo-3.png">

            <img src="images/dongzuo/dongzuo-4.png">

            <img src="images/dongzuo/dongzuo-5.png">

            <img src="images/dongzuo/dongzuo-6.png">
      </div>
    </div>
</body>

</html>
http://127.0.0.1:5500/%E5%AE%9E%E9%AA%8C%E5%9B%9B.html

真的只会一点点 发表于 2020-11-11 11:07:41

你的那个不是有空格符号嘛，当然会有空白啊

真的只会一点点 发表于 2020-11-11 11:10:02

我没太理解你的意思

害羞的新手 发表于 2020-11-11 15:31:55

真的只会一点点 发表于 2020-11-11 11:10
我没太理解你的意思

我的 喜剧>> 动画>> 动作>>都是统一定义的，而只有喜剧的前面有空白，为什么其他的标题不会改变？

害羞的新手 发表于 2020-11-11 15:32:28

真的只会一点点 发表于 2020-11-11 11:07
你的那个不是有空格符号嘛，当然会有空白啊

哪里有空格符号？

不二如是 发表于 2020-11-13 11:08:21

测试代码，位置是一样的：

害羞的新手 发表于 2020-11-14 12:14:38

不二如是 发表于 2020-11-13 11:08
测试代码，位置是一样的：

那如果是这样的话，可能是图片和标题的位置起冲突了吧，我重新写一下吧
页: [1]
查看完整版本: 这是怎么回事？