Bootply example

Question

我是HTML / CSS的新手，我在构建和着色导航栏时遇到了麻烦。我有两个问题。

我将菜单项放在ul列表中，它们以内联方式显示，但如果屏幕宽度发生变化，我需要它们自动在块中自行构建。
我需要改变＆＃34;通过＆＃34;的背景颜色。变红了。我只能对单词进行着色或手动设置样式，这在边距变化时不起作用。

这就是我的代码目前的样子：

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

这就是导航栏的外观（忽略导航栏以外的所有内容）：https://s3.amazonaws.com/codecademy-content/projects/adoptly/index.html

感谢您的帮助，

约什

Answer 1

1）您可以通过将当前的媒体查询调整为：

来完成此操作

inline-block

2）您可以通过将LI设置为line-height并将高度更改为75px至height来匹配标题高度来实现此目的。您还需要从UL中删除上边距，并将UL 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; }。

$email->attachments([
    'photo.png' => [
        'file' => '/full/some_hash.png',
        'mimetype' => 'image/png',
        'contentId' => 'my-unique-id'
    ]
]);

Bootply example

Answer 2

这是一个小例子，更好地使用％而不是PX，用于响应式设计，并使用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

如上所示，为“通过”这个词创建一个类。让我们称之为.main。在.main类中你会处理背景颜色和颜色，然后使用所有边的填充来获得正确的比例

一旦你处理了边缘，一切都会很均匀。

这就是诀窍。

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

导航栏的背景颜色

3 个答案:

Bootply example