网页部分背景颜色无法正常显示;一些文本/链接与白色背景

时间：2014-12-12 07:45:14

标签： html css background-color

我很抱歉，但我对网络开发并不陌生，而且我已经把我的头发拉出来并且没有工作完成我的决赛，这些决定将在几天后完成。

出于某种原因，当我将部分的背景颜色更改为浅粉色时，所有链接，字符实体，粗体/斜体等文本都显示为白色，就像一个奇怪的文本框。导航列表也存在问题，即使我给他们单独的ID。我再次为我的CSS道歉;也很难理解某些部分。

予。已经在网上搜索了几个小时，但还没有找到解决方案。如果可以，请帮忙，

谢谢。 ！[

/* Default styles */

* {
background-color: white;
text-decoration: none;
font-family: Palatino Linotype, Book Antiqua, palatino, serif;
}

img {
border: 3px inset rgb(255, 105, 153);
}

h3 {
letter-spacing: 0.2em;
}

a {
color: rgb(255, 103, 153);
}

/* Display structural elements as blocks */

body, section, nav, #brownienav, #cakenav, #cookienav, footer, aside,  header{
display: block;
}

/* Styles for the body */

body {
margin-left: auto;
margin-left: auto;
line-height: 1.5em;
margin: 0px auto;
padding: 0px;
width: 98%;
min-width: 950px;
max-width: 1300px;
}

/* Styles for the header */

header {
text-align: center;
border-bottom: 3px solid rgb(255, 105, 153);
margin: 0px;
}

/* Styles for the navigation */

nav {
display: block;
font-size: 80%;
font-weight: bold;
background-color: rgb(255, 204, 204);
}

nav ul {
list-style-type: none;
float: left;
width: 10%;
border: 3px double black;
}

nav ul li a {
color: black;
background-color: rgb(255, 204, 204);
}

nav ul li a:hover {
color: rgb(255, 105, 153);
}

#brownienav a{
font-weight: bold;
background-color: rgb(255, 204, 204);
}

#cakenav a { 
font-size: 95%;
font-weight: bold;
background-color: rgb(255, 204, 204);
}

#cookienav a{
font-size: 97%;
font-weight: bold;
background-color: rgb(255, 204, 204);
}

/* Styles for the section */

section {
display: block;
width: 45%;
margin-left: 10%;
padding: 20px;
float: left;
border: 3px double black;
background-color: rgb(255, 204, 204);
}

section article, p, h2, h3, h4, ul, li, ol, li{
background-color: rgb(255, 204, 204);
}

article p {
background-color: rgb(255, 204, 204);
}

/* Styles for the headings */

h1, h2, h3, h4 {
margin-top: 20px;
margin-right: 40px;
margin-bottom: 20px;
margin-left: 10px;
}

/* Styles for the aside */

aside  {
float: right;
}

aside img {
border: 3px inset rgb(255, 105, 153);
}

aside h1 {
letter-spacing: 0.2em;
text-align: center;
}

figcaption {
font-size: 80%;
}

/* Styles for the table */

table.links {
border: 5px outset rgb(255, 105, 153);
border-collapse: collapse;
font-size: 0.85em;
text-align: center;
caption-side: top;
width: 100%;
height: 100%;
margin-bottom: 100px;
}

table.links th, table.links td {
border: 1px solid black;
}

table.links th {
color: white;
background-color: black;
width: 1%;
}

table.links td {
font-size: 1em;
width: 1%;
height: 20px;
padding-bottom: 15px;
padding-top: 15px;
}

/* Styles for the footer */

footer {
margin: 0px auto;
}

footer address {
background-color: black;
color: white;
text-align: center;
clear: both;
font-weight: normal;
}
<! doctype html>
<html>
<head>
     <meta charset="UTF-8" />
     <meta name="author" content="Lina Crawford" />
	 <meta name="description" content="Baking with a Hawaiian touch" />
	 <meta name="keywords" content="baking, hobbies, hawaiian, exotic treats" />
	 <title>Immaculate Sweets</title>
     <script src="modernizr-1.5.js"></script>
	 <link href="isweets.css" rel="stylesheet" type="text/css" />
   </head>
   
   <body>
	  
  <header>
  <!-- Image map that serves as a horizontal navigation list.
  -->
	  <img src="islogo.jpg" alt="Immaculate Sweets Logo" usemap="#imagemap" />
		 <map name="imagemap">
		<area shape="rect" coords="34,141,108,160"
		href="isweets.htm" alt="Home" />
		<area shape="rect" coords="129,139,262,161"
		href="brownies.htm" alt="Brownie Recipes" />
		<area shape="rect" coords="289,137,462,163"
		href="cakes.htm" alt="Cake & Cupcake Recipes" />
		<area shape="rect" coords="502,139,611,160"
		href="cookies.htm" alt="Cookie Recipes" />
        <area shape="rect" coords="637,140,740,160"
        href="tips.htm" alt="Baking Tips" />
        <area shape="circle" coords="692,73,59"
		href="isweets.htm" alt="Home" />
	    </map>
  </header>
  <nav>
  <!-- Vertical navigation list with rollover. Also displays the "links" page.
  -->
  <ul>
	<li><a href="isweets.htm">Home</a></li>
	<li><a href="brownies.htm">Brownie Recipes</a></li>
	<li><a href="cakes.htm">Cake & Cupcake Recipes</a></li>
	<li><a href="cookies.htm">Cookie Recipes</a></li>
	<li><a href="links.htm">Links</a></li>
	<li><a href="tips.htm">Tips</a></li>
  </ul>
  </nav>
   
  <section> 
  <article>
    <h2>Hello and welcome to Immaculate Sweets!</h2>
	<p>
      This is my first Web site, so I decided to dedicate to my hobby of baking (just for fun).
      Here you will find recipes of some of my most "popular" treats that I enjoy baking for others.
      Although I am only adding the most basic, simple recipes for now, you will notice that I add a  
      few touches to enhance the taste of many of my desserts! I strongly believe in putting a lot of
	  <strong>love</strong> into my baking...
     </p>
	  
     <p>
      Please feel free to try out any of these recipes or modify them if needed. Please <a href="mailto:pleilani_c@yahoo.com?subject=ImmaculateSweets%20Message">contact me</a> if 
	  you have any questions or comments.
	 </p>
	 <p>Thank you for visiting!<p>
	  <p>&mdash; Lina</p>
    </article>
  </section>
  
  <aside>
  <!-- Aside that features the "featured recipe".
  -->
  <h1>Featured Recipe</h1>
  <figure>
  <a href="cakes.htm">
  <img src="sm_pineapplecoconut.png" alt="Coconut Cake">
  </a>
  <figcaption>Special Hawaiian Pineapple-Coconut Cake</figcaption>
  </figure>
  </aside>
  
   <footer>
   <address> 
   Immaculate Sweets, by Lina C. 2014
   </address>
   </footer>
   
   </body>
   
  </html>

][1]

1 个答案:

答案 0 :(得分：0)

你给了一切

background-color: white;
像这样：

*{
 background-color: white;
}

删除星星并仅添加背景颜色：白色;你真正想要的元素是这样的：

body, section, footer{ //so not to your link tags or header tags.
 background-color: white;
}

这应该可以解决您的问题： - ）

JSfiddle example here

相关问题
最新问题