Question

我是Web开发的新手，我正在学习CSS的工作方式。我正在创建一个有趣的模板来打发时间，但我发现对齐根本不正确。滚动浏览器或调整浏览器大小时，所有内容都不成比例。任何关于问题或对我正在做的事情有改进的帮助（再次是我的新手，很抱歉）

我尝试了其他解决方案，但无法正常工作。我直接链接了我的Codepen示例。

<!DOCTYPE html>
<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">
  <title>OSRS - Template</title>
  <link rel="icon" href="images/favicon.png" />
  <link rel="stylesheet" href="css/custom.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div class="container">
      <div class="logo"></div>
    <div class="scroll-middle"></div>
    <div class="scroll-top"></div>
    <div class="scroll-bottom"></div>

    <ul>
      <li><a href="#" data-toggle="tooltip" title="Chat anytime on our discord">Button 1</a></li>
      <li><a href="#" data-toggle="tooltip" title="Get going!">Button 2</a></li>
      <li><a href="#" data-toggle="tooltip" title="Find out the VIP benefits!">Button 3</a></li>
    </ul>
    <div class="video">
      <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/IcgB_OzA_sE?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
    <div class="discordapp">
      <iframe src="https://discordapp.com/widget?id=488699973156864030&theme=dark" width="350" height="380" allowcontrols="true" allowtransparency="true" frameborder="0"></iframe>
    </div>
    </div>
</body>

</html>



/*
* Defines the body & html attributes
*/
body,
html {
  font-family: 'Helvetica', sans-serif;
  background-image: url(https://www.runescape.com/img/rsp777/bg2.jpg);
  background-size: cover;
  text-align: center;
  padding: 0;
  margin: 0;
}

/*
* Defines the list attributes
*/
ul {
  list-style-type: none;
  margin: 1;
  padding: 0;
  position: absolute;
  top: 25%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

/*
* Defines the list attributes
*/
li {
  float: left;
  background-image: url(https://www.runescape.com/img/rsp777/splash/button_small.gif);
  top: 117px;
  height: 63px;
  margin: 5px;
  position: relative;
  width: 152px
}

/*
* Defines the list attributes
*/
li a {
  display: block;
  color: grey;
  top: 25%;
  text-align: center;
  padding: 20px 16px;
}

/*
* Defines the list attributes
*/
li a:hover {
  color: white;
}

::-webkit-scrollbar {
    display: none;
}

.video {
  position: absolute;
  top: 500px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container {
  width: 100%;
  margin: auto;
  overflow: hidden;
}

/*
* Defines the container attributes
*/
.container-right {
  position: absolute;
  width: 250px;
  height: 250px;
  border-style: solid;
  border-width: 2px;
  border-color: silver;
  border-radius: 10px;
  top: 50%;
  left: 90%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

/*
* Defines the title attributes
*/
.title-box {
  text-align: center
}

/*
* Defines the logo attributes
*/
.logo {
  background-image: url(https://vignette.wikia.nocookie.net/2007scape/images/4/41/Old_School_RuneScape_logo.png/revision/latest?cb=20170406224036);
  position: absolute;
  width: 250px;
  height: 175px;
  background-size: 250px 175px;
  top: 5%;
  left: 40%;
  transform: translate(-50%, -50%);
  animation: float 6s ease-in-out infinite;
}

.scroll-top {
  background-image: url(https://www.runescape.com/img/rsp777/grand_exchange/Scroll-Top.gif);
  position: absolute;
  width: 770px;
  height: 39px;
  background-size: 770px 39px;
  background-repeat: no-repeat;
  top: 250px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.scroll-middle {
  background-image: url(https://www.runescape.com/img/rsp777/scroll/backdrop_745.gif);
  background-repeat: repeat-y;
  position: absolute;
  width: 745px;
  height: 800px;
  top: 650px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.scroll-bottom {
  background-image: url(https://www.runescape.com/img/rsp777/grand_exchange/Scroll-Top.gif);
  position: absolute;
  width: 770px;
  height: 39px;
  background-size: 770px 39px;
  background-repeat: no-repeat;
  bottom: -429px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.discordapp {
  position: absolute;
  bottom: -565px;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*
* Defines the flating attributes
*/
@keyframes float {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-20px);
  }

  100% {
    transform: translatey(0px);
  }
}

Answer 1

我强烈建议您尝试使用CSS flex和grids，因为您的代码缺少基本的格式设置，因此当您调整浏览器的大小时，它并不真正知道该怎么做，而只是四处移动。

在尝试使用更复杂的技术之前，建议您尝试使用CSS中断来最小化CSS，并了解如何有效且非冗余地将页面中的元素居中。

总之，这不是最糟糕的开始，祝您学习过程顺利！

Answer 2

我将从头开始-不幸的是，您不能在每台设备上使用此代码获得相同的结果。当它在计算机屏幕上运行时，问题就从较小的屏幕上开始-主要是因为您使用的是绝对位置并且像素单位一致。

解决方案可以是断点（css媒体查询），因此您可以根据屏幕大小来设置不同的样式，也可以使用百分比值（带有最小宽度值），但是不建议在该代码中使用。

这是一个好习惯，不要自己使用框架和代码。您应该学习html和css以获得更多工具。我建议从w3schools和mdn开始，但是那里还有很多其他指南...

顺便说一句-在我的笔记本电脑上看起来非常漂亮！祝您好运，最重要的是-享受编码！

Answer 3

我建议您查看有关CSS Flexbox和Media queries的信息。这与许多教程/示例的链接将帮助您了解有关CSS和定位的更多信息。因为您的代码需要适应每个屏幕（移动设备和台式机）。您的网站看起来不错，请继续编码！

调整大小时的项目对齐

3 个答案: