2016-11-18 106 views
0

我正在测试我的代码并行于视频教程。我有两个CSS文件。第一个工作正常。第二个CSS似乎不适用于HTML。我的文件夹结构如下。第二个CSS不链接/应用

  • /
    • CSS(screen_style.css,screen_layout_large.css)
    • 图像(banner_large.jpg,logo_large.png等)
    • 的index.html

HTML

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" /> 

     <title>Lynda.com | Creating a Responsive Web Design</title> 

     <link rel="stylesheet" type="text/css" href="css/screen_styles.css" /> 
     <link rel="stylesheet" type="text/css" href="css/screen_layout_large.css" /> 

    </head> 
    <body> 
     <div class="page"> 
      <header> 
       <a class="logo" href="#"></a> 
      </header> 

      <article> 
       <h1>Welcome</h1> 
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Duis aute irure</a> dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      </article> 

      <div class="promo_container"> 
       <div class="promo one"> 
        <div class="content"> 
         <h3>Promo Heading Here</h3> 
         <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
         <p><a class="cta" href="">Visit our blog</a></p> 
        </div> 
       </div> 
       <div class="promo two"> 
        <div class="content"> 
         <h3>Promo Heading Here</h3> 
         <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p> 
         <p><a class="cta" href="">Read the article</a></p> 
        </div> 
       </div> 
       <div class="promo three"> 
        <div class="content"> 
         <h3>Promo Heading Here</h3> 
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor inci did unt.</p> 
         <p><a class="cta" href="">Learn more</a></p> 
        </div> 
       </div> 
      </div> 

      <nav> 
       <a href="#">About Us</a> 
       <a href="#">Contact Us</a> 
      </nav> 

      <footer> 
       &copy; AG IT Solutions. 
      </footer> 
     </div> 

    </body> 
</html> 

CSS/screen_tyle

@charset "UTF-8"; 

/* Global Content Formatting and Styles */ 

body { 
    color: #575c7a; 
    line-height: 1.5em; 
    font-family: Arial; 
    font-size: 14px; 
    background:#515673 url(../images/background_gradient.jpg) repeat-x 0 0; 
} 

.page { 
    max-width: 980px; 
    margin: 0 auto 0 auto; 
    padding: 0; 
    position: relative; 
    background-color: #fff; 
} 

h1 { 
    font-size: 2em; 
    font-weight: normal; 
    color: #a6430a; 
    margin: 0 0 0.5em 0; 
} 

h2 { font-size: 1.7em; margin: 0 0 1em 0;} 

h3 { font-size: 1.5em; margin: 0 0 1em 0;} 

p { margin:0 0 0.75em 0;} 

a { color:#de9000;} 

a:hover {color:#009eff;} 

a.cta { 
    text-transform: uppercase; 
    font-size:.9em; 
    font-weight:bold; 
    text-decoration:none; 
    margin: .5em 0 0 0; 
    padding: 0 12px 0 0; 
    background: url(../images/cta_arrow.png) no-repeat right 0; 
} 

a.cta:hover { 
    background-position:right -50px; 
} 

.promo h3 {font-size: 1.1em; margin:0;} 

.promo p {line-height:1.2em; font-size:.9em; margin-bottom:.5em;} 

.promo { background-repeat: no-repeat;} 

.promo.one { background-image: url(../images/promo_1.jpg);} 
.promo.two { background-image: url(../images/promo_2.jpg);} 
.promo.three { background-image: url(../images/promo_3.jpg);} 

footer { 
    font-size: .85em; 
    color: #9ba0bd; 
    background-color:#575c7a; 
    padding: 10px 10px 10px 10px; 
} 

CSS/screen_layout_large

@charset "UTF-8"; 

/* Layout (global rules for all sizes) */ 

body { 
    margin: 0; 
    padding: 0; 
} 

header a.logo { 
    display: block; 
    position: absolute; 
    background-position: 0 0; 
    background-repeat: no-repeat; 
} 

/* Layout Large Screens (default for older browsers) */ 

header { 
    height: 275px; 
    background: url(../images/banner_large.jpg) no-repeat right 0; 
} 

header a.logo { 
    width: 150px; 
    height: 85px; 
    top: 28px; 
    right: 30px; 
    background-image: url(../images/logo_large.png); 
} 

无图像的加载在其中在screen_layout_large.css脚本标头部分。填充也不起作用。我已经试过包括!重要的CSS属性。但问题似乎是CSS没有链接。当我删除第一个CSS时,它只有纯HTML。

+1

好了,除去第一个将没有真正做多,在第二个规则没有真正改变任何东西的样子。你应该做的是在浏览器中查看Firebug或类似的(“检查元素”),看看哪些规则适用于每个元素,并且如果加载了背景,请查看链接是否正常工作。 – junkfoodjunkie

+2

您是否尝试打开开发工具中的css链接以确保这两个css文件都已连接? –

+3

右键单击您的页面,然后选择“查看源代码”(或类似的,取决于浏览器)。当源代码在新标签上打开时,点击(或右键点击 - 在新标签中打开)指向第二个CSS的链接。它打开了吗? – coopersita

回答

0

尝试打开你的开发工具(F12谷歌浏览器)和head元素中找到你的两个links的CSS文件。 Mouse2- >打开新的标签

enter image description here

链接如果两个文件不会是空的(你应该看到您的任何CSS属性),让我们知道。 如果其中一个为空,则表示您未正确连接。

+0

第二个是空的(只有评论)。但在Firefox中运行良好。它显示了我点击页面源代码链接时的CSS。有没有修复Chrome?但铬支持大部分CSS3/HTML5的东西,对吧? – akalanka

+0

@akalanka,chrome比其他浏览器支持更多。这是一个有些奇怪 –

+0

@akalanka,如果你的项目是小,尽量使用相同的结构创建新项目,可以肯定,这就是我所有CSS文件连接(使用devtools)。如果这将是确定,只是复制粘贴的所有内容,可能是问题仅仅是印刷错误的地方,因为你的代码看起来不错。 –

0

清除浏览器的现金是在这个特定问题的解决方案......