Question

我是新来的，也是网页设计的新手。所以我知之甚少。

在我的练习网页设计中，我设置了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这样的链接时，所有链接都会变为绿色，就好像它们都被访问过一样。

Answer 1

因为所有链接＆＃39; 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>

同时更改无序列表（ul）。不要将列表项（li）嵌套在锚点（a）中，尽管它符合标准。

<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>

Answer 2

<强>修正

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

<强>为什么单击一个链接时，目标将存储为已访问，而不是链接本身。通过更改目标，您可以解决问题（通常，无论如何都不会在部署中显示）。这是必需的，因为指向同一页面的多个链接应该通知用户是否已访问过它们......

如果我点击一个链接，所有链接都在变化

2 个答案: