个人中心
gpt4 book ai didi

html - 网页部分背景色显示不正确；一些带有白色背景的文本/链接

转载 作者：行者123 更新时间：2023-11-28 08:49:20 29 4
gpt4 key购买 nike

我很抱歉，但我对 Web 开发还很陌生，而且我一直在竭尽全力并要求停止工作以完成几天后到期的期末考试。

出于某种原因，当我将部分的背景颜色更改为浅粉色时，所有链接、字符实体、粗体/斜体等文本显示为白色，就像一个奇怪的文本框。导航列表也有问题，即使我给了它们单独的 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]

最佳答案

你给了一切

background-color: white;

像这样:

*{
 background-color: white;
}

去掉星号，只添加背景色:白色；你真正想要的元素是这样的:

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

这应该可以解决您的问题:-)

JSfiddle example here

关于html - 网页部分背景色显示不正确；一些带有白色背景的文本/链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27439028/

29 4 0
文章推荐： css - 如何在我的案例中创建淡入淡出动画
文章推荐： css - `resource://gre/res/html.css` 从哪里来？
文章推荐： jquery - 是否可以将 div 固定在 X 轴上，但在 Y 轴上滚动？
文章推荐： javascript - 垂直对齐和具有动态内容和高度的元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com