CSS背景未显示

Question

我正在尝试使用以下样式表

* {margin: 0; padding: 0}

html {min-height: 100%; padding-bottom: 1px; overflow: scroll;}

body {background: #fff; color: #444; font: 0.75em/1.5 "Arial", "Helvetica", sans-serif; }

[class] {list-style: none; padding: 0}

h1, h2, h3, h4, h5, h6 {font-size: 1em}

dt {font-weight: 700}

table {border-collapse: collapse}

img {border: none; vertical-align: middle}

a {color: #ff6000; text-decoration: none; outline: none; cursor: pointer}

a:hover {text-decoration: underline}

textarea, input, select, option, optgroup, button {font: 1em "Arial", "Helvetica", sans-serif}

button, [type="radio"], [type="checkbox"], [type="submit"], [type="button"], [type="reset"], label[for], select {cursor: pointer}

input, select, textarea {outline: none}

fieldset {overflow: hidden; border: none;}

legend {display: none;}



button::-moz-focus-inner,

input[type="reset"]::-moz-focus-inner,

input[type="button"]::-moz-focus-inner,

input[type="submit"]::-moz-focus-inner,

input[type="file"]>input[type="button"]::-moz-focus-inner {padding: 0; border: none}



/* Custom fonts

------------------------------------------ */

@font-face {font-family: 'MuseoSans'; src: url('fonts/museosans_500-webfont.eot'); src: url('fonts/museosans_500-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/museosans_500-webfont.woff') format('woff'), url('fonts/museosans_500-webfont.ttf') format('truetype'), url('fonts/museosans_500-webfont.svg#MuseoSans500') format('svg'); font-weight: normal; font-style: normal;}



/* Global Styles

------------------------------------------ */



h1 {margin: 10px 0 0.75em; padding-bottom: 10px; background: url("images/big-line.gif") 0 bottom no-repeat; font: normal 2em "MuseoSans",sans-serif;}

h2 {margin: 1em 0; padding-bottom: 5px; background: url("images/big-line.gif") 0 bottom no-repeat; font: normal 1.667em "MuseoSans",sans-serif;}

h2 a {color: #444;}

h2 a:hover {color: #ff6000;}

h3 {margin: 1em 0 0; color: #969696; font: normal 1.5em "MuseoSans",sans-serif;}

h4 {margin: 1em 0 0; font: normal 1.25em "MuseoSans",sans-serif;}

h5 {margin: 1em 0 0; font-size: 1.083em; font-weight: bold;}

h6 {margin: 1em 0 0; color: #969696; font-size: 1em;}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-family: "MuseoSans",sans-serif;}

blockquote {margin: 1.5em 0; padding: 10px 20px; border: 1px solid #f0f0f0; background: #fafafa; font-style: italic;}

sub, sup {line-height: 1em;}

ul li, ol li {margin: 5px 20px;}

dl {overflow: hidden; margin: 1em 0; }

dt {float: left; clear: left; width: 150px; margin: 0 0 1em; padding: 0; font-weight: bold;}

dd {width: 500px; margin: 0 0 1em 150px; }

p {margin: 1em 0;}

table {margin: 1em auto; border: 1px solid #cacaca;}

table th, table th[class] {padding: 5px 10px; border: 1px solid #cacaca; background: #e6e6e6;}

table td, table td[class] {padding: 5px 10px; border: 1px solid #cacaca;}

table tr.alternate td {background: #fafafa;}



form, form[class] {margin: 1.5em 0; padding: 10px 20px; border: 1px solid #f0f0f0; background: #fafafa;}

label {clear: left; width: 150px; padding: 4px 0; font-weight: bold;}

input, select {width: 300px; margin: 5px 0; padding: 4px 10px; border: 1px solid #cacaca; background: #fff; vertical-align: middle; }

select option {padding: 0 5px; }

input[type="radio"], input[type="checkbox"], input[type="submit"] {width: auto;}

span.required {padding: 0 5px; color: #ff6000; font-weight: bold; font-size: 1.333em;}

textarea {width: 430px; min-width: 430px; max-width: 430px; height: 100px; margin: 5px 0; padding: 5px 10px; border: 1px solid #cacaca; background: #fff; }

p.form-submit, p.form-allowed-tags {margin-left: 150px;}

button, input[type="submit"] {height: 24px; padding: 0 15px; border: 1px solid #cacaca; background: #ff6d16 url("images/button.png") repeat-x top; color: #fff; font-weight: bold; line-height: 24px; text-shadow: #c57240 1px 1px 1px; vertical-align: middle;}



/* Main Layout

------------------------------------------ */

body {min-width: 960px; background: #f4f4f4;}

.header {min-height: 62px; background: #191919 url("images/header.png") bottom repeat-x;}

.header>div {width: 940px; overflow: hidden; margin: 0 auto;}

.header p {margin: 0;}

.header p.title {float: left; max-width: 450px; margin: 0; padding: 10px 17px 10px 0; background: url("images/header-separator.png") right center no-repeat; color: #fff; font: normal 1.833em/42px MuseoSans,sans-serif;}

.header p.title a {color: #fff; text-transform: uppercase;}

.header p.tagline {float: left; width: 350px; min-height: 32px; padding: 15px 0 15px 15px; line-height: 32px;}

.header p.tagline span {display: inline-block; color: #fff; font: normal 1.25em/1.5em MuseoSans,sans-serif; vertical-align: middle;}

.nav {background-color: #2b2b2b;}

.nav>div {width: 940px; margin: 0 auto;}

.nav ul.menu {clear: left; margin: 0; padding: 0;}

.nav ul.menu li {margin: 0;}

.nav ul.menu>li {float: left; position: relative; z-index: 1; overflow: hidden;}

.nav ul.menu>li:hover {overflow: visible; z-index: 20;}

.nav ul.menu>li>a {float: left; height: 28px; padding: 0 18px; border-left: 1px solid #434343; border-right: 1px solid #202020; color: #d5d5d5; font: normal 1.083em/28px MuseoSans,sans-serif; }

.nav ul.menu>li>a:hover, .nav ul.menu>li:hover>a, .nav ul.menu>li.current_page_item>a, .nav ul.menu>li.current-menu-item>a {background: #ff6000; color: #fff; text-decoration: none;}

.nav ul.menu ul {position: absolute; left: 0; top: 28px; width: 180px; list-style: none; margin: 0; padding: 0; border: 1px solid #434343; background: #2a2a2a;}

.nav ul.menu ul li {position: relative; margin: 0; padding: 0; overflow: hidden; border-top: 1px solid #434343; }

.nav ul.menu ul li:first-child {border-top: none;}

.nav ul.menu>li>ul>li:hover {overflow: visible;}

.nav ul.menu ul li a {display: block; padding: 5px 15px; color: #d5d5d5;}

.nav ul.menu ul li a:hover, .nav ul.menu ul li:hover>a {background: #434343; color: #fff; text-decoration: none;}

.nav ul.menu ul ul {left: 180px; top: 0;}

.header form {float: right; width: 170px; margin: 20px 0 0; padding: 0; border: none; background: none; text-align: right;}

.header form button {overflow: hidden; width: 27px; height: 24px; margin: 0; padding: 0; border: 1px solid #6d6d6d; background: transparent url("images/search-button.png"); text-indent: -50em; vertical-align: middle;}

.header form input {width: 120px; height: 22px; margin: 0; padding: 0 5px; border: 1px solid #6d6d6d; background: transparent url("images/input.png") repeat-x; color: #ccc; line-height: 22px; vertical-align: middle;}



.body {background: url("images/bg.png") center repeat-y;}

.content {overflow: hidden; width: 940px; margin: 0 auto; padding: 20px 0;}

.main {float: left; overflow: hidden; width: 650px;}

.sidebar {float: right; width: 250px;}

.footer {background: #f4f4f4 url("images/footer.png") 0 0 repeat-x;}

.footer>div {overflow: hidden; width: 940px; margin: 0 auto; padding: 5px 0;}

.footer p {margin: 0; color: #999; font-size: 0.917em; line-height: 1.75em; text-align: center;}

.footer p.powered {font-size: 0.833em;}

.footer p.powered a {color: #999;}

.footer p.powered a:hover {color: #333;}

.footer ul {display: block; width: 960px; text-align: center;}

.footer ul li {display: inline; margin: 0; padding: 0 5px; border-left: 1px solid #d5d5d5;}

.footer ul li:first-child {border-left: none;}

.footer ul a {color: #616161;}

.footer ul a:hover {color: #333;}

.footer ul ul {display: none;}





/* sidebar

------------------------------------------ */

.widget {margin-bottom: 1.5em;}

.sidebar h3 {padding-bottom: 5px; background: url("images/big-line.gif") 0 bottom no-repeat; color: #666;}

.sidebar ul {list-style: none; margin: 1.5em 0; padding: 0;}

.sidebar ul li {margin: 0; padding: 5px 0; border-top: 1px solid #ddd; color: #969696;}

.sidebar ul li.current_page_item, .sidebar ul li.current-cat {background: #fff;}

.sidebar ul li.current_page_item li, .sidebar ul li.current-cat li {background: #F4F4F4;}

.sidebar ul li a {padding-left: 5px; color: #616161;}

.sidebar ul li a:hover {color: #ff6000;}

.sidebar ul li a:visited {color: #999;}

.sidebar ul li ul {margin: 5px 0 -5px;}

.sidebar ul li ul li a {padding-left: 20px;}

.sidebar ul li ul li ul li a {padding-left: 35px;}

.sidebar form {padding: 0; border: none; background: transparent;}

.sidebar form input {width: 195px; margin: 0; padding: 4px 10px; vertical-align: middle;}

.sidebar form button { background: transparent url("images/search-button.png") center center; vertical-align: middle;}



/* post styles

------------------------------------------ */

.post, .page {clear: both; overflow: hidden; margin-bottom: 30px; border-bottom: 1px solid #e6e6e6;}

.post h2, .page h2 {margin-top: 0;}

p.post-meta {margin: -1.25em 0 0; color: #aaa; line-height: 20px;}

p.post-meta span {padding: 2px 0 2px 25px; background: url("images/icons.png") no-repeat; line-height: 20px;}

p.post-meta span.date {background-position: 3px -3px;}

p.post-meta span.author {background-position: 3px -23px;}

p.post-meta span.cats {background-position: 3px -42px;}

p.post-meta span.comments {background-position: 3px -63px;}

p.tags {float: left; width: 500px; margin-top: 0.5em; margin-bottom: 5px; font-size: 0.917em;}

p.tags span {padding-left: 25px; background: url("images/icons.png") 0 -144px no-repeat;}

p.more {float: right; margin-top: 0.5em;  margin-bottom: 5px; padding-left: 20px; }

p.more a {float: right; height: 20px; padding: 0 25px 0 0; background: url("images/icons.png") no-repeat 100% -100px; line-height: 20px; }

p.more a:hover {color: #333; text-decoration: none;}

.post img.attachment-post-thumbnail {float: left; margin: 10px 10px 10px 0;}



/* comments

------------------------------------------ */

.comments {clear: both;}

ul.commentlist {margin: 1em 0;}

ul.commentlist li {overflow: hidden; margin: 0.5em 0; padding: 10px 20px; border: 1px solid #e6e6e6; background: #fff;}

ul.commentlist li.odd {background: #fafafa;}

ul.commentlist li li {clear: both; margin-left: 20px;}

ul.commentlist ul {clear: both;}

img.avatar {float: left; margin: 0 10px 0 0; padding: 2px; border: 1px solid #e6e6e6; background: #fff;}

.reply {float: right; overflow: hidden; }

.reply a {float: right; padding-left: 20px; background: url("images/icons.png") 0 -64px no-repeat;}

ul.commentlist li .comment-body ul {margin: 1em 0; list-style: disc;}

ul.commentlist li .comment-body ol {margin: 1em 0; list-style: decimal;}

ul.commentlist li .comment-body li {overflow: visible; margin: 0 0 0 20px; padding: 0; border: none; background: transparent;}



/* misc

------------------------------------------ */

.clear {height: 0; clear: both; overflow: hidden;}

.alignleft {float: left; margin: 5px 20px 5px 0; padding: 0; }

.alignright {float: right; margin: 5px 0 5px 20px; padding: 0; }

.aligncenter {display: block; margin: 1em auto; text-align: center;}

.wp-caption-text {margin: 0.5em 0; color: #969696; font-size: 0.917em;}

.nocomments {clear: both; color: #666;}

img.size-thumbnail {margin: 5px;}

a.post-edit-link {font-size: 0.5em;}

img {margin: 0; max-width: 640px; height: auto;}

embed {max-width: 650px;}

.wp-caption img, .wp-caption embed {max-width: 620px;}



.gallery {overflow: hidden; padding: 1.5em 0;}

.gallery dl {text-align: center;}

.gallery dl dt {float: none; width: auto;}

.gallery dl dd {clear: left; width: auto; margin: 0; text-align: center;}

.gallery a img, .gallery a img[class] {padding: 2px; border: 1px solid #e6e6e6; background: transparent;}

[id*="gallery"] img {border: 1px solid #e6e6e6;}



.wp-caption {max-width: 620px;}

.wp-caption, .gallery-caption {padding: 5px; border: 1px solid #ddd; background: #fafafa; text-align: center;}



p.pagination {clear: both; overflow: hidden;}

p.pagination a {background: url("images/icons.png") no-repeat; font-weight: bold;}

p.pagination a:hover {color: #000; text-decoration: none;}

p.pagination .prev a {float: left; height: 20px; padding: 0 0 0 25px; background-position: 0 -120px; line-height: 20px;}

p.pagination .next a {float: right; height: 20px; padding: 0 25px 0 0; background-position: 100% -100px; line-height: 20px;}

p.pages {clear: both;}



p label {display: inline; margin-bottom: 0;}

p.comment-form-comment label, p.comment-form-url label, p.comment-form-email label, p.comment-form-author label {display: block; float: left;}

.main h3, .main h2 {clear: both;}

.searchform button {width: 27px; background: transparent url("images/search-button.png"); padding: 0;}



.sticky {padding-left: 5px; border-left: 3px solid #e6e6e6;}

.gallery-caption {position: static;}

.bypostauthor {position: static;}

这是我为它输入的html：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Ankur Kaushal</title>
<link href="black-with-orange/style.css" rel="stylesheet" type="text/css" />
</head>
<div class="header">
<div>
<p class="title"> 
Another Blog | <a href="http://www.google.ca">ankur</a>
</div>
</p>
</div>

<div class="nav">
<div>
<ul class="menu">
<li> About me </li>
<li> Contact me </li>
</ul>
</div>
</div>

<body>


</body>
</html>

我有两个问题，在两种情况下.header p.title的背景标记和.nav的背景标记都不起作用。我犯了什么错误吗？

Answer 1

您已将背景颜色设为白色（#fff）。因此，您可以将其更改为其他颜色，以获得结果：

body {background: #000; color: #444; font: 0.75em/1.5 "Arial", "Helvetica", sans-serif; }

[class] {list-style: none; padding: 0}

检查它......你会得到一个黑色。

Answer 2

可能是你的问题是：

<div class="header">
<div>
<p class="title"> 
Another Blog | <a href="http://www.google.ca">ankur</a>
</div>
</p>
</div>

你必须这样写：

<div class="header">
  <div>
    <p class="title"> 
    Another Blog | <a href="http://www.google.ca">ankur</a>
    </p>
 </div>
</div>

关闭DIV's＆amp;永远不会放block element inside <p> tag

Answer 3

渲染有什么问题？你得到背景颜色还是没有显示的背景图片？

Answer 4

• 您的div必须位于<body>标记内。
• 您的标头div未正确嵌套。 </div>追踪</p>

修改：已更新jsfiddle - 如果您向height添加float:left;或.nav，您将看到背景颜色。这是因为你已经浮动了.nav ul.menu>li。