我是Web开发的新手，我正在学习CSS是如何工作的。 我正在创建一个有趣的模板来打发时间，但我注意到我的对齐根本不正确。当滚动或调整浏览器大小时，一切都不成比例。关于我正在做的事情有什么问题和/或需要改进的地方的任何帮助(我又是新手，很抱歉(
我尝试了其他解决方案，但无法使其工作。 我直接链接了我的代码笔示例。
https://codepen.io/anon/pen/yxWvJO
<!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);
}
}
我强烈建议您尝试CSS弹性和网格，您的代码缺少基本格式，因此当您调整浏览器大小时，浏览器并不真正知道该怎么做，只是移动东西。
在尝试更复杂的技术之前，我建议您尝试最小化CSS，使用HTML中的中断并了解如何有效且非冗余地将页面中的元素居中。
总而言之，这不是最糟糕的开始，祝你的学习过程好运！
我将从最后开始 - 不幸的是，您不能在每个设备上使用此代码获得相同的结果。虽然它可以在计算机屏幕上工作，但 problams 从较小的屏幕上开始 - 主要是因为您使用绝对位置和像素单元。
解决方案可以是断点(css 媒体查询(，以便您可以根据屏幕大小设置不同的样式，也可以使用百分比值(具有最小宽度值(，但不建议使用该代码。
最好不要自己使用框架和代码。你应该学习html和css，以便获得更多的工具。我建议从w3schools和mdn开始，但是还有很多其他指南...
顺便说一句 - 它在我的笔记本电脑上看起来非常好！祝你好运，最重要的是 - 享受编码！
我建议您查看有关CSS Flexbox和Media查询的信息。 这个与许多教程/示例的链接将帮助您了解有关CSS和定位的更多信息。因为您的代码需要适应每个屏幕(移动设备和台式机(。您的网站看起来不错，继续编码！