这可能有点笨重，
基本上，我喜欢这个页面的布局方式，但是当我调整窗口大小时，因为我使用了 position: relative，一旦窗口足够小，很多元素就会重叠。此外，它通常是标准的(基于我访问过的网站)，在调整大小时，元素是固定的，你只需要滚动到屏幕外的元素，但在这种情况下，我的所有内容都随窗口缩放尺寸。我不确定随屏幕缩放的元素是好设计还是坏设计，但我想解决重叠问题。如果缩放元素的设计不佳，我将不胜感激关于在不缩放的情况下实现相同结果的任何建议。
我已经用纯色替换了大部分背景内容。另外，我知道很多我可能已经做的和将来要做的事情可能会被 JavaScript 缩短，但是我仍然需要学习它:)
任何关于类结构、标题、标签等的建议都会很有帮助，这只是我学习 html/css 的第二天。我目前正在寻找有关这些主题的在线资源!
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
position: fixed;
background: black;
font-family: Open Sans;
color: #FFFFFF;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
a {
text-decoration: none;
color: #FFFFFF;
opacity: 0.6;
}
a:hover {
opacity: 1;
}
h1 {
position: fixed;
top: 20%;
left: 50%;
transform: translate(-50%, -20%);
opacity: 0.5;
font-size: 3vw;
padding: 0;
margin: 0;
}
nav ul {
padding: 0;
border: 0;
margin: 0;
}
nav ul li {
list-style-type: none;
display: inline;
margin-left: 10px;
}
footer {
position: fixed;
bottom: 5vh;
right: 1.5vw;
}
#background-div {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
background: green;
height: 100%;
width: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
opacity: 0;
z-index: -1;
transition: ease-in 0.3s;
}
#background2-div {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
background: red;
height: 100%;
width: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
opacity: 0;
z-index: -1;
transition: ease-in 0.3s;
}
#intro .button {
position: fixed;
padding: 0;
background-position: center center;
background-size: 100% 100%;
background-repeat: no-repeat;
border-radius: 12px;
top: 50%;
transform: translate(0%, -50%);
width: 20vw;
height: 25vh;
transition: all 0.3s ease 0s;
opacity: 0.5;
border-color: black;
border-style: solid;
}
.button.english {
background-image: url('../images/uk_flag.png');
left: 15vw;
}
.button.portuguese {
background-image: url('../images/angola_flag.png');
right: 15vw;
}
.button.english div {
position: absolute;
top: 100%;
left: 48%;
transform: translate(-50%, 0);
color: white;
font-size: 4vw;
}
.button.portuguese div {
position: absolute;
top: 100%;
left: 49%;
transform: translate(-50%, 0);
color: white;
font-size: 3.5vw;
}
#welcome .button {
position: fixed;
padding: 0;
background-position: center center;
opacity: 0.7;
border-color: rgba(255, 255, 255, 0.5);
border-color: white;
border-style: solid;
border-radius: 12px;
width: 20vw;
height: 25vh;
top: 50%;
transform: translateY(-50%);
max-height: 80px;
max-width: 20vw;
}
.button.buy {
left: 15vw;
}
.button.sell {
right: 15vw;
}
.button.buy div,
.button.sell div {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4vw;
}
#intro .button:hover,
#welcome .button:hover {
opacity: 1;
border-color: white;
}
.button.buy:hover~#background-div {
opacity: 1;
border-color: white;
transition: ease-out 0.7s;
}
.button.sell:hover~#background2-div {
opacity: 1;
border-color: white;
transition: ease-out 0.7s;
}
#videoback {
position: fixed;
top: -64px;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: -2;
opacity: 0.2;
}<!doctype html>
<html lang="en">
<head>
<title>AB</title>
<link href="styles/intro.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<link href="welcome.html" rel="alternate" hreflang="en" />
<link href="welcome_pt.html" rel="alternate" hreflang="pt" />
</head>
<body id="welcome">
<a href="home.html" class="button buy" hreflang="en">
<div>Buy</div>
</a>
<a href="apply.html" class="button sell" hreflang="en">
<div>Sell</div>
</a>
<div id="background-div"></div>
<div id="background2-div"></div>
<video autoplay muted loop id="videoback">
<source src="videos/blessings.mp4" type="video/mp4">
</video>
<footer>
<div>
<nav>
<ul>
<li>
<a href="about.html" hreflang="en">About</a>
</li>
<li>
<a href="contact.html" hreflang="en">Contact</a>
</li>
</ul>
</nav>
</div>
</footer>
<!-- Scripts -->
</body>
</html>最佳答案
如果我理解正确，你可以使用 bootstrap 解决你的问题:
将其链接到您的 html 中:
link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="匿名">
使用 bootstrap 定义行及其列的大小:
<!-- this is necessary container to contain all your rows
note that you can have multiple containers per website, or even within
each other -->
<div class="container">
<!-- elements that will be displayed next to each other -->
<div class="row">
<!-- two elements that will divide the row by half until MD size: >=992px -->
<div class="col-md-6">content</div>
<div class="col-md-6">content</div>
</div>
<div class="row">
<!-- three elements that will always be shown next to each other-->
<div class="col-xs-4">content</div>
<div class="col-xs-4">content</div>
<div class="col-xs-4">content</div>
</div>
...
</div>
了解有关 Bootstrap 的更多信息:
关于html - 重叠内容(包括代码)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48214495/