好吧,我正在尝试让所有这些元素都集中在它们自己的空间中。附件是当前状态以及它应该是什么样子...
HTML:
<div class="fhNav" id="nav">
<div class="homeBtn">
<a href="https://www.factionhouse.org/"></a>
</div>
<div class="forumsBtn">
<a href="https://www.factionhouse.org/forums"></a>
</div>
<div class="applyBtn">
<a href="https://www.factionhouse.org/apply"></a>
</div>
<div class="mttBtn">
<a href="https://www.factionhouse.org/apply"></a>
</div>
<div class="shopBtn">
<a href="https://www.factionhouse.org/apply"></a>
</div>
<div class="supportBtn">
<a href="https://www.factionhouse.org/apply"></a>
</div>
</div>
CSS:
.fhNav {
width: 893px;
height: 90px;
background: url(../images/navBack.png);
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
padding-right: 10px;
padding-bottom: 40px;
background-repeat: no-repeat;
display: flex;
align-items: center;
}
.homeBtn{
width: 169px;
height: 67px;
position: relative;
margin-left: 12px;
background: url("../images/navbtn/homebtn.png") no-repeat;
background-repeat: no-repeat;
margin-bottom: 22px;
margin-top: 24px;
}
.homeBtn a{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.homeBtn a:hover{
background: url(../images/navbtn/homebtnhover.png);
background-repeat: no-repeat;
}
.forumsBtn{
width: 150px;
height: 67px;
position: relative;
margin-left: -6px;
margin-right: 13px;
background: url("../images/navbtn/forumsbtn.png") no-repeat;
margin-bottom: 22px;
background-repeat: no-repeat;
margin-top: 24px;
}
.forumsBtn a{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.forumsBtn a:hover{
background: url(../images/navbtn/forumsbtnhover.png);
background-repeat: no-repeat;
}
.applyBtn{
width: 137px;
height: 67px;
position: relative;
margin-left: 5px;
margin-right: auto;
background: url("../images/navbtn/applybutton.png") no-repeat;
margin-bottom: 22px;
background-repeat: no-repeat;
margin-top: 24px;
}
.applyBtn a{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.applyBtn a:hover{
background: url(../images/navbtn/applybuttonhover.png);
background-repeat: no-repeat;
}
.mttBtn{
width: 195px;
height: 70px;
position: relative;
margin-left: auto;
margin-right: auto;
background: url("../images/navbtn/mttbutton.png") no-repeat;
margin-bottom: 22px;
background-repeat: no-repeat;
margin-top: 27px;
}
.mttBtn a{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.mttBtn a:hover{
background: url(../images/navbtn/mttbuttonhover.png);
background-repeat: no-repeat;
}
.shopBtn{
width: 180px;
height: 70px;
position: relative;
margin-left: auto;
margin-right: auto;
background: url("../images/navbtn/shopbutton.png") no-repeat;
margin-bottom: 22px;
background-repeat: no-repeat;
margin-top: 27px;
}
.shopBtn a{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.shopBtn a:hover{
background: url(../images/navbtn/shopbuttonhover.png);
background-repeat: no-repeat;
}
.supportBtn{
width: 180px;
height: 70px;
position: relative;
margin-left: auto;
margin-right: auto;
background: url("../images/navbtn/supportbutton.png") no-repeat;
margin-bottom: 22px;
background-repeat: no-repeat;
margin-top: 27px;
}
.supportBtn a{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.supportBtn a:hover{
background: url(../images/navbtn/supportbuttonhover.png);
background-repeat: no-repeat;
}
It should look (somewhat like) this...except obviously with the other tabs in it.
编辑:我已经弄乱这个几个小时了,我就是想不通......
最佳答案
我知道这并不能完全回答您的问题,但我认为您会发现这种方法更简单:)
在整页中查看代码段,小代码段容器不够大。
我建议不要为按钮使用背景图像,而只是在您的链接中嵌套一个 <img ...>
标签。为什么?
因为容器(在本例中为 li
)将增长以完美匹配图像。现在您不必设置每个按钮的宽度和高度,它们会根据图像大小增长。
为了在悬停时显示不同的图像,我将使用 css 选择器 :hover
将图像的不透明度在 0
和 1
之间更改。此外,悬停图像应从 position
编辑为 absolute
,以便它可以与非悬停图像出现在同一位置。
您将需要更多地处理 css,但我建议您使用这种方法来单独设置按钮的宽度和高度。
祝你好运
编辑:
Could you possibly explain it a little bit more though, as I would like to learn, not just take spoons? :)
当然,
- 我对这个 HTML 结构所做的第一件事是在
ul
元素内嵌套一个带有li
标记的nav
。nav
标签不执行div
不执行的任何操作—— it just has a better semantic name 。ul
和li
标签也是如此。我只是使用它们,因为您的链接代表一个<u
排序的l>
ist 和一些<l
isti>
项。 下一个要解决的问题是应用于
nav
元素的样式。特别是,我应用了三个 css 属性:-
display: flex;
: 这将显示模式设置为 flexbox。 -
align-items: center;
: 这使得 flexbox 中的元素垂直居中 -
justify-content: center;
:这使得 flexbox 将内部元素水平居中。 I would recommend css-tricks flexbox tutorial because flexbox is great layout tool 。
总而言之,这就是导航中心。
-
- 下一组样式适用于
ul
元素内的任何nav
。这通过使用 element element selector 中的 many possible css selectors 来工作。款式风格:-
list-style-type: none;
删除要点 -
background: url(...);
设置背景图片。我们想为该元素使用背景图像,因为背景元素应随元素一起增大或缩小。这也是background-size: cover;
所做的 -
padding: 11px;
和margin: 0;
设置填充和边距。 See the difference between the two here.
-
- 这套css很简单,就是在
li
里面的ul
里面的nav
右边增加1px的边距。您的图片似乎有 1 像素的边框,因此我添加了此边距以匹配,但我建议您删除背景中的空白区域,因为更改导航顺序会破坏背景图片 - 下一组样式应用于
nav ul a
,它们是ul
内的 anchor 标记,位于nav
s 内。 The position is set to relative here so that you can useposition: absolute
the elements inside it. 。对于初次学习 css 的用户来说,这是一个巨大的“啊哈”时刻。 - 接下来是
nav__img--hover
和nav__image--normal
样式。nav__image--hover
使用绝对定位将其绝对定位到父元素。请注意,nav__image--normal
不使用绝对定位。我们只希望其中一个元素正常定位,但我们希望另一个元素绝对定位。 - 最后但同样重要的是
:hover
selectors,它只是将元素的不透明度更改为0
和1
,使它们完全可见和隐藏。您也可以改用visibility
,但不透明度效果很好。
总之,就是这样。希望它对你有用!
nav {
display: flex;
align-items: center;
justify-content: center;
}
nav ul {
display: flex;
list-style-type: none;
margin: 0;
background: url(https://www.factionhouse.org/images/navBack.png);
background-size: cover;
padding: 11px;
}
nav ul li {
margin-right: 1px;
}
nav ul a {
display: flex;
position: relative;
}
.nav__img--hover {
top: 0;
left: 0;
position: absolute;
opacity: 0;
}
.nav__img--hover:hover {
opacity: 1;
}
.nav__img--normal:hover {
opacity: 0;
}
<nav>
<ul>
<li>
<a href="https://www.factionhouse.org">
<img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/homebtn.png">
<img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/homebtnhover.png">
</a>
</li>
<li>
<a href="https://www.factionhouse.org">
<img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/forumsbtn.png">
<img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/forumsbtnhover.png">
</a>
</li>
<li>
<a href="https://www.factionhouse.org">
<img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/applybutton.png">
<img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/applybuttonhover.png">
</a>
</li>
<li>
<a href="https://www.factionhouse.org">
<img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/mttbutton.png">
<img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/mttbuttonhover.png">
</a>
</li>
<li>
<a href="https://www.factionhouse.org">
<img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/shopbutton.png">
<img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/shopbuttonhover.png">
</a>
</li>
<li>
<a href="https://www.factionhouse.org">
<img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/supportbutton.png">
<img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/supportbuttonhover.png">
</a>
</li>
</ul>
</nav>
关于html - 我如何确定如何为每个 div 设置边距/填充?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43578469/