我有背景颜色,我需要在中间添加另一种颜色。例如,中间的这个(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;
答案 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)
答案 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>