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>
© 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。
好了，除去第一個將沒有真正做多，在第二個規則沒有真正改變任何東西的樣子。你應該做的是在瀏覽器中查看Firebug或類似的（「檢查元素」），看看哪些規則適用於每個元素，並且如果加載了背景，請查看鏈接是否正常工作。 – junkfoodjunkie
您是否嘗試打開開發工具中的css鏈接以確保這兩個css文件都已連接？ –
右鍵單擊您的頁面，然後選擇「查看源代碼」（或類似的，取決於瀏覽器）。當源代碼在新標籤上打開時，點擊（或右鍵點擊 - 在新標籤中打開）指向第二個CSS的鏈接。它打開了嗎？ – coopersita