为什么我的CSS不会在这里工作

时间:2014-06-05 10:12:05

标签: html css

代码不会工作你可以帮助我或者告诉我为什么它不能设计我的html风格。     我尝试了一切。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
 <title>twitter</title>
  <style>
 body  background-color: #bbbbbb; 
   #content
{ border: 1px solid #bbbbbb; width: 80%; background-color: #ffffff; padding: 20px margin: 0 auto; }
 #site_name { border-bottom: 3px soild #bbbbbb; padding-bottom:20px; } 
 footer { text-align:center; }
  </style>
</head>

<body> <br />
<br />
<div id="content"> 
<h1 id="site_name">tweet me</h1>
 <footer> <h6>All rights reserved</h6> 
 </footer> </div>
</body>
</html>

3 个答案:

答案 0 :(得分:4)

 <style>
   background-color: #bbbbbb; 
   ...

您已在选择器外定义了一个属性。您应该将此属性包含在规则中。 可能这会导致剩余规则的解析错误,因此不应用样式。如果您使用验证器,则可以检测到此类问题。

也在这里

border-bottom: 3px soild #bbbbbb;

您错误输入solid

答案 1 :(得分:2)

更正:

  • body background-color: #bbbbbb;已更改为body {background-color: #bbbbbb; }
  • padding: 20px margin: 0 auto;错过了中间的半结肠。已更改为padding: 20px; margin: 0 auto;
  • 而不是footer { text-align:center; },H6标记的中心对齐方式为h6 { text-align:center; }

检查此工作代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>twitter</title>
 <style>
  body {background-color: #bbbbbb; }
   #content
    { 
       border: 1px solid #bbbbbb;
       width: 80%;
       background-color: #ffffff;
       padding: 20px;
       margin: 0px auto;
    }
    #site_name 
    { 
       border-bottom: 3px solid #bbbbbb;
       padding-bottom:20px;
    } 
 h6 { text-align:center; }
  </style>
</head>

<body> 
<br />
<br />
<div id="content"> 
<h1 id="site_name">tweet me</h1>
 <footer> <h6>All rights reserved</h6> 
 </footer> </div>
</body>
</html>

答案 2 :(得分:-1)

   #content
    { 
       border: 1px solid #bbbbbb;
       width: 80%;
       background-color: #ffffff;
       padding: 20px;
       margin: 0px auto;
    }
    #site_name 
    { 
       border-bottom: 3px solid #bbbbbb;
       padding-bottom:20px;
    } 
 h6 { text-align:center; }

在你的css中添加上面的代码 并希望它会对你有所帮助