Question

首先，我希望GameOn徽标略小一些。 https://gyazo.com/fff20798fa141cfbe4938b9808a45350

正如您在上面的屏幕截图中看到的那样，标题和导航栏之间有很多空间，我想把它放到顶部，就像我在这里画的那样：

https://gyazo.com/87a2ee8c373490d224081970d744263e

以下是代码：

 
 
 
 
 
 /*CSS STYLE SHEET LOGO
 /************************** add todd your code ***************/
      div#header {
        clear: both;
        margin-bottom: 20em;
          /* So you can add space between logos and page contents */
      }

      /* A container for the two logos */
      div#right_logo_container {
        float:right;
        display: inline-block;
      }
      div#left_logo_container {
        float:left;
        display: inline-block;
      }
      div#center_logo_container {
        display: center;
      }

      
      div.center { text-align: center;}

      /************************** /end ***************/
      
      body {padding-top: 2em;background-color: #c02227;}
      .circle-container {position: relative;perspective: 1000;margin: 0 auto;}
      .circle-container:hover .circle {transform: rotate3d(45, 45, 0, 180deg);}
      .circle-container:hover .outer-ring {transform: rotate3d(45, 0, 0, 180deg);}
      .circle-container:hover .outer-outer-ring {transform: rotate3d(0, 45, 0, 180deg);}
      .circle-container, .front, .back {width: 175px;height: 175px;background-color: rgba(0,0,0,0);}
      .circle, .outer-ring, .outer-outer-ring {transition: 0.5s;transform-style: preserve-3d;transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);}
      .circle {position: absolute;width: 175px;height: 175px;}
      .front, .back {border-radius: 50%;box-shadow: 0px 0px 20px rgba(0,0,0,0.4);backface-visibility: hidden;position: absolute;top: 0;left: 0;}
      .front {background-color: #fff;z-index: 2;}		
      .front p {margin-top: 1.2em;font-family: Impact, Charcoal, sans-serif;font-weight: 900;font-size: 2.8em;text-align: l;color: #c02227;}
      .back {transform: rotate3d(45,45,0,180deg);background-color: #fff;}
      .back-logo {width: 60%;display: block;margin: 2em auto;}
      .outer-ring {position: absolute;top: -10px;left: -10px;
     	  border-radius: 50%;border: 2px solid #fff;width: 191px;height: 191px;background-color: rgba(255,255,255,0);box-shadow: 0px 0px 20px rgba(0,0,0,0.4);}
      .outer-outer-ring {position: absolute;top: -20px;left: -20px;border-radius: 50%;border: 2px solid #fff;width: 211px;height: 211px;background-color: rgba(255,255,255,0);box-shadow: 0px 0px 20px rgba(0,0,0,0.4);}
      
      
      
      
   /************************** STYLESHEET CSS STYLETEST ***************/ 
   
   <style>
html {
  font-family: sans-serif;
}

.columns {
  display: flex;
}

.column {
  background: #eee;
  border: 5px solid #ccc;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 10px;
}

.main-column {
  flex: 2;
}

.article {
  background: mediumseagreen;
  border: 5px solid seagreen;
  color: white;
  flex: 1;
  margin: 10px;
  padding: 42px;
}
</style>

 /************* STYLESHEET CSS STYLE PAGE LAYOUT+MENU***************/ 
 
 <!DOCTYPE html>
<style>

body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}

div#header, div#footer {
    padding: 10px;
    color: white;
    background-color: red;
}

div#content {
    margin: 0px;
    padding: 10px;
    background-color: lightgrey;
}

div.article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}
body {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACoCAMAAABt9SM9AAAAA1BMVEUBd7+dGBbBAAAAR0lEQVR4nO3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAO8GxYgAAb0jQ/cAAAAASUVORK5CYII=");
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
</style>

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="styletest.css">
<link rel="stylesheet" type="text/css" href="logo.css">
<DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>GameOn</title>
<body>

    <div id="header" class="center">
	
      <div id="right_logo_container">
      <div class="circle-container">
        <div class="outer-ring"></div>
        <div class="circle">
          <div class="front">
            <p>GameOn</p>
          </div>
			<div class="back">
			<img class="back-logo" src="http://thegogame.com/static/media/facebook/Go-Game-Logo.png"/>
          </div>
        </div>
      </div>

      </div>

    <div id="left_logo_container">    

      <div class="circle-container">
        <div class="outer-ring"></div>
        <div class="circle">
          <div class="front">
            <p>GameOn</p>
          </div>
          <div class="back">
            <img class="back-logo" src="http://thegogame.com/static/media/facebook/Go-Game-Logo.png"/>
          </div>
        </div>
      </div>

    </div>
      
	  <img id="college_logo" src="https://www.regioinbedrijf.nl/uploads/onderwijsinstelling/Zoomvliet-College-logo-profiel.jpg">


    </div><!-- /header -->

<style>

</style>
</head>
<body>

<ul>
  <li style="float:right"><a href="#login">Login</a></li>
  <li style="float:right"><a href="#sign up">Sign up</a></li>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>


<html>
<div class="columns">
  <div class="column main-column">
    <section class="section">
      Titel Section
    </section>
    <article class="article">
      Hello World
    </article>
  </div>
  <div class="column">
    <aside class="aside">
      Hello World
    </aside>
    <article class="article">
      Hello World<br>
      Foo Bar
    </article>
    <article class="article">
      Hello World
    </article>
  </div>
</div>
</html>


<div id="footer">
<p>&copy;2017 Frank. All rights reserved.</p>
</div>

</body>
</html>

Answer 1

您的div margin底部设置为20em，这是一个相对大小，要么设置为0，要么根本不设置它将被修复

将div＃header更改为

  div#header {
    clear: both;
    margin-bottom: 0px;
      /* So you can add space between logos and page contents */
  }

Answer 2

向下移动样式标记。如果这不起作用，请将导航栏上的填充设置为padding-top：0px;和margin-top：0px;

标题和导航栏之间的网站空间

2 个答案: