添加锚 '<a></a>' 我的标题使它dissapear

我原来的HTML代码看起来是这样的添加锚 '<a></a>' 我的标题使它dissapear

<!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); 
}

虽然之前我得到一个不错的大橙色纹理标题，现在我是ge取而代之的是带有几个白点的小区域。

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

来源

2017-03-08 mdemont

你的CSS规则的重复，而不是它是层叠样式一个巨大的问题，但请解决这个问题，并提供其他的CSS规则影响锚点等。 – snkv

@Sqnkov很好发现。一定是复制和粘贴错误。我纠正了这一点，但仍无济于事。 – mdemont

不要在之后放入''内的内容。 – claudios

你可以添加其他特定规则来进行锚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>

来源

2017-03-08 12:48:58

谢谢。原来，我对一般的锚有一个规则。颜色和文字装饰也有帮助！ – mdemont

注意：在浏览器的默认样式中，总是存在* a *标签及其不同状态的一般CSS规则。 – Johannes

试试这样说：

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

来源

2017-03-08 12:50:32

我已经尝试过了，查看后发现这是一个不太正确的做法。 https://stackoverflow.com/questions/5341451/what-should-come-first-in-html-an-anchor-or-a-header – mdemont

@mdemont这已经过时了。在HTML5中，'a'是一个块元素。 – str

添加锚 '<a></a>' 我的标题使它dissapear

回答

相关问题