我的页脚未对齐页面底部

问题描述 投票：0回答：3

我的页面上有一个叫做页脚的div class。它被设置为position:absolute;，底部为：0;，但它不像页脚那样与页面底部对齐。相反，它会粘在浏览器窗口的底部，并在滚动时随页面一起移动。

我希望它停留在页面底部，站点外，直到用户滚动到底部。我如何解决这个问题，究竟是什么阻止它走到谷底？

提前致谢！

body {
  font-size: 62.5%;
}

#main {
  height: 100%;
}

/* a href corrections */

.nav, .nav:visited {
  text-decoration: none;
  color: #f5f3f5;
}

.aga, .aga:visited {
  text-decoration: none;
  color: #000913;
}

/* stop */

.half {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 45em;
}

.bottomHalf {
  background-color: #69b4b2;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 45em;
  left: 0;
  height: 50em;
  z-index: -1;
  border-top: solid 0.5em #000913;
  border-bottom: solid 0.3em #000913;
}

.footer {
  background-color: #f5f3f5;
  position: absolute;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
}

.footer2 {
  background-color: #f5f3f5;
  position: absolute;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
  border-top: solid 0.3em #000913;
}

.footerText {
  font-family: "Rubik";
  color: #000913;
  font-size: 1.6em;
  vertical-align: middle;
  margin-left: 10em;
}

#ag1, #ag2 {
  position: absolute;
}

#ag1 {
  right: 41em;
}

#ag2 {
  right: 32em;
}

.half2 {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 13.1em;
}

#head {
  position: relative;
  left: 15em;
  top: 10em;
  max-width: 80%;
}

#subContainer {
  position: relative;
  left: 14em;
  top: 7em;
  max-width: 127.5em;
  margin-bottom: 10em;
  font-family: "Rubik";
}

#logo {
  width: 10em;
  height: 10em;
  margin: 0;
  position: relative;
  top: 1.5em;
  left: 1.9em;
  cursor: pointer;
}

#headHeader {
  display: flex;
}

#menu {
  list-style-type: none;
  display: flex;
  margin-left: 4.2em;
  position: relative;
  top: 1.7em;
  padding: 0;
}

.menuItem {
  margin-top: auto;
  margin-bottom: auto;
}

.menuItem a {
  font-family: "Rubik";
  font-size: 2.1em;
  color: #f5f3f5;
  background-color: #233039;
  padding: 0.9em 1.1em;
  /* max-height: 1.15em; */
}

.menuItem a:hover {
  background-color: #f5f3f5;
  color: #000913;
}

#headText {
  font-family: "Rubik";
  font-weight: bold;
  font-size: 5.0em;
  color: #233039;
}

#headText2 {
  font-family: "Rubik";
  font-weight: bold;
  font-size: 4.5em;
  color: #233039;
  text-align: center;
  margin: 0;
  padding: 0;
}

#headSubText {
  font-family: "Rubik";
  color: #233039;
  font-size: 2.3em;
  margin: 0;
  padding-top: 0.5em;
}

.ruleHeader {
  font-family: "Rubik";
  color: #233039;
  font-size: 2.3em;
  margin: 0;
  padding-top: 0.5em;
  font-weight: bold;
}

.ruleList {
  color: #233039;
  font-size: 2.2em;
}

#widget {
  margin-top: 3em;
  margin-right: auto;
  margin-left: auto;
  display: block;
}

#btnRow {
  margin-top: 1em;
}

.btnHead, .btnHead2 {
  font-family: "Rubik";
  font-size: 2.0em;
  font-weight: bold;
  padding: 0.6em 0.6em;
  background-color: #233039;
  border: none;
  color: #f5f3f5;
  margin-right: 1em;
  margin-top: 1em;
  margin-left: 0.4em;
  border-radius: 0.4em;
  border: solid 0.2em #233039;
  cursor: pointer;
}

.btnHead2 {
  margin-right: auto;
  margin-left: auto;
  display: block;
}

.btnHead2:hover {
  background-color: #f5f3f5;
  color: #233039;
  border: solid 0.2em #233039;
}

.btnHead:hover {
  background-color: #f5f3f5;
  color: #233039;
  border: solid 0.2em #f5f3f5;
}

/*
Color Palette:
#f5f3f5 - White Smoke
#69b4b2 - Green Sheen
#2ac15d - UFO Green
#233039 - Gunmetal
#000913 - Rich Black
*/

* {
  outline: solid;
}
<!DOCTYPE html>
<html>
  <head>
    <title>draft</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  <div id="main">
    <div class="half">
      <div id="headHeader">
        <img id="logo" src="http://.net/disclogo.png" onclick="window.location.href = 'index.html';"/>
        <ul id="menu">
          <li class="menuItem"><a href="index.html" class="nav">Home</a></li>
          <li class="menuItem"><a href="discord.html" class="nav">Discord</a></li>
          <li class="menuItem"><a href="rules.html" class="nav">Rules</a></li>
          <li class="menuItem"><a href="" class="nav">Forum</a></li>
          <li class="menuItem"><a href="" class="nav">Mods</a></li>
          <li class="menuItem"><a href="" class="nav">Admin</a></li>
          <li class="menuItem"><a href="" class="nav">Apply</a></li>
          <li class="menuItem"><a href="" class="nav">Donate</a></li>
          <li class="menuItem"><a href="" class="nav">Complaint</a></li>
          <li class="menuItem"><a href="" class="nav">About</a></li>
          <li class="menuItem"><a href="" class="nav">Contact</a></li>
        </ul>
      </div>
      <div id="head">
        <span id="headText">Opening Title</span>
        <div id="btnRow">
          <button class="btnHead" onclick="window.location.href = 'discord.html';">JOIN DISCORD</button>
          <button class="btnHead">DOWNLOAD MODS</button>
        </div>
      </div>
    </div>
    <div class="bottomHalf">

    </div>
    <div class="footer">
      <p class="footerText">&copy; 2018 All rights reserved.</p>
      <p class="footerText" id="ag1"><a href="https://tos..net" class="aga" target="_blank">Terms of Service</a></p>
      <p class="footerText" id="ag2"><a href="https://tos..net/privacy/" class="aga" target="_blank">Privacy Policy</a></p>
    </div>
  </div>
  </body>
</html>
html css
3个回答
1
投票

固定的页脚不是一个很好的解决方案，因为你只想在向下滚动时看到它。

其背后的主要思想是使用绝对位置，但重要的是要定义具有位置相对位置及其尺寸的右侧父级。在您的示例中，主容器具有100％但不是实际大小，如果您尝试在浏览器中使用开发工具并悬停主要元素，您将看到其高度为0。

请查看我在您的css代码中所做的更改，以便页脚位于底部：

body {
  font-size: 62.5%;
  margin: 0;
}

#main {
  height: 100em;
  position: relative;
}

/* a href corrections */

.nav, .nav:visited {
  text-decoration: none;
  color: #f5f3f5;
}

.aga, .aga:visited {
  text-decoration: none;
  color: #000913;
}

/* stop */

.half {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 45em;
}

.bottomHalf {
  background-color: #69b4b2;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 45em;
  left: 0;
  height: 50em;
  z-index: -1;
  border-top: solid 0.5em #000913;
  border-bottom: solid 0.3em #000913;
}

.footer {
  background-color: #f5f3f5;
  position: absolute;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
}

.footer2 {
  background-color: #f5f3f5;
  position: absolute;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
  border-top: solid 0.3em #000913;
}

.footerText {
  font-family: "Rubik";
  color: #000913;
  font-size: 1.6em;
  vertical-align: middle;
  margin-left: 10em;
}

#ag1, #ag2 {
  position: absolute;
}

#ag1 {
  right: 41em;
}

#ag2 {
  right: 32em;
}

.half2 {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 13.1em;
}

#head {
  position: relative;
  left: 15em;
  top: 10em;
  max-width: 80%;
}

#subContainer {
  position: relative;
  left: 14em;
  top: 7em;
  max-width: 127.5em;
  margin-bottom: 10em;
  font-family: "Rubik";
}

#logo {
  width: 10em;
  height: 10em;
  margin: 0;
  position: relative;
  top: 1.5em;
  left: 1.9em;
  cursor: pointer;
}

#headHeader {
  display: flex;
}

#menu {
  list-style-type: none;
  display: flex;
  margin-left: 4.2em;
  position: relative;
  top: 1.7em;
  padding: 0;
}

.menuItem {
  margin-top: auto;
  margin-bottom: auto;
}

.menuItem a {
  font-family: "Rubik";
  font-size: 2.1em;
  color: #f5f3f5;
  background-color: #233039;
  padding: 0.9em 1.1em;
  /* max-height: 1.15em; */
}

.menuItem a:hover {
  background-color: #f5f3f5;
  color: #000913;
}

#headText {
  font-family: "Rubik";
  font-weight: bold;
  font-size: 5.0em;
  color: #233039;
}

#headText2 {
  font-family: "Rubik";
  font-weight: bold;
  font-size: 4.5em;
  color: #233039;
  text-align: center;
  margin: 0;
  padding: 0;
}

#headSubText {
  font-family: "Rubik";
  color: #233039;
  font-size: 2.3em;
  margin: 0;
  padding-top: 0.5em;
}

.ruleHeader {
  font-family: "Rubik";
  color: #233039;
  font-size: 2.3em;
  margin: 0;
  padding-top: 0.5em;
  font-weight: bold;
}

.ruleList {
  color: #233039;
  font-size: 2.2em;
}

#widget {
  margin-top: 3em;
  margin-right: auto;
  margin-left: auto;
  display: block;
}

#btnRow {
  margin-top: 1em;
}

.btnHead, .btnHead2 {
  font-family: "Rubik";
  font-size: 2.0em;
  font-weight: bold;
  padding: 0.6em 0.6em;
  background-color: #233039;
  border: none;
  color: #f5f3f5;
  margin-right: 1em;
  margin-top: 1em;
  margin-left: 0.4em;
  border-radius: 0.4em;
  border: solid 0.2em #233039;
  cursor: pointer;
}

.btnHead2 {
  margin-right: auto;
  margin-left: auto;
  display: block;
}

.btnHead2:hover {
  background-color: #f5f3f5;
  color: #233039;
  border: solid 0.2em #233039;
}

.btnHead:hover {
  background-color: #f5f3f5;
  color: #233039;
  border: solid 0.2em #f5f3f5;
}

/*
Color Palette:
#f5f3f5 - White Smoke
#69b4b2 - Green Sheen
#2ac15d - UFO Green
#233039 - Gunmetal
#000913 - Rich Black
*/

* {
  outline: solid;
}
<!DOCTYPE html>
<html>
  <head>
    <title>draft</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  <div id="main">
    <div class="half">
      <div id="headHeader">
        <img id="logo" src="http://.net/disclogo.png" onclick="window.location.href = 'index.html';"/>
        <ul id="menu">
          <li class="menuItem"><a href="index.html" class="nav">Home</a></li>
          <li class="menuItem"><a href="discord.html" class="nav">Discord</a></li>
          <li class="menuItem"><a href="rules.html" class="nav">Rules</a></li>
          <li class="menuItem"><a href="" class="nav">Forum</a></li>
          <li class="menuItem"><a href="" class="nav">Mods</a></li>
          <li class="menuItem"><a href="" class="nav">Admin</a></li>
          <li class="menuItem"><a href="" class="nav">Apply</a></li>
          <li class="menuItem"><a href="" class="nav">Donate</a></li>
          <li class="menuItem"><a href="" class="nav">Complaint</a></li>
          <li class="menuItem"><a href="" class="nav">About</a></li>
          <li class="menuItem"><a href="" class="nav">Contact</a></li>
        </ul>
      </div>
      <div id="head">
        <span id="headText">Opening Title</span>
        <div id="btnRow">
          <button class="btnHead" onclick="window.location.href = 'discord.html';">JOIN DISCORD</button>
          <button class="btnHead">DOWNLOAD MODS</button>
        </div>
      </div>
    </div>
    <div class="bottomHalf">

    </div>
    <div class="footer">
      <p class="footerText">&copy; 2018 All rights reserved.</p>
      <p class="footerText" id="ag1"><a href="https://tos..net" class="aga" target="_blank">Terms of Service</a></p>
      <p class="footerText" id="ag2"><a href="https://tos..net/privacy/" class="aga" target="_blank">Privacy Policy</a></p>
    </div>
  </div>
  </body>
</html>
0
投票

你只需要position:fixed;而不是像下面的position:absolute;： - 

	body {
  font-size: 62.5%;
}

#main {
  height: 100%;
}

/* a href corrections */

.nav, .nav:visited {
  text-decoration: none;
  color: #f5f3f5;
}

.aga, .aga:visited {
  text-decoration: none;
  color: #000913;
}

/* stop */

.half {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 45em;
}

.bottomHalf {
  background-color: #69b4b2;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 45em;
  left: 0;
  height: 50em;
  z-index: -1;
  border-top: solid 0.5em #000913;
  border-bottom: solid 0.3em #000913;
}

.footer {
  background-color: #f5f3f5;
  position: fixed;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
}

.footer2 {
  background-color: #f5f3f5;
  position: absolute;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
  border-top: solid 0.3em #000913;
}

.footerText {
  font-family: "Rubik";
  color: #000913;
  font-size: 1.6em;
  vertical-align: middle;
  margin-left: 10em;
}

#ag1, #ag2 {
  position: absolute;
}

#ag1 {
  right: 41em;
}

#ag2 {
  right: 32em;
}

.half2 {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 13.1em;
}

#head {
  position: relative;
  left: 15em;
  top: 10em;
  max-width: 80%;
}

#subContainer {
  position: relative;
  left: 14em;
  top: 7em;
  max-width: 127.5em;
  margin-bottom: 10em;
  font-family: "Rubik";
}

#logo {
  width: 10em;
  height: 10em;
  margin: 0;
  position: relative;
  top: 1.5em;
  left: 1.9em;
  cursor: pointer;
}

#headHeader {
  display: flex;
}

#menu {
  list-style-type: none;
  display: flex;
  margin-left: 4.2em;
  position: relative;
  top: 1.7em;
  padding: 0;
}

.menuItem {
  margin-top: auto;
  margin-bottom: auto;
}

.menuItem a {
  font-family: "Rubik";
  font-size: 2.1em;
  color: #f5f3f5;
  background-color: #233039;
  padding: 0.9em 1.1em;
  /* max-height: 1.15em; */
}

.menuItem a:hover {
  background-color: #f5f3f5;
  color: #000913;
}

#headText {
  font-family: "Rubik";
  font-weight: bold;
  font-size: 5.0em;
  color: #233039;
}

#headText2 {
  font-family: "Rubik";
  font-weight: bold;
  font-size: 4.5em;
  color: #233039;
  text-align: center;
  margin: 0;
  padding: 0;
}

#headSubText {
  font-family: "Rubik";
  color: #233039;
  font-size: 2.3em;
  margin: 0;
  padding-top: 0.5em;
}

.ruleHeader {
  font-family: "Rubik";
  color: #233039;
  font-size: 2.3em;
  margin: 0;
  padding-top: 0.5em;
  font-weight: bold;
}

.ruleList {
  color: #233039;
  font-size: 2.2em;
}

#widget {
  margin-top: 3em;
  margin-right: auto;
  margin-left: auto;
  display: block;
}

#btnRow {
  margin-top: 1em;
}

.btnHead, .btnHead2 {
  font-family: "Rubik";
  font-size: 2.0em;
  font-weight: bold;
  padding: 0.6em 0.6em;
  background-color: #233039;
  border: none;
  color: #f5f3f5;
  margin-right: 1em;
  margin-top: 1em;
  margin-left: 0.4em;
  border-radius: 0.4em;
  border: solid 0.2em #233039;
  cursor: pointer;
}

.btnHead2 {
  margin-right: auto;
  margin-left: auto;
  display: block;
}

.btnHead2:hover {
  background-color: #f5f3f5;
  color: #233039;
  border: solid 0.2em #233039;
}

.btnHead:hover {
  background-color: #f5f3f5;
  color: #233039;
  border: solid 0.2em #f5f3f5;
}

/*
Color Palette:
#f5f3f5 - White Smoke
#69b4b2 - Green Sheen
#2ac15d - UFO Green
#233039 - Gunmetal
#000913 - Rich Black
*/

* {
  outline: solid;
}
<!DOCTYPE html>
<html>
  <head>
    <title>draft</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	
  </head>
  <body>
  <div id="main">
    <div class="half">
      <div id="headHeader">
        <img id="logo" src="http://.net/disclogo.png" onClick="window.location.href = 'index.html';"/>
        <ul id="menu">
          <li class="menuItem"><a href="index.html" class="nav">Home</a></li>
          <li class="menuItem"><a href="discord.html" class="nav">Discord</a></li>
          <li class="menuItem"><a href="rules.html" class="nav">Rules</a></li>
          <li class="menuItem"><a href="" class="nav">Forum</a></li>
          <li class="menuItem"><a href="" class="nav">Mods</a></li>
          <li class="menuItem"><a href="" class="nav">Admin</a></li>
          <li class="menuItem"><a href="" class="nav">Apply</a></li>
          <li class="menuItem"><a href="" class="nav">Donate</a></li>
          <li class="menuItem"><a href="" class="nav">Complaint</a></li>
          <li class="menuItem"><a href="" class="nav">About</a></li>
          <li class="menuItem"><a href="" class="nav">Contact</a></li>
        </ul>
      </div>
      <div id="head">
        <span id="headText">Opening Title</span>
        <div id="btnRow">
          <button class="btnHead" onClick="window.location.href = 'discord.html';">JOIN DISCORD</button>
          <button class="btnHead">DOWNLOAD MODS</button>
        </div>
      </div>
    </div>
    <div class="bottomHalf">

    </div>
    <div class="footer">
      <p class="footerText">&copy; 2018 All rights reserved.</p>
      <p class="footerText" id="ag1"><a href="https://tos..net" class="aga" target="_blank">Terms of Service</a></p>
      <p class="footerText" id="ag2"><a href="https://tos..net/privacy/" class="aga" target="_blank">Privacy Policy</a></p>
    </div>
  </div>
  </body>
</html>
0
投票

您可以使用固定的页脚位置

	body {
  font-size: 62.5%;
}

#main {
  height: 100%;
}

/* a href corrections */

.nav, .nav:visited {
  text-decoration: none;
  color: #f5f3f5;
}

.aga, .aga:visited {
  text-decoration: none;
  color: #000913;
}

/* stop */

.half {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 45em;
}

.bottomHalf {
  background-color: #69b4b2;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 45em;
  left: 0;
  height: 50em;
  z-index: -1;
  border-top: solid 0.5em #000913;
  border-bottom: solid 0.3em #000913;
}

.footer {
  background-color: #f5f3f5;
  position: fixed;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
}

.footer2 {
  background-color: #f5f3f5;
  position: absolute;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
  border-top: solid 0.3em #000913;
}

.footerText {
  font-family: "Rubik";
  color: #000913;
  font-size: 1.6em;
  vertical-align: middle;
  margin-left: 10em;
}

#ag1, #ag2 {
  position: absolute;
}

#ag1 {
  right: 41em;
}

#ag2 {
  right: 32em;
}

.half2 {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 13.1em;
}

#head {
  position: relative;
  left: 15em;
  top: 10em;
  max-width: 80%;
}

#subContainer {
  position: relative;
  left: 14em;
  top: 7em;
  max-width: 127.5em;
  margin-bottom: 10em;
  font-family: "Rubik";
}

#logo {
  width: 10em;
  height: 10em;
  margin: 0;
  position: relative;
  top: 1.5em;
  left: 1.9em;
  cursor: pointer;
}

#headHeader {
  display: flex;
}

#menu {
  list-style-type: none;
  display: flex;
  margin-left: 4.2em;
  position: relative;
  top: 1.7em;
  padding: 0;
}

.menuItem {
  margin-top: auto;
  margin-bottom: auto;
}

.menuItem a {
  font-family: "Rubik";
  font-size: 2.1em;
  color: #f5f3f5;
  background-color: #233039;
  padding: 0.9em 1.1em;
  /* max-height: 1.15em; */
}

.menuItem a:hover {
  background-color: #f5f3f5;
  color: #000913;
}

#headText {
  font-family: "Rubik";
  font-weight: bold;
  font-size: 5.0em;
  color: #233039;
}

#headText2 {
  font-family: "Rubik";
  font-weight: bold;
  font-size: 4.5em;
  color: #233039;
  text-align: center;
  margin: 0;
  padding: 0;
}

#headSubText {
  font-family: "Rubik";
  color: #233039;
  font-size: 2.3em;
  margin: 0;
  padding-top: 0.5em;
}

.ruleHeader {
  font-family: "Rubik";
  color: #233039;
  font-size: 2.3em;
  margin: 0;
  padding-top: 0.5em;
  font-weight: bold;
}

.ruleList {
  color: #233039;
  font-size: 2.2em;
}

#widget {
  margin-top: 3em;
  margin-right: auto;
  margin-left: auto;
  display: block;
}

#btnRow {
  margin-top: 1em;
}

.btnHead, .btnHead2 {
  font-family: "Rubik";
  font-size: 2.0em;
  font-weight: bold;
  padding: 0.6em 0.6em;
  background-color: #233039;
  border: none;
  color: #f5f3f5;
  margin-right: 1em;
  margin-top: 1em;
  margin-left: 0.4em;
  border-radius: 0.4em;
  border: solid 0.2em #233039;
  cursor: pointer;
}

.btnHead2 {
  margin-right: auto;
  margin-left: auto;
  display: block;
}

.btnHead2:hover {
  background-color: #f5f3f5;
  color: #233039;
  border: solid 0.2em #233039;
}

.btnHead:hover {
  background-color: #f5f3f5;
  color: #233039;
  border: solid 0.2em #f5f3f5;
}

/*
Color Palette:
#f5f3f5 - White Smoke
#69b4b2 - Green Sheen
#2ac15d - UFO Green
#233039 - Gunmetal
#000913 - Rich Black
*/

* {
  outline: solid;
}
<!DOCTYPE html>
<html>
  <head>
    <title>draft</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	
  </head>
  <body>
  <div id="main">
    <div class="half">
      <div id="headHeader">
        <img id="logo" src="http://.net/disclogo.png" onClick="window.location.href = 'index.html';"/>
        <ul id="menu">
          <li class="menuItem"><a href="index.html" class="nav">Home</a></li>
          <li class="menuItem"><a href="discord.html" class="nav">Discord</a></li>
          <li class="menuItem"><a href="rules.html" class="nav">Rules</a></li>
          <li class="menuItem"><a href="" class="nav">Forum</a></li>
          <li class="menuItem"><a href="" class="nav">Mods</a></li>
          <li class="menuItem"><a href="" class="nav">Admin</a></li>
          <li class="menuItem"><a href="" class="nav">Apply</a></li>
          <li class="menuItem"><a href="" class="nav">Donate</a></li>
          <li class="menuItem"><a href="" class="nav">Complaint</a></li>
          <li class="menuItem"><a href="" class="nav">About</a></li>
          <li class="menuItem"><a href="" class="nav">Contact</a></li>
        </ul>
      </div>
      <div id="head">
        <span id="headText">Opening Title</span>
        <div id="btnRow">
          <button class="btnHead" onClick="window.location.href = 'discord.html';">JOIN DISCORD</button>
          <button class="btnHead">DOWNLOAD MODS</button>
        </div>
      </div>
    </div>
    <div class="bottomHalf">

    </div>
    <div class="footer">
      <p class="footerText">&copy; 2018 All rights reserved.</p>
      <p class="footerText" id="ag1"><a href="https://tos..net" class="aga" target="_blank">Terms of Service</a></p>
      <p class="footerText" id="ag2"><a href="https://tos..net/privacy/" class="aga" target="_blank">Privacy Policy</a></p>
    </div>
  </div>
  </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.