我的页脚未与页面底部对齐

时间：2018-09-09 05:39:50

标签： html css

我的页面上有一个称为页脚的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>

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：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>

答案 2 :(得分：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>

相关问题
最新问题