1. Zuhause
  2. Frage und Antwort
  3. Webseitenlayout bricht auseinander

Webseitenlayout bricht auseinander

2017-11-05 3 views
-1

Ich habe gearbeitet und gelernt, diese Seite für 4-5 Stunden zu bauen und ich kann nicht herausfinden, warum ich nicht in der Lage bin, die Navigationslinks in die selbe Zeile wie das Navbar-Logo zu bekommen und zweitens Könnte ich diesen Code effizienter und weniger abhängig/fehleranfällig machen?Webseitenlayout bricht auseinander

Noch eine Sache, die ich fragen wollte ist, können wir Flexbox auf dieser Webseite verwenden? und ist CSS-Animation hier effizient?

body{ 
 
    background-color: #000; 
 
\t color: #f1f1f1; 
 
\t animation: fade-in 2s 1; 
 

 
} 
 

 
header{ 
 
    width: 100%; 
 
    height: 10%; 
 
    margin: auto; 
 
} 
 

 

 
.navbar-logo{ 
 
    padding: 2px 0px 2px 100px; 
 
\t position: absolute; 
 
\t z-index: 100; 
 
} 
 
.navbar-logo-sub{ 
 
    padding: 55px 0px 0px 200px; 
 
} 
 

 
#logo-main{ 
 
    font-family: 'Didact Gothic', sans-serif; 
 
\t color: white; 
 
\t font-size: 40px; 
 
\t font-weight: 800; 
 
\t margin: 0; 
 
} 
 
.parenthesis1{ 
 
    color: #b22121; 
 
\t font-family: 'Bungee', cursive; 
 
} 
 
.parenthesis2{ 
 
    color: #787878; 
 
\t font-family: 'Bungee', cursive; 
 
} 
 
#logo-sub{ 
 
    color: white; 
 
\t font-size: 14px; 
 
\t font-weight: 20; 
 
\t font-family: 'Coming Soon', cursive; 
 

 
} 
 
#banner-image{ 
 
    width: 50%; 
 
\t padding-left: 20%; 
 
\t filter: blur(3px); 
 
\t position: relative; 
 
\t padding-top: 5%; 
 
} 
 
#banner-text{ 
 
    \t top: 50%; 
 
    left: 50%; 
 
    position: fixed; 
 
    transform: translate(-50%, -50%); 
 
    \t font-size: 50px; 
 
    \t text-align: left; 
 
} 
 
nav{ 
 
    \t padding: 0px 0px 0px 60%; 
 
} 
 
li{ 
 
    \t float: left; 
 
\t margin-right: 100px; 
 
\t list-style-type: none; 
 
} 
 
a{ 
 
    text-decoration: none; 
 
\t color: white; 
 
} 
 

 
h1{ 
 
    \t margin-top: 0px; 
 
\t margin-bottom: -50px; 
 
\t font-family: 'Permanent Marker', cursive; 
 
\t font-weight: 300; 
 
\t text-shadow: 4px 2px rgba(238, 238, 238, 0.5); 
 
    \t opacity: 0; 
 
    \t -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%{ 
 
    \t opacity: 0.5; 
 
    } 
 
    100%{ 
 
    opacity: 1.0; 
 
    }
<html> 
 
    <head> 
 
\t <title>.whatsthecode.</title> 
 
\t <link rel="stylesheet" href="index.css"> 
 
\t <link href="https://fonts.googleapis.com/css? 
 
    family=Didact+Gothic|Coming+Soon|Bungee|Permanent+Marker" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 
\t <header> 
 
\t <div class="navbar-logo"> 
 
\t <p id="logo-main">WhatsTheCode<span class="parenthesis1">(</span> 
 
    <span class="parenthesis2">)</span></p> 
 
\t </div> 
 
\t <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> 
 
    \t \t <nav> 
 
\t <ul> 
 
\t <li><a href="index.html">Home</a></li> 
 
\t <li><a href="index.html">FAQ</a></li> 
 
\t <li><a href="index.html">About</a></li> 
 
\t </ul> 
 
    </nav> 
 
\t </header> 
 
\t <section> 
 
\t <div class="banner"> 
 
\t <img src="banner-background.png" id="banner-image"> 
 
\t <div id="banner-text"><h1>Your</h1><h1>web development</h1> 
 
    <h1>develops</h1><h1>here.</h1></div> 
 
\t </div> 
 
\t </section> 
 
    </body> 
 
    </html>

Quelle

2017-11-05 Tarun Kumar

Antwort

0

Sie hier gehen Bruder, habe ich eine div mit class = "navbar-Wrapper" und die Header-Elemente im Inneren platziert. Ich habe die Anzeige verwendet: Inline-Block auf den Header-Elementen, so dass sie horizontal ausgerichtet sind. Für den Navbar-Logo-Sub platzierte ich ihn innerhalb des Navbar-Logos und verwendete Position: absolute und untere: 0, um es an der Unterseite des Elternelements zu platzieren. Code-Snippet ausführen und auf der ganzen Seite anzeigen

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; 
 
    }
<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>

Quelle

2017-11-05 01:29:44

Verwandte Themen

 Verwandte Themen