首先，我希望 GameOn Logo 小一点。 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>©2017 Frank. All rights reserved.</p>
</div>
</body>
</html>最佳答案
将样式标签向下移动。如果这不起作用，请将导航栏上的填充设置为 padding-top: 0px;和边距顶部:0px；
关于javascript - 标题和导航栏之间的网站空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46983644/