Question

所以我试图建立一个有两个不同链接的网站 - 然而，我编辑它们的CSS将它们识别为＆＃34; a＆＃34;并把它们放在同一个地方。这是令人痛苦的，我已经尝试将css从他们的基础上移开，但这似乎并没有起作用。这是我的代码：

<html>

<h1>
<div id = "firstbutton">
<a href="http://google.com">GOOGLE</a>

    <style type="text/css">
        a {
            color: rgb(255,255,255);
            font-size: 60;
            font-family: Arial;
            text-decoration: none;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -85px;
            margin-left: -145px;
        }
    </style>
    </div>



    <div id = "forumbutton">
        <a href="http://www.google.com">Forum</a>
        <style type="text/css">
         a{
            color: rgb(255,255,255);
            font-size: 30;
            font-family: Calibri;
            position: fixed;
            text-decoration: none;
            top: 50%;
            left: 50%;
            margin-top: 260px;
            margin-left: -45px;
        }
    </style>
    </div>

</h1>




<body>


    <audio src="goingdown.mp3" autoplay></audio>

    <style type="text/css">
   body {

    background-image: url('spacewallpaper.jpg');

}
    </style>

</body>
</html>

Answer 1

这是课程派上用场的地方。您应该为每个a添加一个类属性，并使用该类定义您的CSS。或者您可以使用ID。

样式可以被多个样式块或声明覆盖。它不适用最近的标签。

Answer 2

为每个 a 元素设置ID

然后css应该是这样的：

a#name1{ ... }
a#name2{ ... }

Answer 3

这是您的固定代码 JS Fiddle - Working

 .GClass a {
            color: rgb(255,255,255);
            font-size: 60;
            font-family: Arial;
            text-decoration: none;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -85px;
            margin-left: -145px;
        }
.FClass  a{
            color: rgb(255,255,255);
            font-size: 30;
            font-family: Calibri;
            position: fixed;
            text-decoration: none;
            top: 50%;
            left: 50%;
            margin-top: 260px;
            margin-left: -45px;
        }


<html>

<h1>
<div id = "firstbutton">
<a href="http://google.com" class="GClass">GOOGLE</a>

    </div>



    <div id = "forumbutton">
        <a href="http://www.google.com" class="FClass">Forum</a>

    </div>

</h1>




<body>


    <audio src="goingdown.mp3" autoplay></audio>

    <style type="text/css">
   body {

    background-image: url('spacewallpaper.jpg');

}
    </style>

</body>
</html>

Answer 4

您应该为要添加（实现）的每个元素设置 ID ，然后您可以在 CSS 中轻松调用该元素。

元素div也不能嵌套在元素h1内！

font-size应标记为像素。示例font-size: 30px;。

Answer 5

您的文档结构略有分散......

最好将所有样式放在头部而不是散布在身体部分

<html>

  <head>
    <style type="text/css">
    body
    {
      background-image: url('spacewallpaper.jpg');
    }
    a
    {
      color: #FFFFFF; 
      text-decoration: none;
      top: 50%;
      left: 50%;
    }
    .FirstLink
    {
      font-size: 60; 
      font-family: Arial; 
      position: fixed;
      margin-top: -85px;
      margin-left: -145px;
    }
    .SecondLink
    {
      font-size: 30;
      font-family: Calibri;
      position: fixed;
      margin-top: 260px;
      margin-left: -45px;
    }
    </style>
  </head>

  <body>
  <h1>
    <div id = "firstbutton">
      <a class="FirstLink" href="http://google.com">GOOGLE</a>
    </div>

    <div id = "forumbutton">
      <a class="SecondLink" href="http://www.google.com">Forum</a>
    </div>
  </h1>

  <audio src="goingdown.mp3" autoplay></audio>
  </body>
</html>

尝试上面的代码并将其与您自己的代码进行比较以供参考，以查看差异。祝你好运。

冲突的href链接？

5 个答案: