Цвет фона для панели навигации

Question

Я очень новичок в HTML/CSS, и у меня возникают проблемы с структурированием и окраской моего навигационного бара. У меня две проблемы.

1. У меня есть пункты меню в уль списке и они отображаются рядный, но нужно, чтобы они автоматически структурировать себя в блоке, если ширина экрана меняется.

2. Мне нужно изменить цвет фона «Adoptly» на красный. Я мог только цветное слово или стиль вручную, что не работает при изменении полей.

Это то, что в настоящее время выглядит мой код как:

HTML:

<div class="header"> 
    <div class="container"> 
    <ul> 
     <li>Adoptly</li> 
     <li>About</li> 
     <li>Animals</li> 
     <li>Blog</li> 
     <li>Events</li> 
    </ul> 
    </div> 
</div> 

<div class="jumbotron"> 
    <div class="container"> 
    </div> 
</div> 

<div class="supporting"> 
    <div class="container"> 
    </div> 
</div> 

<div class="footer"> 
    <div class="container"> 
    </div> 
</div> 

CSS:

html, body { 
    margin: 0; 
    padding: 0; 
    font-family: 'Montserrat', sans-serif; 
} 

.container { 
    max-width: 940px; 
    margin: 0 auto; 
    padding: 0; 
} 

.header { 
    background-color: rgb(48, 98, 126); 
    height: 75px; 
} 

.header li { 
    display: inline; 
    list-style-type: none; 
    color: white; 
    font-size: 25px; 
    margin-left: 20px; 
} 

.header ul { 
    margin-top: 20px; 
    margin-bottom: 0; 
} 

.header li:first-child { 
    background-color: red; 
} 

@media (max-width: 500px) { 
    ul li { 
    width: 100%; 
    } 
} 

Это то, что бар нав подразумевается выглядеть (игнорировать все o Ther чем навигационная панель): https://s3.amazonaws.com/codecademy-content/projects/adoptly/index.html

Спасибо за вашу помощь,

Джош

Answer 1

1) Вы можете сделать это, регулируя текущий медиа запрос, чтобы:

@media (max-width: 500px) { 
    .header li { 
    display:block; 
    } 
} 

2) Вы можно сделать это, установив LI на inline-block и изменив высоту и line-height на 75px, чтобы соответствовать высоте заголовка. Вам также потребуется удалить верхний край из UL, а также установить UL height на 75px.

.header li { 
    display: inline-block; 
    list-style-type: none; 
    color: white; 
    font-size: 25px; 
    margin-left: 20px; 
    height:75px; 
    line-height:75px; 
} 

.header ul { 
    height:75px; 
    margin-bottom: 0; 
} 

Bootply example

Answer 2

Вот пример маленький, лучше работать с%, чем РХ, для адаптивного дизайна, а также использовать HTML5 этикетку.

 html, 
 
     body { 
 
     margin: 0; 
 
     padding: 0; 
 
     font-family: 'Montserrat', sans-serif; 
 
     } 
 
     .container { 
 
     display: block; 
 
     position: relative; 
 
     left: 20%; 
 
     /* center responsive */ 
 
     max-width: 60%; 
 
     width: 100%; 
 
     /* Better work with % for responsive design */ 
 
     height: auto; 
 
     margin: 0; 
 
     } 
 
     header { 
 
     display: block; 
 
     position: relative; 
 
     background-color: rgba(48, 98, 126, .9); 
 
     /* .9 opacity of color ;) */ 
 
     height: 75px; 
 
     } 
 
     ul { 
 
     display: block; 
 
     position: relative; 
 
     height: 75px; 
 
     line-height: 75px; 
 
     list-style: none; 
 
     max-height: 75px; 
 
     } 
 
     ul li { 
 
     color: white; 
 
     float: left; 
 
     padding: 0 2rem; 
 
     } 
 
     .item-red { 
 
     background-color: red; 
 
     } 
 
     /* 
 
      MEDIASCREEN 
 
      */ 
 
     @media screen and (max-width: 1700px) { 
 
     .container { 
 
      left: 15%; 
 
      /* center responsive */ 
 
      max-width: 70%; 
 
     } 
 
     } 
 
     /* End media screen */ 
 
     @media screen and (max-width: 1500px) { 
 
     .container { 
 
      left: 10%; 
 
      /* center responsive */ 
 
      max-width: 80%; 
 
     } 
 
     } 
 
     /* End media screen */ 
 
     @media screen and (max-width: 1400px) { 
 
     .container { 
 
      left: 7.5%; 
 
      /* center responsive */ 
 
      max-width: 85%; 
 
     } 
 
     } 
 
     /* End media screen */ 
 
     @media screen and (max-width: 980px) { 
 
     .container { 
 
      left: 0; 
 
      /* center responsive */ 
 
      max-width: 100%; 
 
     } 
 
     ul { 
 
      height: auto; 
 
      line-height: auto; 
 
      list-style: none; 
 
      max-height: 100%; 
 
     } 
 
     ul li { 
 
      background: #CCCCCC; 
 
      display: block; 
 
      float: none; 
 
     } 
 
     } 
 
     /* End media screen */

<!DOCTYPE html> 
 
<html lang="es-ES"> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css"> 
 
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> 
 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'> 
 
    <link rel="stylesheet" href="style.css"> 
 

 
</head> 
 

 
<body> 
 
    <header> 
 
    <div class="container"> 
 
     <ul> 
 
     <li class="item-red">Adoptly</li> 
 
     <li>About</li> 
 
     <li>Animals</li> 
 
     <li>Blog</li> 
 
     <li>Events</li> 
 
     </ul> 
 
    </div> 
 
    </header> 
 

 
    <main> 
 
    <div class="jumbotron"> 
 
     <div class="container"> 
 
     </div> 
 
    </div> 
 

 
    <div class="supporting"> 
 
     <div class="container"> 
 
     </div> 
 
    </div> 
 
    </main> 
 

 
    <footer> 
 
    <div class="container"> 
 
    </div> 
 
    </footer> 
 

 
</body> 
 

 
</html>

Answer 3

сделать класс для слова adoptly, как показано выше. Давайте назовите его. В классе .main вы будете использовать цвет фона и цвет, затем используйте прокладку со всех сторон, чтобы получить правильное соотношение.

Как только вы справляетесь с полями, все будет выглядеть спокойно.

Это будет делать трюк.

.main { 
    color:white; 
    background-color: #e52364; 
    font-size: 28px; 
    padding: 22px 32px 22px 32px; 
}