Question

我目前有CSS问题，我希望有人可以帮助我，因为我是一个非常初学者。我试图在另一个图像上叠加和成像。

当我使用内联代码时，它可以正常工作，例如：

http://imageshack.us/photo/my-images/440/screenshot7cx.jpg/

    <div class="one_half">
    <div id="square_icon" style="position: absolute; top: 12%; left: 36%;"><img src="img/square_icon.png" width="77" height="76" /></div>
    <img src="img/square.jpg" width="412" height="145" />
    </div>

但是，如果我尝试在我的CSS文件中插入，则无法正常工作。

http://imageshack.us/photo/my-images/577/screenshot8gvh.jpg/

    <style>
    #square_icon { position: absolute; top: 12%; left: 36%; };
    </style>

为什么我在CSS文件中包含它时不起作用？再次，我很抱歉，我非常业余，但我希望有人能帮助我理解这个问题。

非常感谢，帕特里克

Answer 1

您的CSS文件中不需要<style>个标记。

您还应该从班级末尾删除分号（;）

删除它们，只要CSS正确链接到HTML文件，这应该可以正常工作。

<head>     
    <link rel="Stylesheet" href="/Style/stylesheet.css" type="text/css" />    
</head>

如果我误解了，你的CSS样式实际上在<head>标签中，如：

<head>
    <style>
        #square_icon { position: absolute; top: 12%; left: 36%; }
    </style>
</head>

然后尝试将其更改为：

<head>
    <style type="text/css">
        #square_icon { position: absolute; top: 12%; left: 36%; }
    </style>
</head>

注意我已将type="text/css"添加到您的<style>代码中。

Answer 2

如果你想用id设置div的样式，你应该给它一个ID：

<div class="one_half">
    <div id="square_icon" style="position: absolute; top: 12%; left: 36%;"><img src="img/square_icon.png" width="77" height="76" /></div>
    <img src="img/square.jpg" width="412" height="145" />
</div>

而不是班级

相应的样式：

<style>
    #square_icon { 
      position: absolute;
      top: 12%;
      left: 36%; 
    }//there is no ';' here
</style>

你也犯了如上所述的错误。

CSS ID无法正常工作/初学者问题

2 个答案: