HTML中的背景颜色

时间:2017-03-25 09:53:12

标签: html css

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

感谢。



.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>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:0)

在这里,我将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>

答案 1 :(得分:0)

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

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

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

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

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

background-color
body

答案 2 :(得分:0)

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

enter image description here

答案 3 :(得分:0)

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