Question

我有背景颜色，我需要在中间添加另一种颜色。例如，中间的这个（https://yifymovie.re) 是白色的。另一个问题是如何让中间的酒吧。

感谢。

＆＃13;

.BarSize {
  position: absolute;
  top: 50px;
  left: 360px;
  width: 1200px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 9px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

＆＃13;

<link rel="stylesheet" href="https://yifymovie.re/css/style.css" type="text/css" media="all">

<div class="BarSize">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </li>
  </ul>

＆＃13;

Answer 1

在这里，我将body设置为flex容器（此处为game for learning flex），以使其子容器居中。在没有flex的旧浏览器中，您可以使用margin: 0 auto。

在main-sheet内，有div白色背景。

请注意，我没有在px中使用固定偏移量，因此此页面适用于所有屏幕尺寸。

https://jsfiddle.net/03p2ysvL/2/

body {
  background-color: black;
  display: flex;
  justify-content: center;
}

.main-sheet {
  min-width: 80%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 9px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

<html>
<head>
  <title>abc</title>
</head>
<body>

<div class="main-sheet">

  <div class="BarSize">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>
  </div>
  <div style="background-color: white">
    I have white background!
  </div>

</div>

</body>
</html>

Answer 2

就像@ilyaigpetrov在评论中已经说过的那样，你需要在那里添加一些元素。

最常见的方法是在其中放置一个包含其他所有内容的新元素（此处为<div id="page">）。然后是导航栏（<div class="BarSize">），然后是实际内容的新div（<div class="content">）。

然后在CSS中，我们需要为max-width设置#page属性。否则整个屏幕会覆盖整个屏幕，你不会在两侧看到黑色区域。

另外，我们需要将background-color的{{1}}设置为白色，将.content的{{1}}设置为灰色或黑色。

所以这就是你想要做的事情：

background-color

body

Answer 3

我设法改变了将样式添加到.wrapper类的颜色。

Answer 4

.BarSize {
  position: absolute;
  top: 50px;
  left: 360px;
  width: 1200px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 9px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

<link rel="stylesheet" href="https://yifymovie.re/css/style.css" type="text/css" media="all">

<div class="BarSize">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </li>
  </ul>

HTML中的背景颜色

4 个答案: