Question

如何编码将徽标浮动到水平导航栏左侧并将其显示为液体similar to this site？

我很想找到一个关于如何做到这一点的教程，但遗憾的是我能找到的只是水平菜单的例子

Answer 1

这是示例中使用的代码：;）

<html>
<head>
<style>
.header_box_cmg
{
width:100%;
margin:0auto;
padding:0;
height:125px;
background:#03a691 url(/views/afl/images/bg/bg_header.jpg) top center repeat-x
}
.header_cmg
{
width:920px;
height:125px;
margin:0auto;
padding:0 20px;
overflow:hidden;
background:transparent url(/views/afl/images/bg/bg_glow.jpg) top center no-repeat
}
.top_options
{
float:right;
display:inline;
width:50%;
overflow:hidden;
margin-top:20px
}
.top_options p
{
font-size:1.1em;
margin:7px 20px 0 0
}
.main_nav
{
 width:624px;
 height:50px;
 overflow:hidden;
 float:right;
 display:inline;
 margin-top:22px
}
.main_nav li
{
float:left;
display:inline;
height:50px;
margin-left:80px
}
.main_nav li.first
{
margin-left:0
}
.main_nav li a
{
 display:block;
 height:50px;
 text-indent: -9999px;
 background:transparent url(/views/afl/images/bg/bg_main_nav.png) 0 0 no-repeat
 }
#home{width:36px;background-position:0 0;margin-left:}
#home:hover, body.home #home{background-position:0 -50px}
#then{width:61px;background-position: -36px 0}
#then:hover, body.then #then{background-position: -36px -50px}
#thep{width:61px;background-position: -97px 0}
#thep:hover, body.thep #thep{background-position: -97px -50px}
#thea{width:90px;background-position: -158px 0}
#thea:hover, body.thea #thea{background-position: -158px -50px}
#cont{width:53px;background-position: -250px 0} 
#cont:hover, body.cont #cont{background-position: -250px -50px}
</style>
</head>
<body>
<div class="header_box_cmg"> 
  <div class="header_cmg"> home
    <h1><a href="http://ambassadorsforlife.org/" title="Ambassadors for LIFE">
        <img src="/views/afl/images/ambassadors_for_life.png" alt="Ambassadors for LIFE" title="Ambassadors for LIFE" />
    </a></h1> 
  <div class="top_options"> 
    <a href="http://ambassadorsforlife.org/become-an-ambassador/" class="btn_become_ambassador">Become An Ambassador</a> 
    <p class="float-right"><a href="http://my.ambassadorsforlife.org/">Sign in to my account</a></p> 
</div> 
<ul class="main_nav"> 
    <li class="first"><a href="http://ambassadorsforlife.org/" id="home">Home</a></li> 
    <li><a href="http://ambassadorsforlife.org/the-need/" id="then">The Need</a></li> 
  <li><a href="http://ambassadorsforlife.org/the-plan/" id="thep">The Plan</a></li> 
    <li><a href="http://ambassadorsforlife.org/ambassadors/" id="thea">Ambassadors</a>    </li> 
    <li><a href="http://ambassadorsforlife.org/contact/" id="cont">Contact</a></li> 
  </ul> 
  </div> 
</div> 
</body>
</html>

带有徽标的水平液体导航菜单

1 个答案: