Question

我是html的新手，所以原谅愚蠢的问题＆n; n。我在这里有这个页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">

    <style type = text/css>
        #topbar
        {
            position: absolute;
            top: 0;
            left: 0;
            height: 80px;
            width:100%;
            background-color:black;
            border-style: solid;
            border-bottom-color: mediumaquamarine;
            border-bottom-width: thin;
        }
        #login 
        {
            position:fixed;
            top: 20px;
            left: 92%;
        }
        #latestItems
        {
            position: fixed;
            height:90%;
            width: 100%;
            top: 100px;
            background-color:white;
            border: 2px;
            border-color: black;
        }
        #tabs
        {
            position: fixed;
            top: 30px;
            left: 150px;
        }
        #tabs_search
        {
            position: relative;
        }
        #tabs_search:hover
        {

        }
        #tabs_lists
        {
            position: relative;
            left: 40px;
        }
        #tabs_cart
        {
            position: relative;
            left: 80px;
        }
        #tabs_home
        {
            position: relative;
            left: 120px;
        }
        #tabs_profile
        {
            position: relative;
            left: 160px;  
        }
    </style>
</head>
<body>
    <header id = topbar>
        <img id = logo src = "logo.png" width = 4% heigth = 4% href = "index.html"></img>

        <a id = "login" href = "https://steamcommunity.com/login/home/?goto=0">
            <img src="http://www.tf2wh.com/img/sits.png" width = 120 height = 50>
        </a>
        <div id = tabs>
            <a href = "search.html", title = "browse items">
                <img id = tabs_search src = "search.png" width = 2% height = 2% ></img>
            </a>
            <a href = "lists.html" title = "list items">
                <img id = tabs_lists src = "lists.png" width = 2% height = 2% ></img>
            </a>
            <a href = "shopping_cart.html" title = "my cart">
                <img id = tabs_cart src = "cart.png" width = 2% height = 2% ></img>
            </a>
            <a href = "index.html" title = "return home">
                <img id = tabs_home src = "home.png" width = 2% height = 2% ></img>
            </a>
            <a href = "my_profile.html" title = "profile">
                <img id = tabs_profile src = "profile.png" width = 2% height = 2% ></img>
            </a>
        </div>
    </header>
</body>

它看起来不错，但是我在前3个图像的底部得到蓝色像素，在第4个图像得到紫色像素（图像里面有＃34;标签＆＃34;）。点击时它们会变红，我不知道为什么......

Answer 1

这是因为默认情况下锚点会加下划线，并且您已将图像包装在锚点中。

添加

a {
   text-decoration: none;
}

到您的CSS中删除它们。

蓝色是标准链接颜色，紫色是访问过的链接，红色是浏览器默认样式中链接的活动状态。

如果页面上还有其他锚点要保留下划线，则应该为包含图像的类添加一个类，并将它们分别设置样式。

Answer 2

您好我检查了您的HTML代码。您不需要完成img标记。该行是因为anchore标签的文本修饰

  a{
              text-decoration:none;
              }

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">

    <style type = text/css>
        a{
          text-decoration:none;
          }
        #topbar
        {
            position: absolute;
            top: 0;
            left: 0;
            height: 80px;
            width:100%;
            background-color:black;
            border-style: solid;
            border-bottom-color: mediumaquamarine;
            border-bottom-width: thin;
        }
        #login 
        {
            position:fixed;
            top: 20px;
            left: 92%;
        }
        #latestItems
        {
            position: fixed;
            height:90%;
            width: 100%;
            top: 100px;
            background-color:white;
            border: 2px;
            border-color: black;
        }
        #tabs
        {
            position: fixed;
            top: 30px;
            left: 150px;
        }
        #tabs_search
        {
            position: relative;
        }
        #tabs_search:hover
        {

        }
        #tabs_lists
        {
            position: relative;
            left: 40px;
        }
        #tabs_cart
        {
            position: relative;
            left: 80px;
        }
        #tabs_home
        {
            position: relative;
            left: 120px;
        }
        #tabs_profile
        {
            position: relative;
            left: 160px;  
        }
    </style>
</head>
<body>
    <header id = topbar>
        <img id = logo src = "logo.png" width = 4% heigth = 4% href = "index.html">

        <a id = "login" href = "https://steamcommunity.com/login/home/?goto=0">
            <img src="http://www.tf2wh.com/img/sits.png" width = 120 height = 50>
        </a>
        <div id = tabs>
            <a href = "search.html", title = "browse items">
                <img id = tabs_search src = "search.png" width = 2% height = 2% >
            </a>
            <a href = "lists.html" title = "list items">
                <img id = tabs_lists src = "lists.png" width = 2% height = 2% >
            </a>
            <a href = "shopping_cart.html" title = "my cart">
                <img id = tabs_cart src = "cart.png" width = 2% height = 2% >
            </a>
            <a href = "index.html" title = "return home">
                <img id = tabs_home src = "home.png" width = 2% height = 2% >
            </a>
            <a href = "my_profile.html" title = "profile">
                <img id = tabs_profile src = "profile.png" width = 2% height = 2% >
            </a>
        </div>
    </header>
</body>
</html>

＆＃13;

HTML中的奇怪像素img

2 个答案: