헤더의 일부를 나머지 색상과 다른 색상으로 만드는 방법은 무엇입니까?

Question

2 개의 "버튼"목록이있는 정말 기본적인 헤더가 있습니다. 하나는 왼쪽에, 다른 하나는 오른쪽에 있습니다. 문제는 "가입"버튼이 나머지 (다른 색상)와 다른 배경색을 가지기를 원합니다. 나는 나의 코드와 함께 아래 예와 실제 헤더를 가지고있다.

내가 원하는 것은 :

내가 무엇을 가지고 :

<!-- html: --> 

header { 
 
    min-height: 20px; 
 
} 
 

 
header a { 
 
    color: #3b4b5d; 
 
    text-decoration: none; 
 
} 
 

 
section h1 { 
 
    margin: 0; 
 
} 
 

 

 
/* TOP NAV CSS */ 
 

 
.top-nav { 
 
    width: 100%; 
 
    margin: auto; 
 
    overflow: hidden; 
 
} 
 

 
.nav-logo img { 
 
    float: left; 
 
    width: 120px; 
 
    padding: 20px 12px 20px 20px; 
 
} 
 

 
.left-nav ul li { 
 
    margin: 10px 16px 0px 16px; 
 
    padding: 0px 0px 0px 24px; 
 
    font-size: 16px; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    float: left; 
 
    text-align: center; 
 
} 
 

 
header a:hover { 
 
    color: #50E3C2; 
 
} 
 

 
.right-nav ul li { 
 
    margin: 10px 16px 0px 16px; 
 
    padding: 0px 24px 0px 0px; 
 
    font-size: 16px; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    float: right; 
 
    text-align: center; 
 
}

<header> 
 
    <div class="top-nav"> 
 
    <div id="branding"> 
 
     <a href="index.html" class="nav-logo"><img src="assets/nav-bar-logo.png" alt="trooops-logo"></a> 
 
    </div> 
 

 
    <nav class="left-nav"> 
 
     <ul> 
 
     <li><a href="discover.html">Discover</a></li> 
 
     <li><a href="blog.html">Blog</a></li> 
 
     </ul> 
 
    </nav> 
 

 
    <div class="right-nav"> 
 
     <ul> 
 
     <li><a href="signup.html">Sign Up</a></li> 
 
     <li><a href="login.html">Log In</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</header>

Answer 1

뭔가 리 애

.right-nav>ul>li:first-child{ 
    background-color: #whatever-color 
} 

fiddle

편집 나는 바이올린을 수정 예제로 몇 가지 규칙을 넣어. 나는 네가 패딩과 마진을 가지고 장난스럽게 생각하고 있다고 생각한다. @Robert가 제안한대로 룰에 규칙을 다시 적용했습니다. 완벽한 솔루션이 아니라 제안으로 피들을 가져 가십시오. 그것은 당신에게 달려있다)

편집 바이올린 : newFiddle

Answer 2

앵커 (태그) 클릭 할 수있는 요소이며, 버튼과 같은 당신의 스타일을하기 때문에, 제공 @sissy 무엇을 확장하기 위해, 할당하는 것이 합리적이다 그 요소에 당신의 색깔. 패딩을 사용하여 텍스트 주위에 여유 공간을줍니다.

header { 
 
    min-height: 20px; 
 
} 
 

 
header a { 
 
    color: #3b4b5d; 
 
    text-decoration: none; 
 
} 
 

 
section h1 { 
 
    margin: 0; 
 
} 
 

 

 
/* TOP NAV CSS */ 
 

 
.top-nav { 
 
    width: 100%; 
 
    margin: auto; 
 
    overflow: hidden; 
 
} 
 

 
.nav-logo img { 
 
    float: left; 
 
    width: 120px; 
 
    padding: 20px 12px 20px 20px; 
 
} 
 

 
.left-nav ul li { 
 
    margin: 10px 16px 0px 16px; 
 
    padding: 0px 0px 0px 24px; 
 
    font-size: 16px; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    float: left; 
 
    text-align: center; 
 
} 
 

 
header a:hover { 
 
    color: #50E3C2; 
 
} 
 

 
.right-nav ul li { 
 
    margin: 10px 16px 0px 16px; 
 
    padding: 0px 24px 0px 0px; 
 
    font-size: 16px; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    float: right; 
 
    text-align: center; 
 
} 
 

 
.right-nav>ul>li:first-child a { 
 
    background-color: purple; 
 
    color: white; 
 
    padding: 10px 12px; 
 
}

<header> 
 
    <div class="top-nav"> 
 
    <div id="branding"> 
 
     <a href="index.html" class="nav-logo"><img src="assets/nav-bar-logo.png" alt="trooops-logo"></a> 
 
    </div> 
 

 
    <nav class="left-nav"> 
 
     <ul> 
 
     <li><a href="discover.html">Discover</a></li> 
 
     <li><a href="blog.html">Blog</a></li> 
 
     </ul> 
 
    </nav> 
 

 
    <div class="right-nav"> 
 
     <ul> 
 
     <li><a href="signup.html">Sign Up</a></li> 
 
     <li><a href="login.html">Log In</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</header>

Answer 3

CSS :

.button { 
    background-color: #4CAF50; 
    border: none; 
    color: white; 
    padding: 15px 32px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    margin: 4px 2px; 
    cursor: pointer; 
} 

HTML :

<a href="#" class="button">Link Button</a>