我试图用填充和黄色背景设计 Logo 样式(类似于 vox.com 网站)。
vox 网站的导航栏 Logo 带有黄色背景和填充:
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 16px;
这使其产生一种很酷的效果, Logo 看起来突出到主体部分。
我试图在网站 raachotrekkers.com 上创建相同的效果,但这并没有发生。
Vox 网站使用的是 SVG Logo ,而我使用的是 PNG 图像。
是这个原因吗?
最佳答案
您可以通过使用 position:absolute;
和 top:0;
来实现此目的
这是代码
*{
margin:0;
padding:0;
box-sizing: border-box;
}
nav{
padding:0 10%;
display:flex;
align-items:center;
min-height:50px;
max-height:80px;
box-shadow:0 2px 10px 0 rgb(0 0 0 / 16%);
}
.brand{
position:absolute;
top:0;
}
.navlogo{
width:180px;
}
.rightele{
display:flex;
justify-content:right;
width:100%;
}
.rightele>*{
align-items:center;
display:flex;
justify-content:center;
}
.rightele ul li{
/* padding:5px 10px; */
list-style-type: none;
}
.rightele ul li,
.rightele button{
margin:5px 10px;
cursor:pointer;
}
.rightele button{
height:40px;
padding:5px 10px;
color:white;
font-weight:800;
background-color:#161616;
}
<nav>
<div class="brand">
<img class="navlogo" src="https://mlmgm6ui7ujb.i.optimole.com/Z_NXo3Y.9AP_~52a37/w:auto/h:auto/q:85/https://raachotrekkers.com/wp-content/uploads/2020/05/Raacho-Trekkers-Logo.gif">
</div>
<div class="rightele">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Blog</li>
<li>Road Trip</li>
</ul>
<button>TALK TO US</button>
</div>
</nav>
我没有为移动 View 添加 CSS,因为您可能想要在那里有一个汉堡图标并隐藏所有选项。
所以全屏打开它
关于css - 更改导航栏 Logo 填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70527881/