html - CSS样式未在浏览器中显示

Question

我正在为网站设计一个自定义表格。在 Dreamweaver 中，Design选项卡显示了我想要的内容，但在Live选项卡中没有边框和内容可见。我试图找到解决方案，我可能忽略了一些东西，但我还没有找到解决方案。我在这里发布代码：

CSS

#tableData{
    font-family:Verdana, Geneva, sans-serif;
    font-size:16px;
    color:#09F; 

    padding-bottom:25px;
    padding-top:10px;

    border-bottom:thin;
    border-bottom-color:#09F;


}        


table{
    width:600px;
    border: 1px solid #666;
}


li{
    list-style:none;
    height:22px;
    border-bottom:1px;
    border-bottom-color:#09F;
}


#tableHeading{
    font-family:Arial;
    font-size:32px;
    color:#666; 
    padding:10px;
    float:left;
    padding-right:500px;
    border-left:thick;
    border-right:thick;
    border-left-color:#09F;
    border-right-color:#09F;

}  

HTML

   <tr>
    <td id="tableData">
         <ul>
             <li>Android</li>
             <li>abced </li>
             <li>xyz</li>
         </ul>
   </td>
  </tr>

在设计视图中：

在实时视图（浏览器）中：

我究竟做错了什么？我该如何解决？

问候

Answer 1

代替

border-left:thick;
border-right:thick;
border-left-color:#09F;
border-right-color:#09F;

经过

border-left:thick solid #09F;
border-right:thick solid #09F;

Answer 2

将 CSS 更改为：-

#tableData{
    font-family:Verdana, Geneva, sans-serif;
    font-size:16px;
    color:#09F; 

    padding-bottom:25px;
    padding-top:10px;

    border-bottom-style:solid;/*Updated*/
    border-bottom-color:#09F;/*Updated*/

}

#tableHeading{
    font-family:Arial;
    font-size:32px;
    color:#666; 
    padding:10px;
    /*float:left;*/
    padding-right:500px;
    border-left: 5px solid #09F;
    border-right: 5px solid #09F;
}  

您需要提及完整的“ border-bottom-style ”和“ border-bottom-color ”

或者用这个代替“ border-bottom:1px solid #09F;”

请参考这个小提琴：http: //jsfiddle.net/aasthatuteja/gDkn6/

希望这会有所帮助！

Answer 3

您在 Dreamweaver 设计视图中看到的虚线边框是为了向您显示那里有一个元素，这确实不是您页面的一部分。

CSS 中的边框由 3 个主要组件组成：宽度、颜色和样式。style 属性是您错过的属性。

将边框样式更改为：

border-bottom-width: thin;
border-bottom-color: #09F;
border-bottom-style: solid;

您还可以使用边框底部的简写：

border-bottom: solid thin #09F;

此外，我建议您使用数值作为宽度，例如：1px这样您就可以确切地知道您得到了什么。