Html 左侧带有徽标的水平液体导航菜单_Html_Css

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

html css

Html 左侧带有徽标的水平液体导航菜单,html,css,Html,Css,如何将徽标浮动到水平导航条的左侧并在液体中显示我很想找到一个关于如何操作的教程，但不幸的是，我能找到的只是水平菜单本身的示例这是示例中使用的代码：；） .标题\u框\u cmg { 宽度：100%；保证金：0自动；填充：0；高度：125px；背景：#03a691 url（/views/afl/images/bg/bg#u header.jpg）上中重复-x } .标题(cmg) { 宽度：920px；高度：125px；保证金：0自动；填充：0 20px；溢出：隐藏；背景：透

如何将徽标浮动到水平导航条的左侧并在液体中显示

我很想找到一个关于如何操作的教程，但不幸的是，我能找到的只是水平菜单本身的示例

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


.标题\u框\u cmg
{
宽度：100%；
保证金：0自动；
填充：0；
高度：125px；
背景：#03a691 url（/views/afl/images/bg/bg#u header.jpg）上中重复-x
}
.标题(cmg)
{
宽度：920px；
高度：125px；
保证金：0自动；
填充：0 20px；
溢出：隐藏；
背景：透明url（/views/afl/images/bg/bg_glow.jpg）顶部中间不重复
}
.最佳选择
{
浮动：对；
显示：内联；
宽度：50%；
溢出：隐藏；
利润上限：20px
}
.top_选项p
{
字体大小：1.1米；
利润率：7px 20px 0
}
.主导航
{
宽度：624px；
高度：50px；
溢出：隐藏；
浮动：对；
显示：内联；
利润上限：22像素
}
李少民
{
浮动：左；
显示：内联；
高度：50px；
左边距：80px
}
主导航李
{
左边距：0
}
.main_nav li a
{
显示：块；
高度：50px；
文本缩进：-9999px；
背景：透明url（/views/afl/images/bg/bg_main_nav.png）0 0不重复
}
#主页{宽度：36px；背景位置：0；左边距：}
#主页：悬停，body.home#主页{背景位置：0-50px}
#然后{宽度：61px；背景位置：-36px 0}
#然后：悬停，身体。然后#然后{背景位置：-36px-50px}
#thep{宽度：61px；背景位置：-97px 0}
#thep:hover，body.thep#thep{背景位置：-97px-50px}
#thea{宽度：90px；背景位置：-158px 0}
#西娅：悬停，身体。西娅#西娅{背景位置：-158px-50px}
#续{宽度：53px；背景位置：-250px 0}
#cont:hover，body.cont#cont{背景位置：-250px-50px}
家

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


.标题\u框\u cmg
{
宽度：100%；
保证金：0自动；
填充：0；
高度：125px；
背景：#03a691 url（/views/afl/images/bg/bg#u header.jpg）上中重复-x
}
.标题(cmg)
{
宽度：920px；
高度：125px；
保证金：0自动；
填充：0 20px；
溢出：隐藏；
背景：透明url（/views/afl/images/bg/bg_glow.jpg）顶部中间不重复
}
.最佳选择
{
浮动：对；
显示：内联；
宽度：50%；
溢出：隐藏；
利润上限：20px
}
.top_选项p
{
字体大小：1.1米；
利润率：7px 20px 0
}
.主导航
{
宽度：624px；
高度：50px；
溢出：隐藏；
浮动：对；
显示：内联；
利润上限：22像素
}
李少民
{
浮动：左；
显示：内联；
高度：50px；
左边距：80px
}
主导航李
{
左边距：0
}
.main_nav li a
{
显示：块；
高度：50px；
文本缩进：-9999px；
背景：透明url（/views/afl/images/bg/bg_main_nav.png）0 0不重复
}
#主页{宽度：36px；背景位置：0；左边距：}
#主页：悬停，body.home#主页{背景位置：0-50px}
#然后{宽度：61px；背景位置：-36px 0}
#然后：悬停，身体。然后#然后{背景位置：-36px-50px}
#thep{宽度：61px；背景位置：-97px 0}
#thep:hover，body.thep#thep{背景位置：-97px-50px}
#thea{宽度：90px；背景位置：-158px 0}
#西娅：悬停，身体。西娅#西娅{背景位置：-158px-50px}
#续{宽度：53px；背景位置：-250px 0}
#cont:hover，body.cont#cont{背景位置：-250px-50px}
家

在您发布的示例中，它们的徽标浮动：左，顶部导航和菜单浮动：右。在Chrome中使用“Inspect Element”（或在您选择的浏览器中使用同等工具）将非常容易地向您展示这一点。谢谢。我正在使用firefox和firebug查看代码，但当我看到它们使用的所有不同元素和命名标记时，我感到困惑。最后我下载了chrome，它比以前好多了。它突出显示了全部内容，并在我的笔记本电脑上显示得更清晰一些。在你发布的示例中，firebug只是给你一个未填充的蓝色方块，它们有logo float:left和top nav&menu float:right。在Chrome中使用“Inspect Element”（或在您选择的浏览器中使用同等工具）将非常容易地向您展示这一点。谢谢。我正在使用firefox和firebug查看代码，但当我看到它们使用的所有不同元素和命名标记时，我感到困惑。最后我下载了chrome，它比以前好多了。它突出显示了全部内容，并在我的笔记本电脑上显示得更清晰一些。至于firebug，它只是给了你一个未填充的蓝色方块，我在所有的源代码中查看了一下，但是有人发布了一个简化版本。其他人可能会发现这个答案很简单，我后来在所有的源代码中查找了一下，但是有人发布了一个简化版本。其他人可能会觉得这个答案很方便

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