我想知道为什么我的CSS中.page的背景颜色没有运行。我希望我的页面内容有白色背景，但它仍然是透明的。
我认为链接工作正常，因为＆＃39; body＆＃39;在CSS中工作正常。但是，更改.page中的任何内容都不会改变浏览器中的任何内容。
@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 0px 0px;
}
.page {
max-width: 980px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
}<!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" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 500px)" href="css/screen_layout_small.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width: 800px)" href="css/screen_layout_medium.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<a href="#" class="logo"></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">
<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 href="">Visit our blog</a>
</p>
</div>
</div>
<div class="promo">
<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 href="">Read the article</a>
</p>
</div>
</div>
<div class="promo">
<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 href="">Learn more</a>
</p>
</div>
</div>
</div>
<nav>
<a href="#">About Us</a>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Contact Us</a>
</nav>
<footer>
© Your Organization Name
</footer>
</body>
</html>
非常感谢任何帮助。
答案 0 :(得分：1)
到目前为止，你所做的一切都很棒 您只需要将两个脚本组合在一起。
<!DOCTYPE HTML>
<html>
<style>
body {
color: #575c7a;
line-height: 1.5em;
font-family: Arial;
font-size: 14px;
background: #515673 url(../images/background_gradient.jpg) repeat-x 0px 0px;
}
.page {
max-width: 980px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
}
</style>
<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" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 500px)" href="css/screen_layout_small.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width: 800px)" href="css/screen_layout_medium.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<a href="#" class="logo"></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">
<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 href="">Visit our blog</a></p>
</div>
</div>
<div class = "promo">
<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 href="">Read the article</a></p>
</div>
</div>
<div class = "promo">
<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 href="">Learn more</a></p>
</div>
</div>
</div>
<nav>
<a href="#">About Us</a>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Contact Us</a>
</nav>
<footer>
© Your Organization Name
</footer>
</body>
</html>
答案 1 :(得分：1)
我想你是在<body class="page">讲述覆盖身体的css规则。
但是你在身体标签中有背景作为图像，你没有在.page中使用背景颜色覆盖身体的背景，但是添加了你有背景图像和背景颜色的含义。因此，只需使用background覆盖该背景：
.page {
max-width: 980px;
margin: 0px auto 0px auto;
position: relative;
background: #fff;/* to override the background from body*/
}
答案 2 :(得分：0)
我通过在从第一个body标记到结尾标记的所有内容中添加div来实现它，并使用.page的内容对其进行样式化我将很快添加一个示例。