Html 如果我单击一个链接，所有链接都会更改_Html_Css_Hyperlink

Html 如果我单击一个链接，所有链接都会更改

html css hyperlink

Html 如果我单击一个链接，所有链接都会更改,html,css,hyperlink,Html,Css,Hyperlink,我是新来的，在网页设计方面也是如此。所以我知道的很少在我的网页设计实践中，我设置了5个导航链接，并使用css设置了它们的样式。这是我的CSS代码： body { background-color: #f9f9f9; margin: 0; border-top: 2px solid #020202; color: #1c1c1c; font-family: "arial", "Helvetica", sans-serif; } .clear { clear: both; } li {

我是新来的，在网页设计方面也是如此。所以我知道的很少

在我的网页设计实践中，我设置了5个导航链接，并使用css设置了它们的样式。这是我的CSS代码：

body {
background-color: #f9f9f9;
margin: 0;
border-top: 2px solid #020202;
color: #1c1c1c;
font-family: "arial", "Helvetica", sans-serif;
}

.clear {
    clear: both;
}

li {
    font-weight: bold;
    margin-top: 15px;
    list-style-type: none;
    float: left;
    margin-left: 60px;
    height: 20px;
    text-align: center;
}

.wrapper {
    width: 960px;
    margin: 0 auto;
}

nav {
    width: 960px;
    margin-top: 30px;
    float: right;
}


img {
    margin-right: 150px;
    width: 50px;
    float: right;
}

a {
    color: black;
}

a:visited {
    color: #15a02c;
}

a:hover {
    color: #97d586;
}


span {
    font-style: italic;
    color: #03da35;
}

h1 {
    font-size: 23px;
    margin-top: 80px;
    font-weight: bolder;
    margin-left: 5px;
}

#content img {
    width: 400px;
    float: left;
    margin-top: 50px;
}

h2 {
    font-weight: normal;
    font-size: 22px;
    margin-top: 10px
}

p {
    font-size: 13px;
    font-weight: bold;
    margin-top: 30px;   
}

footer img {
    width: 720px;
    height: 86px;
    margin-top: 100px;
    float: right;
}

#b_b {
    width: auto;
    height: 17px;
    background-color: black;
}

这是我的html：

    <!DOCTYPE HTML>

<html>
    <head>
        <title>Welcome to Example 1</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="stylesheet.css">
    </head>
    <body>
        <div class="wrapper">
            <nav>
                <ul>
                    <a href="#"><li>HOME</li></a>
                    <a href="#"><li>WORK</li></a>
                    <a href="#"><li>RESUME</li></a>
                    <a href="#"><li>FREELANCE</li></a>
                    <a href="#"><li>CONTACT</li></a>                
                </ul>
                    <a href="#"><img src="twitter.jpg" alt="follow me"></a>
            </nav>
                <div class="clear"></div>
        </div>

        <div class="wrapper">
            <div id="content">
                <h1>LOOKING FOR A FREELANCE FLASH/WEB DEVELOPER?</h1>
                <div class="clear"></div>
                <img src="logo.jpg" alt="RINGO LOGO">
                <div class="clear"></div>
                <h2>FREELANCE FLASH & WEB DEVELOPER</h2>
                <p>Look at my <span>work</span> and my <span>resume.</span> I am <span>available</span> as <span>freelance</span> Flash & Web Developer.</p>
            </div>
        </div>
        <footer>
            <div class="wrapper">
                <img src="footer.jpg" alt="footer image">
                <div class="clear"></div>       
            </div>
        <div id="b_b"></div>
        </footer>
    </body>
</html>

现在，当我单击一个链接（如Home）时，所有链接都变为绿色，就好像它们都被访问过一样。

因为所有链接的href属性都有相同的值：

使它们不同，例如：

<ul>
    <a href="#home"><li>HOME</li></a>
    <a href="#work"><li>WORK</li></a>
    <a href="#resume"><li>RESUME</li></a>
    <a href="#freelance"><li>FREELANCE</li></a>
    <a href="#contact"><li>CONTACT</li></a>               
</ul>

修理

更改链接的href值以指向其他位置，如www.google.com和www.stackoverflow.com等

为什么

单击一个链接时，该目的地存储为已访问，而不是链接本身。通过更改目的地，您可以解决部署中通常不会出现的问题。这是必需的，因为指向同一页面的多个链接应该会通知用户是否访问过这些页面…

您在所有页面中都有相同的url。如果您不介意，还有一个问题：如果我想在悬停效果中添加背景块。。我该怎么做？我需要那个块有一点填充，这样它就不会接触到链接的文本，比如家庭作业等等。。。链接不应该改变它们的位置。非常感谢你的帮助！

<ul>
    <li><a href="#home">HOME</a></li>
    <li><a href="#work">WORK</a></li>
    <li><a href="#resume">RESUME</a></li>
    <li><a href="#freelance">FREELANCE</a></li>
    <li><a href="#contact">CONTACT</a></li>           
</ul>