Question

我真的很想使用HTML和CSS而我正在尝试创建一个矩形框 -

<html>
<head>
<link rel="stylesheet" type="text/css" href="style2.css" /> 
<link rel="stylesheet" type="text/css" href="stylesAgg.css" />
</head>
<body>
<h1>Testing the class page</h1>

<ul>
{% for book in books %}
    <div id ="bookInfo" style = "display">
        <div>
            <text class= "text" id = "bookTitle">{{ book.title|safe }}</text></br>
            <text class= "text" id= "bookAuthor">by {{ book.author|safe }}</text></br>
        </div>
    </div>


{% endfor %}
</ul>

</body> 

</html>

我的css代码在这里 -

#bookInfo {
    float:right;
    width:700px;
    height:300px;
    background-color:#dd2424;
    padding-left:12px;
    padding-top:17px;
}

为什么我的html页面不显示彩色矩形？

谢谢！

编辑 - 我已经包含了下面的所有建议但它仍然不起作用 - 但是，当我通过firebug查看页面时，它表示没有规则（尽管事实上我有样式表，但仍有404错误） - 我认为这是问题 - 我该如何解决？

Answer 1

在HTML页面中，ID应该是唯一的。要使用类似规则格式化页面上的多个元素，请使用class属性。尝试将id上的div属性更改为class。同时将#bookInfo的CSS更改为.bookInfo。

此外，<ul>启动无序列表。直接在其中允许的唯一标记类型是<li>，它在该列表中创建一个条目。这里不允许<div>。您可以将<div>更改为<li>，也可以完全删除<ul>，具体取决于您的实际语义需求。

另一个错误用法是您的</br>代码。如果标记以</开头，则它被视为结束标记，而不是<br/>，这是一个空标记，可能就是您在这里所说的。

作为样式的最终建议，你应该坚持所有较低的类和ID。它使调试更容易，看起来更好。

Answer 2

您的代码中几乎没有错误。

元素的id属性在整个html页面中必须是唯一的。我认为会有更多的书而不是一本书。我建议你使用attibute class="bookInfo"而不是id。相应的css选择器可以是：.bookInfo {}（注意开头的点）
此处样式属性的值：<div id ="bookInfo" style = "display">无效。如果要设置css display属性，则应为其指定一些值。否则，您应该删除整个属性。
您缺少<li>的{{1}}元素。

正确的HTML代码应如下所示：

<ul>

和css：

<html>
<head>
<link rel="stylesheet" type="text/css" href="style2.css" /> 
<link rel="stylesheet" type="text/css" href="stylesAgg.css" />
</head>
<body>
<h1>Testing the class page</h1>

<ul>
{% for book in books %}
  <li>
    <div class ="bookInfo">
        <div>
            <text class= "text" id = "bookTitle">{{ book.title|safe }}</text></br>
            <text class= "text" id= "bookAuthor">by {{ book.author|safe }}</text></br>
        </div>
    </div>
  </li>

{% endfor %}
</ul>

</body> 

</html>

另外请确保该css文件确实已加载页面。我建议使用Firebug（Firefox扩展）或Chrome开发工具......右键单击页面上的任意位置 - 检查元素。非常有帮助。

CSS颜色不显示

2 个答案: