两个色的导航栏 [英] Two colored navigation bar
本文介绍了两个色的导航栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在这张照片中做一个导航栏。
酒吧有两个彩色格。但是这个div的内容必须在包装中，就像页面的其他内容一样，但我不知道如何去做。
导航栏必须修复，但我认为它现在并不重要。
编辑：
http://jsfiddle.net/2NA8V/
我的工作代码：
< NAV>
< div id =headerLogo>
< h1>
< a href =index.php>
< img src =...class =headerImage>
< / a>
< / h1>
< ul>
< li class =mainMenuPoint>SzurkolóiKlub< / li>
< li class =mainMenuPoint> Tagoknak< / li>
< li class =mainMenuPoint>Meccsnaptár< / li>
< li class =mainMenuPoint>Történelem< / li>
< li class =login>
< a href =admin / admin.phpclass =adminlink>管理员< / a>
< p>Helló< a href =profile.phpclass =profileLink> Bergkamp< / a>！< / p>
< input type =buttonname =logoutvalue =Kilépésonclick =location.href ='logout.php'class =logout button>
< / li>
< / ul>
< / div>
< / nav>
style：
nav {
width：100％;
保证金：0 0 0 0;
背景：＃d90000;
背景：-moz-linear-gradient（左，＃d90000 0％，＃b20000 50％，#eee 60％）;
背景：-webkit渐变（线性，左上，右上，色阻（0％，＃d90000），色阻（50％，＃b20000），色阻（60％，＃EEE） ））;
背景：-webkit-linear-gradient（左，＃d90000 0％，＃b20000 30％，#eee 60％）;
背景：-o-linear-gradient（左，＃d90000 0％，＃b20000 30％，#eee 60％）;
背景：-ms-linear-gradient（左，＃d90000 0％，＃b20000 30％，#eee 60％）;
背景：线性渐变（右边，＃d90000 0％，＃b20000 30％，#eee 60％）;
filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃d90000'，endColorstr ='＃b20000'，GradientType = 1）;
}
#headerLogo {
width：950px;
身高：42px;
text-align：left;
margin：0 auto;
}
#headerLogo h1 {
float：left;
}
#headerLogo h1 a {
padding-left：30px;
}
.headerImage {
padding-top：5px;
padding-left：5px;
}
nav ul {
身高：42px;
float：right;
margin：0 auto 0 0;
background-color：#EEE;
width：757px;
}
nav ul li {
float：left;
margin：0px 10px;
职位：亲属;
身高：32px;
padding-top：12px;
}
.mainMenuPoint {
color：＃cb0000;
font-family：'BebasNeueRegular';
字体大小：120％;
光标：指针;
职位：亲属;
}
nav ul .login {
padding-top：5px！important;
职位：亲属;
}
nav ul .login a，nav ul .login input，nav ul .login p {
float：left;
font-size：80％;
}
nav ul .login a {
font-size：110％;
padding-top：7px;
}
nav ul .login p {
font-family：'BebasNeueRegular';
padding-top：8px;
margin：0 15px 0 30px;
font-size：100％;
颜色：＃CB0000;
}
.profileLink {
float：none！important;
font-family：'BebasNeueRegular'！important;
padding-top：8px！important;
margin：0 3px 0 3px！important;
font-size：100％！important;
颜色：＃CB0000！重要;
}
nav ul .login .loginForm {
padding-top：0px;
}
nav ul li：first-child {
margin-left：20px;
}
nav ul li a {
font-family：'BebasNeueRegular';
text-transform：uppercase;
颜色：＃CB0000;
font-size：110％;
}
.logout {
宽度：60px;
}
效果很好，但我不喜欢这个解决方案。如果你需要有两种颜色的容器，我建议你使用CSS渐变（CSS gradient） ：
背景：线性渐变（90度，绿色50％，灰色50％）
下面是演示： http：// jsfiddle.net/YWKTR/
请确保使用浏览器前缀在每个现代浏览器中运行。
I want to do a navigation bar like in this picture.
The bar has two colored div. But the content of this divs must be in a wrapper, like the other contents of the page, but i don't know how to do it. The navigation bar must be fixed, but i think it's not important now.
Edit: http://jsfiddle.net/2NA8V/ My working code:
<nav>
<div id="headerLogo">
<h1>
<a href="index.php">
<img src="..." class="headerImage">
</a>
</h1>
<ul>
<li class="mainMenuPoint">Szurkolói Klub</li>
<li class="mainMenuPoint">Tagoknak</li>
<li class="mainMenuPoint">Meccsnaptár</li>
<li class="mainMenuPoint">Történelem</li>
<li class="login">
<a href="admin/admin.php" class="adminlink">Admin terület</a>
<p>Helló <a href="profile.php" class="profileLink">Bergkamp</a>!</p>
<input type="button" name="logout" value="Kilépés" onclick="location.href='logout.php'" class="logout button">
</li>
</ul>
</div>
</nav>
style:
nav {
width: 100%;
margin: 0 0 0 0;
background: #d90000;
background: -moz-linear-gradient(left, #d90000 0%, #b20000 50%, #eee 60%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#d90000), color-stop(50%,#b20000), color-stop(60%,#EEE));
background: -webkit-linear-gradient(left, #d90000 0%,#b20000 30%, #eee 60%);
background: -o-linear-gradient(left, #d90000 0%,#b20000 30%, #eee 60%);
background: -ms-linear-gradient(left, #d90000 0%,#b20000 30%, #eee 60%);
background: linear-gradient(to right, #d90000 0%,#b20000 30%, #eee 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d90000', endColorstr='#b20000',GradientType=1 );
}
#headerLogo {
width: 950px;
height: 42px;
text-align:left;
margin: 0 auto;
}
#headerLogo h1 {
float: left;
}
#headerLogo h1 a{
padding-left: 30px;
}
.headerImage {
padding-top: 5px;
padding-left: 5px;
}
nav ul {
height: 42px;
float: right;
margin: 0 auto 0 0;
background-color: #EEE;
width: 757px;
}
nav ul li {
float: left;
margin: 0px 10px;
position: relative;
height: 32px;
padding-top: 12px;
}
.mainMenuPoint {
color: #cb0000;
font-family: 'BebasNeueRegular';
font-size: 120%;
cursor: pointer;
position: relative;
}
nav ul .login {
padding-top: 5px !important;
position: relative;
}
nav ul .login a, nav ul .login input, nav ul .login p {
float: left;
font-size: 80%;
}
nav ul .login a {
font-size: 110%;
padding-top: 7px;
}
nav ul .login p {
font-family: 'BebasNeueRegular';
padding-top: 8px;
margin: 0 15px 0 30px;
font-size: 100%;
color: #CB0000;
}
.profileLink {
float: none !important;
font-family: 'BebasNeueRegular' !important;
padding-top: 8px !important;
margin: 0 3px 0 3px !important;
font-size: 100% !important;
color: #CB0000 !important;
}
nav ul .login .loginForm {
padding-top: 0px;
}
nav ul li:first-child {
margin-left: 20px;
}
nav ul li a {
font-family: 'BebasNeueRegular';
text-transform:uppercase;
color: #CB0000;
font-size: 110%;
}
.logout {
width: 60px;
}
It's working great, but i don't like this solution. I think it could be much easier.
解决方案
If you need to have one container with two colors, I suggest you use CSS gradients:
background:linear-gradient(90deg, green 50%, grey 50%)
Here's the demo: http://jsfiddle.net/YWKTR/
Just be sure to use browser prefixes to run in every modern browser.
这篇关于两个色的导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
