html - 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 位于同一个子文件夹中。 - 链接我的样式表

我的文件夹设置如下: - HTML -CSS -图片 这些图像在 CSS DESk 和 Brackets 上看起来很好。我错过了什么？ 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;
}