Visual Studio 2015并未完全加载我的样式表

时间:2016-03-07 15:56:48

标签: javascript html css visual-studio visual-studio-2015

Visual Studio 2015并没有完全加载我的样式表,因此在测试时会丢失一些元素。我不知道如何解决这个问题。我是Visual Studio的新手,所以我不确定问题出在哪里。我已经包含了我的html& css文件。谢谢

我的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Your ASP.NET application</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="home">
        <div id="header">
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
                <div id="styledimg"></div>
            </nav>
        </div>
    </div>
    <div id="head-soc">
        <div id="linkedin-icon"><a href="http://linkedin.com/pub/titus-jackson/2/a2b/939">Linkedin</a></div>
        <div id="youtube-icon"><a href="http://youtube.com/titusishmael">Youtube</a></div>
        <div id="facebook-icon"><a href="http://facebook.com/titusjackson1">Facebook</a></div>
    </div>
    <div class="content"><p>Create, Collaborate, Innovate</p></div>
    <div class="fadein">
        <img src="images/pic1.png" alt="" style="width: 90%; height: 825" class="active" />
        <img src="images/pic2.png" alt="" style="width: 90%; height: 825;" />
        <img src="images/pic3.png" alt="" style="width: 90%; height: 825;" />
        <img src="images/pic4.png" alt="" style="width: 90%; height: 825;" />
    </div>
    </div>

    <div id="about">
        <div class="wrapper">
            <h4>Titus Jackson</h4>
            <p>Film Maker ~ Screen Writer ~ Editor</p>
        </div>
        <img src="Images/Titus-Jackson1.jpg" alt="Titus Jackson" width="425" height="365" border="0" />
        <div id="section2">
            <p>
                For over 15 years <span>Cinemuze</span> has had the honor of working with some of the most talented creative collaborators Tulsa has to offer. We love working
                on a variety of projects. As it is our goal to be a well rounded company with our fingers in a lot of pies.
            </p>
            <p>
                Our paramount value is to approuch the material with excellence and an orignal point of view to tell a unique and compelling story. It is our belief that
                life is what you make of it, and the saddest lost is not to explore all your potential in the short time you've been given.
            </p>
            <p>
                We've had the opportunity to work on multiple feature films and national television shows ranging from christian television to TLC television. We've created
                mulitple award winning music videos, short films and evevn a feature film. Feel free to take a look around the site, drop us an email, we look forward to hearing
                from you.
            </p>
            <a href="mailto:titusjackson@mac.com"><img src="images/email1.png" alt="email1" width="26" height="26" /></a>
        </div>
    </div>
    <div id="projects">
        <h5>View our current projects</h5>
        <ul>
            <li>
                <iframe width="265" height="200" src="https://www.youtube.com/embed/8CZJzUk7fFM" frameborder="0" allowfullscreen></iframe>
                <p>Eugene Gregory Promo</p>
            </li>
            <li>
                <iframe width="265" height="200" src="https://www.youtube.com/embed/cLm3Vh4_Ruc" frameborder="0" allowfullscreen></iframe>
                <p>Family Cup Promo</p>
            </li>
            <li>
                <iframe width="265" height="200" src="https://www.youtube.com/embed/2t9-vVNgF7c" frameborder="0" allowfullscreen></iframe>
                <p>This Generation</p>
            </li>
        </ul>
    </div>
    <div id="contact">
        <section3>
            <h3>To connect with us:</h3>
            <p><span>Cinemuze</span> is based in Tulsa, Oklahoma and travels widely for a variety of projects.</p>
            <p>If your interested in our work, you can connect with us via email or phone.</p>
        </section3>
        <div class="section4">
            <img src="images/email1.png" alt="email" width="26" height="26" />
            <a href="mailto:titusjackson@mac.com">
                <p>titusjackson@mac.com</p>
            </a>
            <img src="images/phone.png" alt="phone" width="24" height="24" />
            <p>+1 (918) 671-3340</p>
        </div>
    </div>
    <footer>
    </footer>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('.fadein img:gt(0)').hide();
            setInterval(function() {
                $('.fadein :first-child').fadeOut(2000)
                .next('img').fadeIn(2000)
                .end().appendTo('.fadein');},
                3000);
        });
    </script>
</body>
</html>

我的CSS

@charset "UTF-8";
/* CSS Document */
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
}


#header {
    width: 100%;
    margin-top: -15px;
    position: fixed;
    background-color: rgba(60,59,59,1.00);
    transition-duration: 1s;    
    z-index: 25;
}

div#header nav {
    width: 1425;
    height: 110px;
}

div#header ul {
    list-style: none;
    margin-left: 100px;
    float: left;
}

div#header li {
    float: left;
    margin-left: 64px;
    margin-top: 10px;
}

div#header a {
     color: white;
     text-decoration: none;
     line-height: 45px;
     font-size: .9em;
     text-transform: capitalize;
}

div#header a:hover {
    color: rgba(249,0,3,1.00);
}

div#styledimg {
    background-image: url(images/logo.png);
    background-repeat: no-repeat; width: 224px;
    height: 85px;
    float: right;
    margin-right: 150px;
    margin-top: 10px;
}


/*page-specific header styles*/

#header {
    background-color: rgba(60,59,59,1.00);
    width: 1425;
    height: 110px;
}

/* layout styles*/

/*home page*/

div#home {
    height: 950px;
    background-color: transparent;
}

.fadein {
    position: relative;
    width: 100%;
    height: 825px;  
}

.fadein img {
    border: 80px solid rgba(60,59,59,1.00);
    height: 825;
    position: absolute;
    left: -225px;
    top: -35px;
    z-index: -9;
}

#header {
    background-color: rgba(60,59,59,1.00);
}

#head-soc {
    width: 129;
    height: 86;
    margin: 10px;
    padding: 0px;
    float: right;
    margin-right: 40px;
    margin-top: 300px;
    right: 25px;
    position: fixed;    
    z-index: 25;
}

#head-soc a {
    margin-top: 10px;
    margin-right: 20px;
}

 #linkedin-icon a {
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    height: 43px;
    width: 43px;
    border: 0;
    background-image: url(Images/socialsprites_white.png); 
    display: block;
    float: right;   
    background-position: 0px 0px;
}
#linkedin-icon a:hover {
    background-image: url(Images/socialsprites_white.png); 
    background-position: 0px -43px;
}

#youtube-icon a {
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    height: 43px;
    width: 43px;
    border: 0;
    background-image: url(Images/socialsprites_white.png); 
    display: block;
    float: right;
    margin-left: 20px;
    background-position: -43px 0px;
}

 #youtube-icon a:hover {
    background-image: url(Images/socialsprites_white.png); 
    background-position: -43px -43px;
}

 #facebook-icon a {
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    height: 43px;
    width: 43px;
    border: 0;
    background-image: url(Images/socialsprites_white.png);
    display: block;
    float: right;
    background-position: -86px -85px;
}

 #facebook-icon a:hover {
    background-image: url(Images/socialsprites_white.png);
    background-position: -86px -128px;
}

.content p {
    font-family: BlairMdITC TT-Medium;
    font-size: 44px;
    width: 550px;
    left: 50%;
    margin-left: -15%;
    margin-top: 25%;
    color: rgba(249,0,3,1.00);
    position: absolute;
}

/* about page*/

div#about {
     background-color:rgba(188,184,184,1.00);
     height: 550px;
     margin-top: -5px;
     padding-top: 100px;
     z-index: 35;
 }

.wrapper h4 {
    font-famiy: Geneva;
    font-size: 25px;
    padding-left: 224px;
    color: rgba(249,0,3,1.00);
    margin-bottom: -20px;
}

.wrapper p {
    font-family: Geneva;
    font-size: 12px;
    margin-left: 226px;
    margin-top: 20px;
    margin-bottom: 15px;
    color: rgba(134,133,133,1.00);
}

h6 {
    padding-left: 225px;
    margin-top: -20px;
    margin-bottom: 10px;
    color: rgba(60,59,59,1.00);
}
img {
     float: left;
     margin-left: 225px;
     margin-right: 15px;
 }

#section2 {
     font-family: Helvetica;
     font-size: 16px;
     color: rgba(60,59,59,1.00);
     width: 1280px;
     padding-top: -80px;
     height: 300px;
 }

 #section2 p {
     color: rgba(60,59,59,1.00);
 }

#section2 img {
    margin-left: 2px;   
}

span {
     color: rgba(249,0,3,1.00);
 }


 /* projects page */

 div#projects {
     background-color: #3A3939;
     background-position: 25px;
     height: 450px;
     margin: 0px; 
     line-height: 0;
     padding-top: 25px; 

 }

 div#projects ul {
     list-style: none;
     margin-left: 100px;
     float: left;
 }


 div#projects li {
     float: left;
     margin-top: 65px;
     margin-left: 120px;
 }

 div#projects li p {
     margin-left: 20px;
     text-align: center;    
     font-family: BlairMdITC TT-Medium;
     font-size: 20px;
     color: rgba(249,0,3,1.00)
 }

  @media only screen and (max-width: 632px) {
     div#projects li {
         float: none;
         margin-top: 65px;
         margin-left: 95px;
     }

     div#projects li p {
         margin-left: 10px;
         text-align: center;
     }

 }
  div#projects h5 {
    margin-left: 650px;
    font-size: 20px;
    font-family: Helvetica, Arial, sans-serif;
    color:rgba(179,178,178,1.00);
    padding-bottom: 45px;
    margin-bottom: -15px;
 }

 p {
    font-size: 16px;
    margin-left: 195px;
    color: rgba(249,247,247,1.00);
 }

 /* contact page */

 div#contact {
     background-image:url(images/studio4.png);
     background-size: cover;
     background-attachment: fixed;
     padding-top: 35px;
     padding-bottom: 100px; 
 }

 section3 h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: rgba(249,0,3,1.00);
    margin-left: 660px;
    margin-top: 75px;
 }

 section3 p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: rgba(255,255,255,1.00);
    width: 650px;
    padding-left: 85px;
    margin-left: 385px;
 }

 .section4 {
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    color: rgba(255,255,255,1.00);
    margin-left: 440px;
    margin-top: 50px;
 }

 .section4 a {
     text-decoration: none;
 }

 .section4 a p:hover {
     color: rgba(249,0,3,1.00);
}




/* ~~ The footer ~~ */




/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, article, figure {
    display: block;
}

1 个答案:

答案 0 :(得分:0)

因此样式表显示,它只是样式表中引用的图像没有显示?当我遇到这个问题时,它的文件路径不正确,或者内容文件实际上没有被添加到项目中。如果右键单击图像文件夹并单击&#34;添加&gt;现有项目&#34;对于你的所有图像,有时会解决问题(至少对我而言)。