CSS沒有出現在活動網站

Question

* { 
 
    margin:0; 
 
    padding: 0; 
 
    border:0; 
 

 
} 
 

 
html, 
 
body{ 
 
    background:url(https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b) no-repeat center fixed; 
 

 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    color:#ffffff; 
 
    ; 
 
    padding-bottom:25px; 
 
} 
 

 
.wrapper{ 
 
    max-height: 100%} 
 

 

 

 
header{ 
 
    max-width:100%; 
 
    background-color: #107CBD; 
 
    /* padding-top: 5%;*/ 
 
    padding-bottom: 0.5%; 
 
} 
 

 

 
.left-col{ 
 
    max-width:35%; 
 
    float:left; 
 
    margin-left: 5%; 
 
    margin-top: 2%;} 
 

 
.right-col{ 
 
    width:70%; 
 
    float:right; 
 
} 
 

 

 
.right-col ul{ 
 
    width: 100%; 
 
} 
 

 
.right-col ul li{ 
 
    list-style:none; 
 
    float: right; 
 
    display:block; 
 
    padding-top:.4%; 
 
    margin-left:1%; 
 
    padding-right: 1.8%; 
 
     } 
 

 
.right-col li a{ 
 
    text-decoration:none; 
 
    color:white; 
 
} 
 

 
h1{ 
 
    clear: both; 
 
    width: 50%; 
 
    font-family:'Noto sans', 'sans serif'; 
 
    font-weight: 100; 
 
    color: white; 
 
    font-size: 2em; 
 

 
    margin:0 auto; 
 
    text-align: center; 
 
    padding-bottom: 1%; 
 
} 
 

 
h2{ 
 
clear: both; 
 
    width: 20%; 
 
    font-family:'Courgette', 'cursive'; 
 
    font-weight: 200; 
 
    color: white; 
 
    font-size: 2em; 
 
    margin:0 auto; 
 
    text-align: center; 
 
    padding-bottom: 1%; 
 
} 
 

 
h4{ 
 
clear: both; 
 
    width: 10%; 
 
    font-family:'Noto sans', 'sans serif'; 
 
    font-weight: 100; 
 
    color: white; 
 
    font-size: 2em; 
 

 
    margin:0 auto;} 
 

 
sup{ line-height:0; 
 
font-size:65%; 
 
} 
 

 

 
@import url(http://fonts.googleapis.com/css?family=Raleway); 
 
#cssmenu, 
 
#cssmenu ul, 
 
#cssmenu ul li, 
 
#cssmenu ul li a, 
 
#cssmenu #menu-button { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    list-style: none; 
 
    line-height: 1; 
 
    display: block; 
 
    position: relative; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    left:0%; 
 
} 
 
#cssmenu:after, 
 
#cssmenu > ul:after { 
 
    content: "."; 
 
    display: block; 
 
    clear: both; 
 
    visibility: hidden; 
 
    line-height: 0; 
 
    height: 0; 
 
} 
 
#cssmenu #menu-button { 
 
    display: none; 
 
} 
 
#cssmenu { 
 
    width: auto; 
 
    font-family: Raleway, sans-serif; 
 
    line-height: 1; 
 
} 
 
#cssmenu > ul { 
 
    background: #505050; 
 
} 
 
#cssmenu > ul > li { 
 
    float:left; 
 
    -webkit-perspective: 1000px; 
 
    -moz-perspective: 1000px; 
 
    perspective: 1000px; 
 
    left: 38% 
 
} 
 
#cssmenu.align-center > ul { 
 
    font-size: 0; 
 
    text-align: center; 
 
} 
 
#cssmenu.align-center > ul > li { 
 
    display: inline-block; 
 
    float: none; 
 
} 
 
#cssmenu.align-right > ul > li { 
 
    float: right; 
 
} 
 
#cssmenu > ul > li > a { 
 
    padding: 16px 20px; 
 
    font-size: 14px; 
 
    color: #ffffff; 
 
    letter-spacing: 1px; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    background: #505050; 
 
    -webkit-transition: all .3s; 
 
    -moz-transition: all .3s; 
 
    -o-transition: all .3s; 
 
    transition: all .3s; 
 
    -webkit-transform-origin: 50% 0; 
 
    -moz-transform-origin: 50% 0; 
 
    transform-origin: 50% 0; 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
} 
 
#cssmenu > ul > li.active > a { 
 
    color: #107CBD; 
 
} 
 
#cssmenu > ul > li:hover > a, 
 
#cssmenu > ul > li > a:hover { 
 
    color: #107cbd; 
 
    -webkit-transform: rotateX(90deg) translateY(-23px); 
 
    -moz-transform: rotateX(90deg) translateY(-23px); 
 
    transform: rotateX(90deg) translateY(-23px); 
 
    -ms-transform: none; 
 
} 
 
#cssmenu > ul > li > a::before { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    z-index: -1; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 16px 20px; 
 
    color: #107cbd; 
 
    background: #1d1d1d; 
 
    content: attr(data-title); 
 
    -webkit-transition: background 0.3s; 
 
    -moz-transition: background 0.3s; 
 
    transition: background 0.3s; 
 
    -webkit-transform: rotateX(-90deg); 
 
    -moz-transform: rotateX(-90deg); 
 
    transform: rotateX(-90deg); 
 
    -webkit-transform-origin: 50% 0; 
 
    -moz-transform-origin: 50% 0; 
 
    transform-origin: 50% 0; 
 
    -ms-transform: translateY(- -18px); 
 
     } 
 
#cssmenu > ul > li:hover > a::before, 
 
#cssmenu > ul > li > a:hover::before { 
 
    background: #505050; 
 
} 
 
#cssmenu.small-screen { 
 
    width: 100%; 
 
} 
 
#cssmenu.small-screen > ul, 
 
#cssmenu.small-screen.align-center > ul { 
 
    width: 100%; 
 
    text-align: left; 
 
} 
 
#cssmenu.small-screen > ul > li, 
 
#cssmenu.small-screen.align-center { 
 
    float: none; 
 
    display: block; 
 
    border-top: 1px solid rgba(100, 100, 100, 0.1); 
 
} 
 
#cssmenu.small-screen > ul > li:hover > a, 
 
#cssmenu.small-screen > ul > li > a:hover { 
 
    color: #107cbd; 
 
    -webkit-transform: none; 
 
    -moz-transform: none; 
 
    transform: none; 
 
    -ms-transform: none; 
 
} 
 
#cssmenu.small-screen > ul > li > a::before { 
 
    display: none; 
 
} 
 
#cssmenu.small-screen #menu-button { 
 
    display: block; 
 
    padding: 16px 20px; 
 
    cursor: pointer; 
 
    font-size: 14px; 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
    background: #505050; 
 
} 
 
#cssmenu.small-screen #menu-button:after { 
 
    content: ""; 
 
    position: absolute; 
 
    right: 20px; 
 
    top: 17px; 
 
    display: block; 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    border-top: 2px solid #ffffff; 
 
    border-bottom: 2px solid #ffffff; 
 
    width: 22px; 
 
    height: 3px; 
 
} 
 
#cssmenu.small-screen #menu-button.menu-opened:after { 
 
    border-top: 2px solid #107cbd; 
 
    border-bottom: 2px solid #107cbd; 
 
} 
 
#cssmenu.small-screen #menu-button:before { 
 
    content: ""; 
 
    position: absolute; 
 
    right: 20px; 
 
    top: 27px; 
 
    display: block; 
 
    width: 22px; 
 
    height: 2px; 
 
    background: #ffffff; 
 
} 
 
#cssmenu.small-screen #menu-button.menu-opened:before { 
 
    background: #107cbd; 
 
} 
 

 

 
div nav ul li{ 
 
    text-align: left; 
 
    display: inline; 
 
    width: %; 
 
    float:left; 
 
    margin-right: .8em; 
 
    font-family: 'Noto Sans'; 
 

 
} 
 

 
li.changeBackground { 
 
    background-color: #505050; 
 
} 
 

 
li.changeBackground:hover { 
 
    background-color: #777777; 
 
} 
 

 
li.changeBackground:active { 
 
    background-color: #107CBD; 
 
} 
 

 
.homepage-hero-module { 
 
    border-right: none; 
 
    border-left: none; 
 
    position: relative; 
 
} 
 

 
p{ 
 
    position:relative; 
 
    width: 30%; 
 
    padding:1em 1.5em; 
 
    margin:2em auto; 
 
    color: #fff; 
 
    background:#107CBD; 
 
    overflow: hidden; 
 
    font-family:'Noto Sans'; 
 
} 
 

 

 
p:before{ 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    border-width: 0 16px 16px 0; 
 
    border-style: solid; 
 
    border-color: #fff #fff #505050 #505050; 
 
    background: #505050; 
 
    -web-kit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px; rgba(0,0,0.2); 
 
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px;rgba(0,0,0.2); 
 
    box-shadow:0 1px 1px rgba(0,0,0,0,0.3), -1px 1px 1px rgba(0,0,0 0.2); 
 
    /* Firefox 3.0 damage limitation*/ 
 
    display: block; width: 0; 
 
} 
 

 
p.rounded{ 
 
    -moz-border-radius: 5px 0 5px 5px; 
 
    border-radius: 5px 0 5px 5px; 
 
} 
 

 
.p.rounded:before{ 
 
    border-width: 9px; 
 
    border-color: #fff #fff transparent transparent; 
 
    -moz-border-radius: 0 0 0 5px; 
 
    border-radius: 0 0 0 5px; 
 
} 
 

 

 
h3{ 
 

 
    font-family:'Noto-Sans', sans-serif; 
 

 
} 
 
h5{ 
 
    font-family:'Noto-Sans', sans-serif; 
 
    float: right; 
 
    margin-top:10px; 
 
} 
 

 

 

 

 
#footer{ 
 

 
    margin: 1px; 
 
    height:100px; 
 
    width: 100%; 
 
    border-top:3px solid #107CBD; 
 
    clear: both; 
 

 
    color: #fff; 
 
    line-height:23px; 
 
    background-color:#505050; 
 
    text-align:center; 
 
    position:fixed; 
 
     font-size:12px; 
 
    bottom:0px; 
 
vertical-align:baseline: 
 
} 
 
footer { 
 
    width: 100%; 
 
    padding-top: 3.5%; 
 
    padding-bottom: 9.5%; 
 
    background-color: #505050; 
 
border-top:8px solid #107CBD; 
 
position:fixed; 
 
text-align:center; 
 
} 
 

 

 

 
} 
 

 
#footer ul li a: hover{ 
 
    color: #000; 
 
    background-color:#777777; 
 
} 
 

 

 
#footer ul li a{ 
 
    text-decoration: none; 
 
    font-family: Noto-sans,sans serif; 
 
    padding:2em 1em; 
 
    color: #fff; 
 

 
} 
 

 

 
#footer ul li a: hover{ 
 
    color: #000; 
 
    background-color:#777777; 
 

 
} 
 

 
footer ul { 
 
    width: 100%; 
 
/* margin-right: 25%;*/ 
 
} 
 
footer ul li { 
 
    float:0px; 
 
    padding-right:2%; 
 
    margin-right:3%; 
 
    display:inline; 
 
    font-family:Noto sans,sans serif; 
 
    font-size:12px; 
 

 
} 
 

 
#footer ul li a{ 
 
    text-decoration: none; 
 
    font-family:'Noto-sans',sans serif; 
 
    padding:2em 1em; 
 
    color: #fff; 
 

 
} 
 

 
div.footer-social{ 
 

 
    float:right; 
 
    padding-right:10%; 
 
    margin-right:5%; 
 
    display:inline; 
 
    margin-top:-2.8%;

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <title>index</title> 
 
     <meta charset="UTF-8"> 
 
     <link rel="shortcut icon" href="path to icon/favicon.ico"/> 
 
<link href='https://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'> 
 
<link href='https://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'> 
 
     <title>Dawn's website</title> 
 
     <link rel="stylesheet" type='text/css' href="index.css"/> 
 
     <link rel="stylesheet" href="styles.css"> 
 
    </head> 
 
    <body> 
 
     <div class="wrapper"> 
 
      <header> 
 
       <div class="left-col"> 
 

 
      <img src="images/onebuglogoforwebdt.jpg" height="64" width="60" alt="One Bug logo" id="logo"&nbsp;> 
 

 
        </div> 
 
       <div class="right-col"> 
 
        <ul class="social-icons"> 
 
         <li><a href="mailto:Dawn@onebugdesign.com"> 
 
         <img class="Email"<img src="images/email-icon32.png" style="margin:0px -9px"></a></li> 
 
         <li><a href="https://pinterest.com/rasberry14/target=_blank"><img src="images/Pinterest-icon.png"style="margin:0px -9px"></a></li> 
 
         <li><a href="https://twitter.com/fraggleart/target=_blank"><img src="images/Twitter-2-icon.png" style="margin:0px -9px"></a></li> 
 
         </ul> 
 
         </div> 
 
       <div class="header-slogan"> 
 
        <h1>One Bug Design</h1> 
 
       <div class="tag-line"> 
 
<h2>Designed to create<sup><small>&#153</small></sup></h2> 
 
       </div> 
 
      </header> 
 
      <aside> 
 
       <nav id='cssmenu'> 
 
        <ul> 
 
         <li class='active'> 
 
          <a href='index.html'>Home</a></li> 
 
         <li> 
 
          <a href="../portfolio/portfolio.html">Portfolio</a></li> 
 
         <li><a href="../finds/finds.html">Finds</a></li> 
 
         <li><a href="../contact/contact.html">Contact</a></li> 
 

 
        </ul> 
 
       </nav> 
 
      </aside> 
 
      <main> 
 
       <section class="section-1"> 
 
        <p> 
 

 
         Dawn here, your friendly graphic designer. Do you need someone to make your brand sparkle with desire? Someone to show your logo some love. Do you need someone who truly enjoys the overall creative process and has an eye for great design? Someone who is fluent in the ways of the Adobe CC Master. Someone who will listen and fulfill your visual communication needs. Someone who is determined and who has Ideation? Well click no further! You have arrived at your destination. ........<strong>Welcome!</strong></p> 
 
       </section> 
 
       <section> 
 
        <h3>Software skills</h3> 
 
        <div class="wrapper"> 
 
         <div class="icon"><br> 
 
         <img src="images/Adobe-Ai-icon.png" style="margin:14px" width="40px"/> 
 
         <img src="images/Adobe-Id-icon.png" style="margin:14px" width="40px"/> 
 
         <img src="images/Adobe-PS-icon.png" style="margin:14px"width="40px"/> 
 
         <img src="images/bridge-icon.png"style="margin:14px" width="40px"/> 
 
          <img src="images/Camera-icon.png"style="margin:14px" width="40px"/> 
 
          <img src="images/HTML-5-icon.png"style="margin:14px " width="40px"/> 
 
          <img src="images/css-icon.png"style="margin:14px -3px" width="40px"/> 
 
          <img src="images/Office-icon.png"style="margin:13px" width="40px"/></div> 
 
         </section> 
 
        <section> 
 
         <div class="text"> 
 
          Illustrator | &nbsp; 
 
          Indesign | &nbsp; 
 
          Photoshop | &nbsp; 
 
          Bridge | &nbsp; 
 
          DSLR | &nbsp; 
 
          HTML5 | &nbsp; 
 
          CSS | &nbsp; 
 
          Microsoft Office | &nbsp; 
 
         </div> 
 

 
       </section> 
 
       <aside></aside> 
 
       <br> 
 
      </main> 
 
      <footer> 
 
        <ul stlyle="list-style-type:none"> 
 
        <li class="changeBackground"> 
 
         <a href="index.html">Home</a></li> 
 
        <li class="changeBackground"> 
 
         <a href="../portfolio/portfolio.html">Portfolio</a></li> 
 
        <li class="changeBackground"><a href="../finds/finds.html">Finds</a></li> 
 
        <li class="changeBackground"> 
 
         <a href="../contact/contact.html">Contact</a></li> 
 
       <li>&copy;2015 One Bug Design All Rights Reserved</li> 
 
       </ul> 
 

 
       </br> 
 

 
       <div class="footer-social"> 
 
       <a class="social Twitter" 
 
       <ahref="https://twitter.com/fraggleart" class="twitter-follow-button" data-show-count="false">Follow @fraggleart</a> 
 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 
 
       <a class="social Pinterest" 
 
       <a href="https://pinterest.com/rasberry14"><img class="Pinterest"img src="images/Pinterest-icon.png"/></a> 
 
       <a class="social Email" 
 
        <a href="mailto:DawnThomas@onebugdesign.com"> 
 
         <img class="Email"<img src="images/email-icon32.png"/></a> 
 

 
       </ul> 
 
       </div> 
 
        </footer> 
 
       </div> 
 

 
      </body> 
 
     </html>

我的CSS似乎並沒有被出現在我的直播現場。我已經嘗試了以下方法： - 確保CSS和HTML文件使用小寫字母
- 檢查拼寫 - 確保CSS和HTML位於一個子文件夾中。 -Linking我的樣式表

我的文件夾的設置如下： - HTML -CSS -images 的圖像似乎出現在CSS臺，並在括號罰款。我錯過了什麼？ http://www.cssdesk.com/Mb6Z2

Answer 1

html, 
body{ 
    background:url(https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b) no-repeat center fixed; 

    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    color:#ffffff; 
    ;/*remove this i think this issue*/ 
    padding-bottom:25px; 
}