我页面的每个元素都表现为我的最后一个按钮所持有的链接

时间:2018-03-11 19:11:44

标签: html css button hyperlink

我正在处理投资组合,一切都很好,除了每个文本元素都表现为我最后一个按钮中的链接。对于所有其他内容页面也是如此,并且在其他区域中也适用于图像和文本。这是页面的html:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles/styles2.css">
<link href="https://fonts.googleapis.com/css?family=Timmana" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<div class="wrapper">
     <button class="btn photo"><a href="http://students.purchase.edu/MEGAN.STACEY/advanced/photo.html">Photo</button>
<button class="btn video"><a href="http://students.purchase.edu/MEGAN.STACEY/advanced/video.html">Video</button>
<button class="btn audio"><a href="http://students.purchase.edu/MEGAN.STACEY/advanced/audio.html">Audio</button>
<button class="btn design"><a href="http://students.purchase.edu/MEGAN.STACEY/advanced/design.html">Design</button>
<button class="btn essays"><a href="http://students.purchase.edu/MEGAN.STACEY/advanced/essays.html">Essays</button>
<button class="btn other"><a href="http://students.purchase.edu/MEGAN.STACEY/advanced/other.html">Other</button>
<button class="btn about"><a href="http://students.purchase.edu/MEGAN.STACEY/advanced/about.html">About</button>
<p>
    <iframe src="https://player.vimeo.com/video/257547177" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </p>
    <p>Wait, Wait, Wait: A response to the Disruption prompt in Video Art 1</p>
    <p> Conception, Direction, Filming, Editing by Megan Stacey. Performers include Calliope Pinaparker and Autumn Blazon-Brown.</p>
<iframe src="https://player.vimeo.com/video/254261488" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>Two Truths and a Lie: A response to the Questionarre prompt in Video Art 1
</p>
<p>Conception, Writing, Direction, Editing, and Performance by Megan Stacey. Filming and Additional Editing by Jewel Slade.</p>
<p>
    <iframe src="https://player.vimeo.com/video/259502039" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>Performance Compilation 1: A series of experiments in solo performance, video, and audio</p>
<p>Conceptualized, performed, and edited by Megan Stacey</p>
</p>
<p><iframe src="https://player.vimeo.com/video/251061619" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></p>
<p>
<p>
    Your Hair Got In My Eye Fuck Off: A Collaboration with the Theatrical Company, the Dream Factory
</p>
<p> Conception, Filming, and Editing by Megan Stacey. Music: "The Philosopher" by John Cale. 
</p> <p> Performers include Autumn Blazon Brown, Harmony Fiori, Adam Browne, and Romey Drabek</p>

</div>
</div>

</body>
</html>

这是我引用的样式表,如果这可能是个问题:

.wrapper {

    text-align: center;
  margin: auto;
}

p {
    color: black;
    font-family: 'Oswald', sans-serif;
}

a:link {

    color: black;
    text-decoration: none;
}

a:visited {

    color: black;
    text-decoration: none;
}

a:hover {
    color: white;
    text-decoration: none;
}

a:active {

    color: white;
    text-decoration: none;
}

.btn {
    border: none;
    background-color: inherit;
    padding: 10px 10px;
    font-size: 30px;
    cursor: pointer;
    display: inline-block;
    transition-duration: 1s;
    font-family: 'Timmana', sans-serif;
}

/* Green */
.photo {
    color: black;
}

.photo:hover {
    background-color: #ff0000;
    color: white;
}

/* Blue */
.video {
    color: black;
}

.video:hover {
    background: #e60000;
    color: white;
}

/* Orange */
.audio {
    color: black;
}

.audio:hover {
    background: #cc0000;
    color: white;
}

/* Red */
.design {
    color: black;
}

.design:hover {
    background: #b30000;
    color: white;
}

/* Gray */
.essays {
    color: black;
}

.essays:hover {
    background: #990000;
    color: white;
}

.other {
    color: black;
}

.other:hover {
    background: #800000;
    color: white;
}

.about {
    color: black;
}

.about:hover {
    background: #660000;
    color: white;

2 个答案:

答案 0 :(得分:0)

那是因为你还没有关闭任何锚标签

答案 1 :(得分:-1)

哇!!! 你Froget关闭所有锚标签.Anchor标签应该用作

{{1}}