html - 制作一个带有内容的盒子，在 HTML 而不是 CSS 中工作，我做错了什么？

Question

几个小时以来，我一直在努力解决这个问题，所以我想我应该问问你们。

所以我有一个站点，如果我有一个包含一些内容的框:图像、文本...

这是它在 index.html 中的样子:

    <div id="aust-agder">
    <!-- agent address in the first region -->
    <p style="  background: #111;
                background: rgba(0,0,0,.8);
                color: #eee;
                position:absolute;
                z-index:95;
                top:500px;
                left:1050px;
                font: normal 20px 'Lucida Grande',Arial,sans-serif;
                padding: 0.6em 1.2em;
                text-shadow: 0 1px 0 #000;
                -moz-border-radius: 1.6em;
                -ms-border-radius: 1.6em;
                -o-border-radius: 1.6em;
                -webkit-border-radius: 1.6em;
                border-radius: .6em; ">
  Lillesand - Kjøreskole<br>
  Vi vil gratulere A4 Trafikkskole med Digital Skiltløsning<br>
  A4 Trafikkskole<br>
  A: <a href=http://g.co/maps/xybpd>Elvegata 2A, 4608 Kristiansand S</a><br>
  T: 38 02 56 00<br>
  E: <a href=mailto:post@a-4.no>post@a-4.no</a><br>
  Besøk hjemmesiden til <a href=http://www.a-4.no/>A4 Trafikkskole</a><br>

  <img src=images/test.jpg>
    </p>
  </div>

当我在 html 中有这个时，网站看起来像这样: http://iseeit.no/maptest/working/

如果我将它从 html 中删除并将其放入 css 文件中，如果我是正确的话，它看起来像这样:

.aust-agder{
    background: #111;
    background: rgba(0,0,0,.8);
    color: #eee;
    position:absolute;
    z-index:95;
    top:500px;
    left:1050px;
    font: normal 20px 'Lucida Grande',Arial,sans-serif;
    padding: 0.6em 1.2em;
    text-shadow: 0 1px 0 #000;
    -moz-border-radius: 1.6em;
    -ms-border-radius: 1.6em;
    -o-border-radius: 1.6em;
    -webkit-border-radius: 1.6em;
    border-radius: .6em; 
}

在 index.html 中:

    <div id="aust-agder">
    <!-- agent address in the first region -->
  Lillesand - Kjøreskole<br>
  Vi vil gratulere A4 Trafikkskole med Digital Skiltløsning<br>
  A4 Trafikkskole<br>
  A: <a href=http://g.co/maps/xybpd>Elvegata 2A, 4608 Kristiansand S</a><br>
  T: 38 02 56 00<br>
  E: <a href=mailto:post@a-4.no>post@a-4.no</a><br>
  Besøk hjemmesiden til <a href=http://www.a-4.no/>A4 Trafikkskole</a><br>

  <img src=images/test.jpg>
    </p>
  </div>

网站看起来像这样: http://iseeit.no/maptest/not/

我不是 CSS 专家，所以我可能做错了。

希望我把问题说清楚了，如果没有，请不要犹豫，也很抱歉我的英语不好:)

此外，我似乎无法删除带有文本装饰的链接颜色:无；有什么解决办法吗？

Answer 1

我希望您尝试将 css 应用于 DIV，因为您缺少 </p> 的起始标记在 index.html 中。在这种情况下，请在您的 css 名称前加上“#”而不是“.”。 .应该是这样的

    #aust-agder    {        background: #111;        background: rgba(0,0,0,.8);        color: #eee;        position:absolute;        z-index:95;        top:500px;        left:1050px;        font: normal 20px 'Lucida Grande',Arial,sans-serif;        padding: 0.6em 1.2em;        text-shadow: 0 1px 0 #000;        -moz-border-radius: 1.6em;        -ms-border-radius: 1.6em;        -o-border-radius: 1.6em;        -webkit-border-radius: 1.6em;        border-radius: .6em;     }