Question

一直在努力学习构建这个页面大约4-5个小时，我似乎无法找到为什么我无法在navbar-logo的同一行上获得导航链接，其次我有什么方法可以使这段代码更有效，更少依赖/容易出错？

我想问的另一件事是我们可以在这个网页中使用flexbox吗？并且这里使用的CSS动画是否有效？

＆＃13;

body{
    background-color: #000;
	  color: #f1f1f1;
	  animation: fade-in 2s 1;

}

header{
    width: 100%;
    height: 10%;
    margin: auto;
}


.navbar-logo{
    padding: 2px 0px 2px 100px;
	  position: absolute;
	  z-index: 100;
}
.navbar-logo-sub{
    padding: 55px 0px 0px 200px;
}

#logo-main{
    font-family: 'Didact Gothic', sans-serif;
	  color: white;
	  font-size: 40px;
	  font-weight: 800;
	  margin: 0;
}
.parenthesis1{
    color: #b22121;
	  font-family: 'Bungee', cursive;
}
.parenthesis2{
    color: #787878;
	  font-family: 'Bungee', cursive;
}
#logo-sub{
    color: white;
	  font-size: 14px;
	  font-weight: 20;
	  font-family: 'Coming Soon', cursive;

}
#banner-image{
    width: 50%;
	  padding-left: 20%;
	  filter: blur(3px);
	  position: relative;
	  padding-top: 5%;
}
#banner-text{
  	top: 50%;
    left: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
 	  font-size: 50px;
 	  text-align: left;
}
nav{
   	padding: 0px 0px 0px 60%;
}
li{
  	float: left;
	  margin-right: 100px;
	  list-style-type: none;
}
a{
    text-decoration: none;
	  color: white;
}

h1{
  	margin-top: 0px;
	  margin-bottom: -50px;
	  font-family: 'Permanent Marker', cursive;
	  font-weight: 300;
	  text-shadow: 4px 2px rgba(238, 238, 238, 0.5);
  	opacity: 0;
   	-webkit-animation: slide-in 3s 1 forwards;

}
div h1:nth-of-type(2){
    animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}

div h1:nth-of-type(3){
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}

div h1:nth-of-type(4){
    animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}

div h1:nth-of-type(5){
    animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
}

div h1:nth-of-type(6){
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

div h1:nth-of-type(7){
    animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
}
   
div h1:nth-of-type(8){
    animation-delay: 0.7s;
    -webkit-animation-delay: 0.7s;
}
   
div h1:nth-of-type(9){
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}
   
@keyframes slide-in {
    0%{
    transform: rotateY(90deg) translateY(-50%);
    opacity: 0.0;
    }
    100%{
    transform: rotateY(0deg) translateY(0%);
    opacity: 1.0;
    }
}

@-webkit-keyframes slide-in {
    0%{
    -webkit-transform: rotateY(90deg) translateY(25%);
    opacity: 0.0;
    }
    100%{
    -webkit-transform: rotateY(0deg) translateY(0%);
    opacity: 1.0;
    }
}
@keyframes fade-in {
    0%{
    opacity: 0.0;
    }
    50%{
  	opacity: 0.5;
    }
    100%{
    opacity: 1.0;
    }

＆＃13;

    <html>
    <head>
	<title>.whatsthecode.</title>
	<link rel="stylesheet" href="index.css">
	<link href="https://fonts.googleapis.com/css?
    family=Didact+Gothic|Coming+Soon|Bungee|Permanent+Marker" rel="stylesheet">
    </head>
    <body>
	<header>
	<div class="navbar-logo">
	<p id="logo-main">WhatsTheCode<span class="parenthesis1">(</span>
    <span class="parenthesis2">)</span></p>
	</div>
	<div class="navbar-logo-sub"><p id="logo-sub">{&lt;html&gt;<span style="color: #b22121">&lt;style&gt;</span><span style="color: #787878">&lt;script&gt;</span>}</p></div>
   		<nav>
	<ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="index.html">FAQ</a></li>
	<li><a href="index.html">About</a></li>
	</ul>
    </nav>
	</header>
	<section>
	<div class="banner">
	<img src="banner-background.png" id="banner-image">
	<div id="banner-text"><h1>Your</h1><h1>web development</h1>
    <h1>develops</h1><h1>here.</h1></div>
	</div>
	</section>
    </body>
    </html>

＆＃13;

Answer 1

在这里你去了兄弟，我添加了一个 div with class =＆＃34; navbar-wrapper＆＃34; 并将标题元素放在其中。我在标题元素上使用 display：inline-block ，以便它们水平对齐。对于 navbar-logo-sub，我将其放在navbar-logo中并使用position：absolute和bottom：0 将其放在父元素的底部。运行代码段并在整页上查看。

＆＃13;

body {
  background-color: #000;
  color: #f1f1f1;
  animation: fade-in 2s 1;
}

header {
  width: 100%;
}

.navbar-wrapper{
 padding-left:50px; padding-right:50px;
}

header .navbar-logo {
  display: inline-block;
  position: relative;
}

header nav {
  display: inline-block;
}

header .navbar-logo-sub {
  display: block;
  position: absolute;
  bottom: 0;
  left: 20%;
}

nav {
  padding: 0px;
  margin: 0px;
}

header li {
  float: left;
  margin-right: 50px;
  list-style-type: none;
}

header li:last-of-type {
  margin-right: 0px;
}

a {
  text-decoration: none;
  color: white;
}

#logo-main {
  font-family: 'Didact Gothic', sans-serif;
  color: white;
  font-size: 2.3em;
  font-weight: 800;
  margin: 0;
}

.parenthesis1 {
  color: #b22121;
  font-family: 'Bungee', cursive;
}

.parenthesis2 {
  color: #787878;
  font-family: 'Bungee', cursive;
}

#logo-sub {
  color: white;
  font-size: 14px;
  font-weight: 20;
  font-family: 'Coming Soon', cursive;
}

#banner-image {
  width: 50%;
  padding-left: 20%;
  filter: blur(3px);
  position: relative;
  padding-top: 5%;
}

#banner-text {
  top: 50%;
  left: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
  font-size: 50px;
  text-align: left;
}

h1 {
  margin-top: 0px;
  margin-bottom: -50px;
  font-family: 'Permanent Marker', cursive;
  font-weight: 300;
  text-shadow: 4px 2px rgba(238, 238, 238, 0.5);
  opacity: 0;
  -webkit-animation: slide-in 3s 1 forwards;
}

div h1:nth-of-type(2) {
  animation-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
}

div h1:nth-of-type(3) {
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
}

div h1:nth-of-type(4) {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
}

div h1:nth-of-type(5) {
  animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
}

div h1:nth-of-type(6) {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}

div h1:nth-of-type(7) {
  animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
}

div h1:nth-of-type(8) {
  animation-delay: 0.7s;
  -webkit-animation-delay: 0.7s;
}

div h1:nth-of-type(9) {
  animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
}

@keyframes slide-in {
  0% {
    transform: rotateY(90deg) translateY(-50%);
    opacity: 0.0;
  }
  100% {
    transform: rotateY(0deg) translateY(0%);
    opacity: 1.0;
  }
}

@-webkit-keyframes slide-in {
  0% {
    -webkit-transform: rotateY(90deg) translateY(25%);
    opacity: 0.0;
  }
  100% {
    -webkit-transform: rotateY(0deg) translateY(0%);
    opacity: 1.0;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0.0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1.0;
  }

＆＃13;

<html>

<head>
  <title>.whatsthecode.</title>
  <link href="https://fonts.googleapis.com/css?
family=Didact+Gothic|Coming+Soon|Bungee|Permanent+Marker" rel="stylesheet">
</head>

<body>
  <header>
    <div class="navbar-wrapper">
      <div class="navbar-logo">
        <p id="logo-main">WhatsTheCode<span class="parenthesis1">(</span>
          <span class="parenthesis2">)</span></p>
        <div class="navbar-logo-sub">
          <p id="logo-sub">{&lt;html&gt;<span style="color: #b22121">&lt;style&gt;</span><span style="color: 
    #787878">&lt;script&gt;</span>}</p>
        </div>
      </div>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="index.html">FAQ</a></li>
          <li><a href="index.html">About</a></li>
        </ul>
      </nav>
    </div>

  </header>
  <section>
    <div class="banner">
      <img src="banner-background.png" id="banner-image">
      <div id="banner-text">
        <h1>Your</h1>
        <h1>web development</h1>
        <h1>develops</h1>
        <h1>here.</h1>
      </div>
    </div>
  </section>
</body>

</html>

＆＃13;

网页布局正在分解

1 个答案: