-1
問題があります。左上と右端のヘッダーにフリップロゴを配置します
NoGameロゴとカレッジロゴを使用して、左上隅と右上隅に私のフリッピングロゴを挿入します。
写真と私のコードで、これらのロゴは中央に配置されています。
より正確には、それぞれの側に1つずつ、右側に1つずつ、NoGameのロゴが必要です。私は、2つの他のロゴの間に中央のCollege Zoomvlietロゴが必要です。
さらに、Collegeのロゴの高さをNoGameのロゴと同じにします。
これは私のコードです：助けを
<style>
body {
padding-top: 2em;
background-color: #c02227;
}
.circle-container {
\t position: relative;
\t perspective: 1000; \t
\t margin: 0 auto; \t
}
.circle-container:hover .circle {
\t transform: rotate3d(45, 45, 0, 180deg);
} \t
.circle-container:hover .outer-ring {
\t transform: rotate3d(45, 0, 0, 180deg);
}
.circle-container:hover .outer-outer-ring {
\t transform: rotate3d(0, 45, 0, 180deg);
} \t
.circle-container, .front, .back {
\t width: 175px;
\t height: 175px;
\t background-color: rgba(0,0,0,0);
} \t
.circle, .outer-ring, .outer-outer-ring {
\t transition: 0.5s;
\t transform-style: preserve-3d;
\t transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
} \t
.circle {
\t position: absolute;
\t width: 175px;
\t height: 175px;
}
.front, .back {
\t border-radius: 50%;
\t box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
\t backface-visibility: hidden;
\t position: absolute;
\t top: 0;
\t left: 0;
}
.front {
\t background-color: #fff;
\t z-index: 2;
} \t
.front p {
\t margin-top: 1.2em;
\t font-family: Impact, Charcoal, sans-serif;
\t font-weight: 900;
\t font-size: 2.8em;
\t text-align: l;
\t color: #c02227;
} \t
.back {
\t transform: rotate3d(45,45,0,180deg);
\t background-color: #fff;
} \t
.back-logo {
\t width: 60%;
\t display: block;
\t margin: 2em auto;
} \t
.outer-ring {
\t position: absolute;
\t top: -10px;
\t left: -10px;
\t border-radius: 50%;
\t border: 2px solid #fff;
\t width: 191px;
\t height: 191px;
\t background-color: rgba(255,255,255,0);
\t box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
}
.outer-outer-ring {
\t position: absolute;
\t top: -20px;
\t left: -20px;
\t border-radius: 50%;
\t border: 2px solid #fff;
\t width: 211px;
\t height: 211px;
\t background-color: rgba(255,255,255,0);
\t box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
}
</style><DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>GameOn</title>
<!--
links in the head tag
-->
<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">
</head>
<body>
<div id="header">
\t <center><img src="https://www.zoomvliet.nl/themes/zoomvliet/images/logo.png" style="width:304px;height:140px;"></center>
<div class="circle-container">
\t <div class="outer-ring"></div>
\t <div class="circle">
\t \t <div class="front">
\t \t \t <p>GameOn</p>
\t \t </div>
\t \t <div class="back">
\t \t \t <img class="back-logo" src="http://thegogame.com/static/media/facebook/Go-Game-Logo.png"/>
\t \t </div>
\t </div>
</div>
</div>
<ul>
<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>
<li style="float:right"><a href="#login">Login</a></li>
<li style="float:right"><a href="#sign up">Sign up</a></li>
</ul>
<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>
<div id="footer">
<p>©2017 Frank. All rights reserved.</p>
</div>
</body>
</html>ありがとう！
スクリーンショットHOW IT WILL LOOKS： それが失敗した理由をhttps://gyazo.com/be4a54ee45bf78f2a04d9492fd626524あなたがこれまでに試してみました何 –
1.、2.、3.なぜあなたをしています私たちを叫んでいる（全部キャップ）4.あなたの画面では、コード例のように、ロゴは中央に配置され、左には配置されません。 – Connum
@Connum私はstyle = "float：topright"とstyle = "float：topleft" idkというCSS alginingでオプションを試しました。なぜなら、私はこのたわごとにnoobです –