Question

我想像这张照片中那样做一个导航栏。

The bar has two colored div 酒吧有两个彩色的div。但是这个div的内容必须是一个包装器，就像页面的其他内容一样，但我不知道该怎么做。导航栏必须修复，但我认为现在不重要。

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

式：

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

它工作得很好，但我不喜欢这个解决方案。我认为这可能会容易得多。

Answer 1

如果你需要一个有两种颜色的容器，我建议你使用CSS渐变：

background:linear-gradient(90deg, green 50%, grey 50%)

这是演示：http://jsfiddle.net/YWKTR/

请务必使用浏览器前缀在每个现代浏览器中运行。

两个彩色导航栏

1 个答案: