Question

为什么这样做：

 <div style="background-color: #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #000;
    padding: 10px;">testing 10,9,8,7
</div>

这不是吗？

<div style="roundedCornerBox">
    testing 10,9,8,7
</div>

我在哪里创建了一个css文件：

body {
  background-color: #FFFFFF;
  text-align: center;
}

roundedCornerBox {
   background-color: #ccc;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border: 1px solid #000;
   padding: 10px;
}

这是我的HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title></title>
     <link rel="stylesheet" href="lib/css/style.css" />      
</head>

<body>
<div style="roundedCornerBox">
    testing 10,9,8,7
</div>

<div style="background-color: #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #000;
    padding: 10px;">
        testing 10,9,8,7
 </div>
 </body>
 </html>

Answer 1

你确定你不是这个意思：

<div class="roundedCornerBox">
    testing 10,9,8,7
</div>

和

.roundedCornerBox {
   background-color: #ccc;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border: 1px solid #000;
   padding: 10px;
}

您需要使用点来标识css类，并使用该css类将类名放在dom元素的class属性中。

Answer 2

课程以点开头！

.roundedCornerBox {
   background-color: #ccc;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border: 1px solid #000;
   padding: 10px;
}

<div class="roundedCornerBox">

没有圆点，它正在寻找一个<roundedCornerBox />元素来设计样式。 style=也需要class=。

Answer 3

您需要标记中的class="roundedCornerBox"和CSS中的.roundedCornerBox。

Answer 4

第二个示例中的div标记不正确。它可能是

<div id="roundedCornerBox">
    testing 10,9,8,7
</div>

和

#roundedCornerBox {
   background-color: #ccc;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border: 1px solid #000;
   padding: 10px;
}

CSS，为什么一件事有效而另一件事无效？

4 个答案: