Question

这是我网站的图片按钮。 http://puu.sh/cK7Sf/6309c39cdb.jpg当我重新调整浏览器的大小时，它会转到此处http://puu.sh/cK7VU/f17dafcc41.jpg

这是我的代码

HTML

<div class="Nav">
<div id="buttons">
    <a href="/"><div id="home_button"></div></a>

CSS

#home_button {
background-image: url("home.png");
background-repeat:no-repeat;
background-size: 100%;
width: 150px;
height: 60px;
position: absolute;
top: 196px;
left: 502px;
z-index: 10;
}

我是网络开发的新手，所以请不要讨厌：）

Answer 1

这是我要做的，需要一些调整，不确定为什么按钮是绝对定位的，或背景图像的用途，但是这里有：

HTML：

   <ul class='menu'>
    <li><a href="/">Link 1</a></li>
    <li><a href="/">Link 2</a></li>
    </ul>

CSS：

.menu {
    list-style-type: none;
}
.menu li {
    display: inline-block;
    border: 0.2em solid black;
    border-radius: 10%;
    padding: .5em;
    background: linear-gradient(lightblue, blue);
}
.menu li a {
    text-decoration: none;
    color: black;
}

Answer 2

我创建了一个示例，向您展示基本nav条样式的外观。

dabblet

上的演示

HTML：

<body>
<!--Navigation-Bar-Container-->
<div class="nav-container">
    <!--Navigation-Bar-Item-Wrapper-->
    <div class="nav">
        <!--Items-->
        <div id="menu-item-1" class="menu-item">Item 1</div>
        <div id="menu-item-2" class="menu-item">Item 2</div>
        <div id="menu-item-3" class="menu-item">Item 3</div>
        <div id="menu-item-4" class="menu-item">Item 4</div>
        <div id="menu-item-5" class="menu-item">Item 5</div>
        <hr />
    </div>
</div>
<!--Content-->
</body>

CSS：

body {
    background: url(http://s25.postimg.org/b6q25p4p7/black_thread.png) repeat black;
}
hr {
    color: #777777;
}
.nav-container {
    top: 20px;
    position: relative;
    width: 100%;
    height: 40px;
    text-align: center;
}
.nav {
    width: 100%;
    height: 40px;
    maring: 0 auto;
    text-align: center;
}
.menu-item {
    display: inline-block;
    width: 50px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #777777;
}
.menu-item:hover {
    background-color: black;
    cursor: pointer;
    border-radius: 2px;
}

在重新调整Web浏览器大小时，如何使图像按钮保持不变

2 个答案:

dabblet

HTML：

CSS：