Question

我原来的HTML代码看起来像这样

<!DOCTYPE html>
<head>  
    <title> MDMX Music </title>
    <link rel="stylesheet" href="css\style.css">
</head>
</body>
<div class = "container">

    <h1> MY HEADING </h1>

    <p>Website text</p>
</div>

我把它改成了

<!DOCTYPE html>
<head>  
    <title> MDMX Music </title>
    <link rel="stylesheet" href="css\style.css">
</head>
</body>
<div class = "container">

    <h1><a href = "index.html"> MY HEADING </a></h1>

    <p>Website text</p>
</div>

CSS看起来像这样：

h1 {
    font-family: "Courier New";
    font-size: 600%;
    color: darkorange;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    display: block;
    text-align: center;
    margin: 0;
    display: block;
    -webkit-mask-image: url(../images/rough-texture.png);
}

在我得到一个漂亮的大橙色纹理标题之前，现在我得到一个带有几个白点的小区域。

我似乎无法弄清楚可能导致这种情况的原因。

Answer 1

您可以在a锚点内为锚点h1添加另一条特定规则，如：

h1 a{
    color: darkorange;
    text-decoration: none;
}

希望这有帮助。

h1{
    font-family: "Courier New";
    font-size: 200%;
    color: darkorange;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    display: block;
    text-align: center;
    margin: 0;
    display: block;
    -webkit-mask-image: url("http://ghostlypixels.com/wp-content/uploads/2014/06/vector-line-texture.png");
}

h1 a{
    color: darkorange;
    text-decoration: none;
}

<!DOCTYPE html>
<head>  
    <title> MDMX Music </title>
</head>
</body>
<div class = "container">

    <h1> MY HEADING </h1>

    <p>Website text</p>
</div>
And I changed it to

<!DOCTYPE html>
<head>  
    <title> MDMX Music </title>
</head>
</body>
<div class = "container">

    <h1><a href = "index.html"> MY HEADING </a></h1>

    <p>Website text</p>
</div>

Answer 2

试试这样：

<a href = "index.html"><h1> MY HEADING</h1></a>

添加主播＆＃39; <a></a>＆＃39;我的标题让它消失了

2 个答案: