嗨,我正在尝试创建一个个人网站,并且在我的标题样式方面遇到了一些问题,特别是与定位有关。这就是我的标题现在的样子:
中间的 NA 实际上是一个应该与黑色边框重叠的图像圈,但我似乎不知道该怎么做。这是我的标记:
<section class="top-bottom-border overflow">
<div class="center">
<ul id="social">
<li><a href="http://www.facebook.com/nistor.alexandru.89" target="_blank"><img src="images/social/FacebookIco.png"></a></li>
<li><a href="https://twitter.com/aleczandru89" target="_blank"><img src="images/social/TwitterIco.png"></a></li>
<li><a href="http://www.linkedin.com/profile/view?id=225866296&trk=tab_pro" target="_blank"><img src="images/social/LinkedinIco.png"></a></li>
<li><a href="http://www.linkedin.com/profile/view?id=225866296&trk=tab_pro" target="_blank"><img src="images/social/LinkedinIco.png"></a></li>
</ul>
</div>
</section>
<nav class="center overflow" id="menu">
<ul class="float-left">
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Blog</a></li>
</ul>
<ul id="logo">
<li><a href="#" title="About me"><img src="images/Logo.png" alt="logo"/></a></li>
</ul>
<ul class="float-right">
<li><a href="#">Skills</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact me</a></li>
</ul>
</nav>
<section class="top-bottom-border"></section>
这是我的CSS:
.center {
margin: 0 auto;
width: 960px;
}
.overflow {
overflow: hidden;
}
.top-bottom-border {
background: url(../images/top-bottom-border.jpg);
height: 37px;
}
ul#social{
float: right;
}
ul#social li {
display: inline-block;
margin-left: 10px;
margin-top: 5px;
}
nav#menu{
position: relative;
height: 50px;
}
nav#menu li{
display: inline-block;
padding-top: 20px;
padding-bottom: 20px;
}
nav#menu .float-left{
padding-left: 150px;
}
nav#menu .float-left li{
margin-right: 25px;
}
nav#menu .float-right{
padding-right: 150px;
}
nav#menu .float-right li{
margin-left: 25px;
}
ul#logo{
position: absolute;
left: 400px;
top:-40px;
}
如何使中心的图像与两个黑色边框重叠?