- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是一名新手自由职业者,目前正在为一位同事开发网站。我对编码的响应部分有点陌生。我现在已经编写了一些不错的代码,网站在我看来几乎已经完成,但还需要一些完善。
我的问题是,当我将内容放在导航菜单下时,它以某种方式抵消了导航菜单的背景色。如果有人知道此类错误并可以帮助我修复它,我将非常高兴!
代码如下:
.nav {
border-bottom: 2px solid #25b24a;
text-align: right;
height: 50px;
line-height: 50px;
font-family: "helvetica neue", sans-serif;
text-transform: uppercase;
}
.nav .Logo {
width: 50px;
height: 50px;
background-image: url(../img/logo2.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
float: left;
margin-left: 20px;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
clear: right;
text-decoration: none;
color: #25b24a;
margin: 0 10px;
line-height: 50px;
font-size: 12px;
}
.menu a:hover {
clear: right;
text-decoration: none;
color: #256FB8;
margin: 0 10px;
line-height: 50px;
font-size: 12px;
transition: .6s;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 50px;
display: none;
width: 26px;
float: right;
color: #25b24a;
}
#toggle {
display: none;
}
@media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 2px solid #25a24b;
margin: 0;
color: #25a24b;
background-color: white;
}
.menu a:hover {
display: block;
border-bottom: 2px solid #25a24b;
margin: 0;
color: #256fb8;
}
.menu a.li {
display: block;
}
#toggle:checked+.menu {
display: block;
}
}
#Home {
width: 100%;
height: auto;
}
#Home .banner {
padding-top: 100px;
width: 100%;
height: 300px;
background: #ccc url(../img/headerfoto1.jpg) center center no-repeat;
background-size: cover;
}
.container {
width: 1000px;
height: auto;
margin-left: auto;
margin-right: auto;
}
.container p.home-text {
padding: 0px 20px 20px 20px;
width: 480px;
}
#Home .container .button {
margin-left: 20px;
padding: 10px 20px 10px 20px;
width: 135px;
background: #256fb8;
color: white;
font-family: Gotham, Helvetica Neue, Helvetica, Arial, " sans-serif";
border-bottom: 2px solid #000;
}
#Home .container .button:hover {
background: #25b24a;
transition: .5s;
border-bottom: 2px solid #000;
}
#Home .container .button a {
text-decoration: none;
color: white;
}
/* Mobiel Home */
@media only screen and (max-width: 500px) {
h1 {
font-family: Gotham, Helvetica Neue, Helvetica, Arial, " sans-serif";
font-size: 18px;
color: #256FB8;
padding: 10px 0px 0px 20px;
}
header {
background-color: #fff;
width: 100%;
box-shadow: none;
height: 50px;
}
header nav {
width: 90%;
height: 50px;
margin-left: auto;
margin-right: auto;
}
header nav .Logo {
width: 40px;
height: 40px;
background-image: url(../img/logo2.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
float: left;
margin-top: -34px;
}
header nav a.hamburger {
display: block;
font-size: 24px;
text-align: right;
margin-right: 10px;
margin-top: 10px;
}
header nav ul {
width: 450px;
height: auto;
}
header nav ul li {
padding-left: 5px;
padding-right: 5px;
display: none;
}
#Home .banner {
padding-top: 150px;
width: 100%;
height: 80px;
background: #ccc url(../img/headerfoto1.jpg) center center no-repeat;
background-size: cover;
}
.container {
width: 350px;
height: auto;
margin-left: auto;
margin-right: auto;
}
.container p.home-text {
padding: 0px 4px 4px 15px;
width: 320px;
margin-left: auto;
margin-right: auto;
}
}
<div class="nav">
<div class="Logo">
<!-- Logo in css -->
</div>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
<a class="li" href="#Home"> Home </a>
<a class="li" href="#Diensten"> Diensten </a>
<a class="li" href="#Werkwijze"> Werkwijze </a>
<a class="li" href="#Over-mij"> Over Mij </a>
<a class="li" href="#Contact"> Contact </a>
</div>
</div>
<div id="Home">
<div class="banner">
<!-- banner afbeelding in css -->
</div>
<div class="container">
<h1> Mobile navigation, background-color </h1>
<p class="home-text">
I want the mobile navigation menu to have a white solid background. The problem is; once I put more content into the html it somehow cancels out the background-color in the navigation menu. I hope someone could help me. Thanks!
</p>
<div class="button"> <a href="#Diensten"> button </a> </div>
</div>
</div>
谢谢!
最佳答案
您的内容位于菜单之后,因此显示在主要元素之上。
您需要添加更高的 z-index 才能显示在上方。要使 z-index 生效,您还需要指定与默认位置不同的任何位置(static.将其添加到导航元素
.nav {
position:relative;
z-index: 1;
}
关于html - 手机导航背景色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46705636/
更新的(未保存的)文本行有明亮的粉红色(#ffc286)背景色,更改和保存的文本行有明亮的绿色(#b5ffb5)。任何颜色样式的背景都是相同的。 我在Style Configurator中找不到它(我
这个问题在这里已经有了答案: 9年前关闭。 Possible Duplicate: Change background color of UI elements in eclipse IDE 你们可能
在构建布局时,我注意到 selectableItemBackground 的背景颜色与 UI 其余部分的背景颜色不匹配。为了缓解这种情况,我想导入 {android_sdk}/platforms/{p
我正在努力让 UITableView 后面的颜色成为我想要的灰色。 UITableView 的背景似乎工作正常,但其后面的区域仍然保持白色? 我的观点到此结束。其中只有一个单元格,并且它不是裁剪后的图
我有一个 CALayer 背景使用: CAGradientLayer *bgLayer = [BackgroundLayer blueGradient]; bgLayer.frame = self.v
我有一个水平菜单。我想在菜单周围有一个边框(不是整行,只有空间菜单被覆盖)。当我在 ul 上放置边框时,它覆盖了整行,当我在 li 上放置边框时,它在菜单项之间也有边框。
我正在使用 bootstrap 3.0,以下是我的 HTML 代码,我遇到了背景颜色问题。 HTML代码 Collection
我遇到了一个示例问题,它应该在 JQuery 中的悬停事件上更改背景颜色。(符合 .css("background-color","rgba(78, 175, 212, 0.75)");) 所有其他更
我正在尝试为我的 View 页面提供背景色,但当我想要所有内容时,它总是只给我 3/4 的页面浅蓝色。 (见截图)任何人都可以帮助我吗?非常感谢 这是我使用的CSS代码:背景.css .contain
我正在尝试为 www.livejournal.com 上的所有页面制作时尚的用户样式。我想为文本设置样式并选择具有特定背景颜色的类型输入框,但背景颜色并未在所有输入框上设置,即使 color 已设置。
我正在学习 Bootstrap。我在做一个主题。但是在页面底部,我在页脚标签处添加了页脚背景颜色,它没有改变。并且还注意到 footer 标签的类属性没有显示在 Firebug 检查元素中。出了什么问
我的 CSS 文件包含我的网页显示,网页比屏幕小(如果你知道我的意思)我试图用背景颜色填充容器的外部,但它不起作用。有人可以帮忙吗?这是我的 CSS #container { wid
我使用的是最新版本的 matlab。我正在使用带有 jet 颜色图的 imagesc 命令绘制矩阵。矩阵的背景值为零,在图像中绘制为颜色条上的最低颜色,即深蓝色。有没有办法使背景零值绘制为白色? 谢谢
我一直在研究网站以弄清楚它们是如何工作的。通过下载它们并在 dream weaver cs6 中打开。但是当我在浏览器中打开下载的 html 文件时,除了绿色背景被默认的白色背景替换之外,一切都显示正
我有两个相互重叠的文本框。第一个文本框“TextBox1”由用户输入定义。第二个“TextBox2”由自动完成功能填充。我的目标是让第一个文本框的背景仅对于已键入的文本为白色,以便生成的“TextBo
我正在尝试更改(https://developer.android.com/samples/SlidingTabsBasic/src/com.example.android.common/view/S
我有以下 RelativeLayout 但我想改进它。 (做一个漂亮的设计) .
我有一个 ImageButton,其背景图像具有一定的透明度。默认情况下,按钮在透明像素所在的位置获得灰色背景 - 由于 Holo.Light 主题。我尝试通过 setBackgroundColor(
我有一个 UITableViewController,我正在尝试自定义样式。我已经完成了 95%,但无法从单元格背景中移除奇怪的阴影。我在这个屏幕截图中突出显示了我要删除的内容: 为了尝试解决这个问题
我正在循环中以编程方式创建一些 UIButton,但我在设置按钮的背景颜色时遇到了一些问题。 按钮的颜色始终显示为白色。但是我在背景颜色中只使用 2 种颜色时效果很好。例如:红色:255 绿色:0 蓝
我是一名优秀的程序员,十分优秀!