同じページに 2 つのメニュー バーをデザインしたい 1 つ目は灰色、2 つ目は青色
です。以下のコードで問題なく動作する青色のツールバーを開発しましたが、問題はこれを使用できないことです (.navbar .nav > li > a)色とサイズのため、両方のメニュー バーに同様のクラスがあります。主な問題は、テキストをウェブサイト ブロックの幅に合わせて中央揃えにする必要があることです。コントロール+マウススクロールを押してズームすると、灰色のバーが中央に配置されますこれを修正する方法はありますか????
<style type="text/css">
li a
{
font-size: 15pt;
}
.nav
{
min-width: 850px;
}
.navbar
{
margin-bottom: 0;
overflow: visible;
}
.navbar .nav
{
margin: -10px 10px 0 0;
}
.nav-collapse, .nav-collapse.collapse
{
overflow: hidden;
}
.nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus
{
background-color: #004a8f;
color: #fff;
}
.navbar-inner
{
background-image: none;
color: #FFFFFF;
background-color: #1276bc;
min-height: 40px;
padding-left: 10px;
padding-right: 20px;
text-align: center;
border-right: 1px solid black;
}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus
{
font-weight: bold;
color: #FFFFFF;
background-color: #004a8f;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
.navbar .nav > li > a
{
font-weight: bold;
color: #FFFFFF;
float: none;
line-height: 19px;
padding: 17px 21px 0 15px;
text-decoration: none;
text-shadow: none;
height: 30px;
width: 116px;
border-right: 1px solid #6992cc;
}
.navbar .nav > li > a:hover
{
font-weight: bold;
color: #FFFFFF;
text-shadow: none;
float: none;
line-height: 19px;
padding: 17px 21px 0 15px;
text-decoration: none;
background-color: #004a8f;
height: 30px;
width: 116px;
}
.navbar-inner-TopPanel
{
background-color: transparent;
background-repeat: repeat-x;
height: 30px;
padding-top: 15px;
}
.navbar-inner-BottomPanel
{
background-color: #1276bc;
background-repeat: repeat-x;
max-width: 760px;
padding-left: 8px;
}
ul, ol
{
/* padding-left:18%;
padding-top:5px;
padding-bottom:5px;
padding-right:5px;*/
}
.lock
{
/* text-decoration: none;*/
color: gray;
font-weight: normal;
text-shadow: none;
}
.Unlock
{
color: #1276BC;
font-weight: bolder; /*text-shadow: 0 3px 10px rgba(0, 0, 0, 0.39);*/
}
</style>
<div class="row-fluid">
<div>
<div class="navbar">
<div class="navbar-inner">
<div class="container navbar-inner-BottomPanel">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="Default.aspx">
<img id="Img1" style="margin-top: -15px; height: 25px;" runat="server" src="../images/logoheader.png"
alt="Home" /></a> </li>
<li><a href="#">Play</a> </li>
<li><a href="#">Teams</a> </li>
<li><a href="#">About Us </a></li>
<li><a href="#">Contact Us</a> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>