1

最初，在完成了 Flash 教程后，我为我的网站设计了这个基于 Flash 的导航菜单。一切都很顺利，直到我展示示例页面的一些访问者说他们的浏览器（Internet Explorer）没有打开菜单，因为他们没有在他们的系统上安装 Flash 插件。因此，考虑到这些问题，如果我的网站访问者中的更多人没有在他们的系统上安装 Flash，也许他们也将无法查看菜单！如果导航菜单无法访问，整个网站就会出错。

我遇到了另一个非常好的基于 CSS 的垂直菜单，其工作方式与我的 flash 菜单（黑色悬停效果）几乎相同。这是代码：

<style type="text/css">

#coolmenu{
border: 0px solid black;
width: 178px;
background-color: #FFFFFF;
}

#coolmenu a{
font: bold 13px Tahoma;
padding: 16px;
padding-center: 0px;
display: block;
width: 100%;
color: 3a403c;
text-decoration: none;
border-bottom: 1px solid black;
}

html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}

#coolmenu a:hover{
background-color: red;
color: white;
}

</style>

<div id="coolmenu">
<a href="">ABOUT US<br><small> a brief note on our genesis </small></br></a>
<a href="">CONTENT SECTIONS<br><small> what we publish </small></br></a>
<a href="">EDITORIAL BOARD<br><small> fellow comrades </small></br></a>
<a href="">DOWNLOAD<br><small> our magazine archives </small></br></a>
<a href="">CONTACT US <br><small> mailing address </small></br></a>
</div>

但是如果我想在我的网站中使用那个 CSS 菜单，我需要将它横向设计。

我试图改变自己，但惨遭失败：（菜单的宽度需要为 665 像素，高度为 48 像素......每个块，即关于我们、内容、下载等需要在 133 像素大小的分区内，有一个细条颜色# 616060 在每个块的右端。我设法只为第一个块设置了它，即关于我们但所有其他菜单分区继续垂直放置。

此外，正如您在我的 Flash 菜单中看到的那样，01、02、03 到 05 的字体大小和颜色（Arial 字体大小 16bold；颜色 #858383）和文本“关于我们”的字体大小和颜色不同。 CONTENT" DOWNLOAD" "EDITORIAL BOARD" "CONTACT US" (Arial font size 10; color white)

但是在 CSS 中，我无法为数字和文本获得不同的字体大小和颜色。

这是我尝试只对第一个块做的关于我们：但是正如你所看到的，字体看起来如此巨大......我没有尝试使用其他块:(

<style type="text/css">

#coolmenu{
width: 665px;
height: 48px;
margin: 0;
padding: 0;
background-color: #CC3300;
text-align: center;

}

#coolmenu a{
padding: 5px;
color: #fff;
font: bold 14px Arial;
padding-center: 0px;
display: block;
width: 133px;
color: #858383;
text-decoration: none;
border-right: 1px solid #616060;
}

html>body #coolmenu a{ /*Non IE rule*/
width: 133px;
}

#coolmenu a:hover{
background-color: black;
color: white;
}

</style>

<div id="coolmenu">
<a href=""><font face="Arial" size="16" color=#858383><b>01</b></font><br><font face="Arial" size="10" color="white">ABOUT US</font></br></a>
<a href="">02<br><small> CONTENT SECTIONS </small></br></a>
<a href="">03<br><small> EDITORIAL BOARD </small></br></a>
<a href="">04<br><small> DOWNLOAD PDF</small></br></a>
<a href="">05<br><small> CONTACT US  </small></br></a>
</div>

所以请指导我，如何让我的 Flash 菜单中的字体样式和这个 CSS 菜单是水平的？提前致谢。

4

3 回答 3

1

这是你想要的效果吗：http: //jsfiddle.net/UmpdH/10/ [最终更新]

基本上，修改您的 html，使用无序列表并使用、to<ul>包装每个锚点，并根据需要设置元素的样式。<li>floatleft

HTML：

<ul id="coolmenu">
    <li><a href="http://www.aamaodisha.org"><span><div>01</div>ABOUT US</span></a></li>
    <li><a href="http://www.aamaodisha.org/content.php"><span><div>02</div>CONTENT SECTIONS</span></a></li>
    <li><a href="http://www.aamaodisha.org/editorialboard.php"><span><div>03</div>EDITORIAL BOARD</span></a></li>
    <li><a href="http://www.aamaodisha.org/download.php"><span><div>04</div>DOWNLOAD PDF</span></a></li>
    <li><a href="http://www.aamaodisha.org/contactus.php"><span><div>05</div>CONTACT US</span></a></li>
</ul>​

CSS：

<style type="text/css">

#coolmenu{
width: 670px;
height: 48px;
margin: 0;
padding: 0;
background-color: #CC3300;
text-align: left;
list-style: none;
}

#coolmenu a{
padding: 5px;
color: #fff;
font: bold 10px Arial;
padding-center: 0px;
display: block;
/*width: 133px;*/
text-decoration: none;
}

html>body #coolmenu a{ /*Non IE rule*/
width: 133px;
}

#coolmenu li:hover{
background-color: black;
}

#coolmenu li:hover a {color: white;}

#coolmenu li { width: 118px; height: 48px; padding-left: 15px; float: left; border-right: 1px solid #616060; }
#coolmenu li a span { min-width: 50px; display: inline-block; }

#coolmenu li a div { color: #858383; font: bold 16px Arial; text-align: left; }​

</style>

编辑：上面的菜单与这里看到的 flash 菜单具有相同的效果：http ://www.aamaodisha.org/contact.html

编辑：最终更新，文本左对齐，左填充：15px

于 2012-06-29T06:11:52.583 回答
1

这是完整的工作代码：http: //jsfiddle.net/surendraVsingh/UmpdH/17/

HTML

<ul id="coolmenu">
    <li><a href="http://www.aamaodisha.org"><span>01</span>ABOUT US</a></li>
    <li><a href="http://www.aamaodisha.org/content.php"><span>02</span>CONTENT SECTIONS</a>
    <li><a href="http://www.aamaodisha.org/editorialboard.php"><span>03</span>EDITORIAL BOARD</a>
    <li><a href="http://www.aamaodisha.org/download.php"><span>04</span>DOWNLOAD PDF</a>
    <li><a href="http://www.aamaodisha.org/contactus.php"><span>05</span>CONTACT US</a>
</ul>

CSS：

#coolmenu{
    width: 665px;
    height: 48px;
    margin: 20px auto;
    padding: 0;
    background-color: #CC3300;
    text-align: left;
}

#coolmenu li{
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
     -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     box-sizing: border-box;
     width: 133px;
     border-right: 1px solid #616060;
     display:block;
     float:left;
}
#coolmenu li:last-child{border:none;}
#coolmenu span{
    display:block; 
    text-align:left; 
    color: #858383; 
    font-size:15px;
}
#coolmenu a{
    padding:8px 0 8px 5px;
    color: #fff;
    font: bold 11px Arial;
    text-decoration: none;
    display:block;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}
#coolmenu a:hover{
background-color: #000;
}​
于 2012-06-29T08:21:33.247 回答
0

您需要使用列表，即

<ul>
    <li>
        <a>ETC</a>
        <a>ETC</a>
    </li>
</ul>

并使用 float: left 在 css 部分。

于 2012-06-29T06:22:56.810 回答