我目前正在尝试创建一个导航栏,我在<li>标签上面有一个中等大小的图像,下面有文字(类似于css-tricks)。我已经尝试了背景图像,并且在li标签内部也是一个img,但仍然没有快乐。
我的主要目标是,用户可以单击图标和/或文本,它仍然会将它们指向正确的页面。
如果您有任何其他问题,我非常乐意为您提供帮助。
nav#navBar img {
height: 80px;
margin-left: 80px;
}
nav#navBar {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
align-items: center;
box-shadow: 0 0 25px 0 black;
font-family: 'Nunito Sans', sans-serif;
font-variant: small-caps;
font-weight: 600;
}
nav#navBar * {
display: inline;
padding: 15px;
}
nav#navBar li {padding: 30px;}
nav#navBar li.blue:hover {border-bottom: 2px solid #33A1DE;}
nav#navBar li.red:hover {border-bottom: 2px solid #CC3232;}
nav#navBar li.green:hover {border-bottom: 2px solid #28AE7B;}
nav#navBar li.purple:hover {border-bottom: 2px solid #7A378B;}
nav#navBar li a {
color: black;
text-decoration: none;
}
<nav id="navBar">
<img src="#">
<ul>
<li class="green"><a href="#home">ARTICLES</a></li>
<li class="blue"><a href="#">SNIPPETS</a></li>
<li class="red"><a href="#">MEMBERS</a></li>
<li class="purple"><a href="#">CONTACT</a></li>
</ul>
</nav>
您必须在li标签上放置背景图像并使用填充向下推文本。
nav#navBar li.green {background:url(image.jpg) no-repeat; padding-top: 30px;}