带左侧标志的水平液体导航菜单

如何将标志浮动到水平导航栏左侧并使其显示在液体中similar to this site？带左侧标志的水平液体导航菜单

我很想找到关于如何做到这一点，但遗憾的是所有我能找到的是横向菜单的例子本身

2011-02-04 dazza_au

在您发布的示例中，他们的徽标浮动：左侧，顶部导航和菜单浮动：右侧。使用Chrome中的“检查元素”（或您选择的浏览器中的等效项）可以很容易地向您显示。 – Sean 2011-02-04 01:58:51

感谢堆。我正在使用firefox和firebug来查看代码，但是当我看到所有不同的元素和他们使用的命名标签时，它让我感到困惑。最后我下载了Chrome，它好多了。它突出了整个地段，并在我的笔记本电脑上显示得更清晰一些。由于萤火虫，只是给你填充蓝色方块 – 2011-02-07 00:30:07

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

<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>

来源

2011-03-01 00:16:48 JAiro

带左侧标志的水平液体导航菜单

回答

相关问题