如何将我的徽标置于导航栏中?
问题描述:
如何将我的徽标居中在我的导航栏中?我已经有了它的中心,但我遇到的问题是当我在内容区域放置图像时,图像掩盖了部分徽标。我确实希望徽标类型从导航链接中稍微放下一点。我不希望徽标和内容图像之间有巨大的空间。有没有办法实现这一目标?附图是我试图完成的设计。提前致谢!如何将我的徽标置于导航栏中?
body {
font-family:Georgia;
font-size:12pt;
}
* {
\t margin:0;
\t padding:0;
}
#header {
background-color:#000000;
height:100px;
margin:auto;
}
#header ul {
margin:0 auto;
width:35%;
padding:12px;
list-style: none;
}
#header li {
float: left;
}
#header a {
padding:0 14px;
text-align:center;
display:block;
\t text-decoration:none;
\t color:#FFFFFF;
\t font-size:18pt;
\t }
#header ul li a.logo {
background: url("Logo.png");
background-repeat:no-repeat;
height:140px;
display:block;
width:140px;
padding: 0;
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: "";
clear: both;
display: table;
}
#MainContent {
\t }
#MainContent img {
\t margin-top:-10px;
\t position:absolute;
\t left:0;
\t width:100%;
}
}
<body>
\t <div id="header" class="clearfix">
\t \t
\t <ul class="Nav">
\t \t \t <li><a href="index.html">Home</a></li>
\t \t \t <li><a href="menu.html">Menu</a></li>
\t \t \t <li><a href="index.html" class="logo"></a></li>
\t \t \t <li><a href="gallery.html" >Gallery</a></li>
\t \t \t <li><a href="about.html">About</a></li>
\t \t \t \t
</ul>
</div>
\t <div id="MainContent">
\t <img src="Photos/drinks.jpeg">
\t </div>
</body>
答
您可以添加一个z-index
您.logo
类。这将使其在图像上方呈现。
例如
.logo {
z-index: 100;
}
可以在设置您的徽标图像的z-index以便它总是坐在上面DOM中的任何其他图像? – Tik
工作正常!谢谢sooooo多! –