我正在测试我的代码并行于视频教程。我有两个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