Question

我正在创建一个简单的网站，我在div中的html中写的内容正在显示但CSS没有影响它。（例如，没有彩色框出现。）

这是html

<div id=“hello”>hello</div>

这是css

#hello {
background:#ccc;
width:200px;
height:200px;
}

这是完整的代码

    <!DOCTYPE html>
<html>
<head>
<title>Title</title>
     <meta charset="UTF-8">
     <title>Website</title>
  <meta name="author" content="WebDev">
     <link href="example.css" rel="stylesheet" type="text/css" />
  <style>

  html { 
 font-family: "Open Sans";
    font-size: 24px;
    font-style: light;
    font-variant: normal;
    font-weight: 500;
    line-height: 26.4px;
}
}
body { 
 background:#Fff; margin:0 ;
}
#container { 
 width:1300px; 
 margin:0 auto; 
 background:#iff; 
}

#header { 
 width:100%; 
 height:170px; 
 background:#Fff;
 }

#logo { 
 float:left; 
 width:400px; 
 height:40px; 
 margin:30px; 
 background:#Fff;
 color: #000;
 font-size: 40px;
 line-height:38px; 
}
span1 { font-size: 30px;
        line-height: 18px;


}
#navbar { 
 height:40px; 
 clear:both; 
 background: #Fff;
}
#navbar ul { 
 margin:10px; 
 padding:1px; 
 list-style-type:none;
 line-height: 40px; 
}
#navbar ul li { 
 padding:px; 
 float:right ; 
 margin-top:20px;
}
#navbar ul li a { 
 font-size:24px; 
 float:right ; 
 float:right ;
 padding:0 0 0 20px; 
 display:block;
 text-decoration:none;
 font-weight:100;
 color:#000;
}


#banner { 
 background-image: url(pics/babypic.png);
 background-repeat: no-repeat;
 background-size:100%;
 height:445px; 
 padding:20px;
 clear: both;
}


#left_col { 
 float:left; 
 width:819px; 
 padding:20px; 
 height:600px; 
 color:#000; 
 background:#F0F8FF;
 font-size:20px;
}
h1 {
 font-size:35px;
 text-align:center;
 font-weight:300;
 margin-top:50px;
}
p {
 font-size:25px;
 font-weight: 200;
 margin-right:75px;
 margin-left:90px;
 line-height:40px;
 margin-top:50px;
}


#right_col { 
 float:right; 
 width:400px; 
 height:600px;  
 color:#000; 
 background:#F0F8FF; 
 padding:20px; 
}
h2 {
 font-size:35px;
 text-align:right;
 font-weight:400;
 margin-right:75px;
}
h3 {
 font-size:25px;
 font-weight: 200;
 margin-right:70px;
 margin-left:50px;
 line-height:40px;
 margin-top:30px;
 text-align:right;
}
#hello {
   height: 200px;
   width: 200px;
   background-color:#ccc;
}
#footer { 
 height:450px;
 background:#F0F8FF;
 float:bottom;
 clear:both;
 font-weight:100;
 font-size:25px;
} 
h5 {
 font-weight:100;
 font-size:25px;
 margin-left:250px;
 margin-right:250px;
 line-height:40px;
}
#footer ul1 {
 margin-left:400px;
 list-style:none;
 width:40%;
 display:block;
}


h4 {
 text-align:center;
 margin: 70px;
 font-weight:;
}

#end {
 height:200px;
}

  </style>
</head>
<body>
<!-- container -->
 <div id="container">
 <!--  header -->
 <div id="header">
  <div id="logo">
James Brewer, M.D. <span1> santa barbara pediatrician </span1>
</div>
  <div id="navbar">
   <ul>
    <li><a href="#">contact </a></li>
    <li><a href="#">gallery &nbsp;|</a></li>
    <li><a href="#">fees & insurance &nbsp;|</a></li>
   <li><a href="#">hours & location&nbsp; |</a></li>
    <li><a href="#">services &nbsp;|</a></li>
    <li><a href="#">about &nbsp; |</a></li>
   </ul>
   </div>
  </div>
  <!-- content area -->
  <div id="content_area">
   <div id="banner"></div>
   <div id="left_col">
<h1>
What People Are Saying
</h1>
<p>
“Thank you so much for your kindness and support. We sincerely appreciate your assistance and professional courtesy” —C.S
</p>
<p>
“He is very understanding, explaining things very well and has patience with kids. I highly recommend him. —C.G
</p>
<p>
“Thank you so much for your guidance and wisdom.” —K.R
</p>
</div>
   <div id="right_col">
<h2>
Call Us Today!   
</h2>
<h3>
set up an appointment 
<p2>  1-805-563-0167
</p2>
</h3>
<div id=“hello”>hello</div>
  </div>
 <!-- blurb area -->
 <!-- footer -->
  <div id="footer">

<h5>
Dr. Brewer has been practicing pediatrics in Santa Barbara since 2002. 
The office is a solo practice–patients always see Dr. Brewer. <p>
The practice offers:</p>
</h5>
<ul1>
<li>•newborn hospital care</li>
<li>•well child care</li>
<li>•school, camp and sports physicals</li>
<li>•acute sick visits</li>
<li>•immunizations </li>
<li>•lab testing</li>
<li>•developmental or behavioral concerns</li>
</ul1>
</div>
</div>
 <div id=end>
<h4>
<p>2421 Bath Street, Suite A
</p><p>
Call for an appointment today 
1-805-563-0167 
</p>
</h4>
</div>
 </div><!-- end container -->
</body>
</html>

Answer 1

你的div中只有一个小错误：如果仔细查看“hello”周围的引号和HTML文件中的其他引号，它们就不是同一种引号！< / p>

在Firefox调试工具(image)中，您可以看到这会导致浏览器错误地解释div的类。

bytes

VS

<div id=“hello”>hello</div>

这是HTML修复后的样子！（只是使引号不同）

final_image

（免责声明：我刚刚在网站上注册，因此我的声誉不足以创建实时图片：P，对不起）

Answer 2

您在“hello”周围使用的双引号与HTML中的其他位置不同。

如果您重新键入这些双引号，它将起作用。

以下是引号与浏览器的关系。 1）显示代码编辑器中“hello”的显示方式，但2）和3）显示浏览器看到的内容。注意额外的一对“？Tricky！

问题的DEMO

#hello {
  height: 200px;
  width: 200px;
  background-color: #ccc;
}

<h3>BAD HELLO</h3>
<div id=“hello”>hello</div>

<h3>GOOD HELLO</h3>
<div id="hello">hello</div>

Answer 3

尝试给它宽度和高度..

    div {
    height: 200px;
    width: 200px;
    background-color:blue;
}

Answer 4

确保将HTML文件链接到CSS文件。您可以通过在HTML文件的顶部添加link标记来实现这一点，如下所示：

<link type="text/css" rel="stylesheet" href="style.css" />

style.css的位置，您应该编写CSS文件的路径。

为什么我的CSS不会改变我的div？

4 个答案: