Question

我想在背景图片上创建一个文本水平菜单（例如，类似于此网站上带有徽标的顶级菜单：http://bigtop.it）。但是，我将这些文本链接相对于彼此和背景图像定位有问题。这是css和html的标题部分：

#header {
  
	background-image: url(http://s6.postimg.org/3osi1wfld/starmenu.png);
	
    margin-left: auto;
	margin-right: auto;
	
    height: 299px;
	width: 893px;
  
	background-position: 50% 50%;	
	background-repeat: no-repeat;
  
    text-align: center;

}

a.header:link {
	color: #000000;
	font-family: passion-one;
	font-size: 24px;
	text-decoration: none;
	font-weight: 200;
	font-style: normal;
	}
a.header:visited {
	color: #000000;
	font-family: passion-one;
	font-style: normal;
	font-weight: 200;
	font-size: 24px;
	text-decoration: none;
	}
a.header:hover {
	color: #348AFF;
	font-family: passion-one;
	font-style: normal;
	font-weight: 200;
	text-decoration: none;
	font-size: 24px;
	}
	
a.header:active {
	font-family: passion-one;
	color: #348AFF;
	font-weight: 200;
	font-size: 24px;
	font-style: normal;
	}

<div id="wrapper">
  
	<div class="row" id="header">
   
<div class = "row" id="menu">

<a href="somepage.html" class="header">HOME</a>

<a href="somepage.html" class="header">PORTFOLIO</a>

<a href="somepage.html" class="header">MEDIA</a>

<a href="somepage.html" class="header">CONTACT </a>


</div>

	  <div class="cell"> 
        
	  </div>

我知道有很多方法可以创建这种菜单，但到目前为止，我无法想出任何好的菜单。你能告诉我这是如何实现的吗？谢谢！

Answer 1

请参阅此链接中的解决方案：http://codepen.io/anon/pen/KpGVBg

<div class="row" id="header">
    <div class="row" id="menu">
        <a href="somepage.html" class="header">HOME</a>
        <a href="somepage.html" class="header">PORTFOLIO</a>
        <a href="somepage.html" class="header">MEDIA</a>
        <a href="somepage.html" class="header">CONTACT </a>
    </div>
</div>

<style>
#header {
background-image: url(http://s6.postimg.org/3osi1wfld/starmenu.png);
margin-left: auto;
margin-right: auto;
height: 299px;
width: 893px;
background-position: 50% 50%;
background-repeat: no-repeat;
text-align: center;
}

a.header:link {
color: #000000;
font-family: passion-one;
font-size: 24px;
text-decoration: none;
font-weight: 200;
font-style: normal;
}

a.header:visited {
color: #000000;
font-family: passion-one;
font-style: normal;
font-weight: 200;
font-size: 24px;
text-decoration: none;
}

a.header:hover {
color: #348AFF;
font-family: passion-one;
font-style: normal;
font-weight: 200;
text-decoration: none;
font-size: 24px;
}

a.header:active {
font-family: passion-one;
color: #348AFF;
font-weight: 200;
font-size: 24px;
font-style: normal;
}

#menu {
margin-left: 40px;
position: absolute;
top: 175px;
}

.row a {
margin: 0 20px 0 40px;
}

.row a:nth-child(3) {
margin-left: 180px;
}
</style>

在背景图象的文本菜单

1 个答案: