gpt4 book ai didi

html -
背景不显示

转载 作者:太空宇宙 更新时间:2023-11-04 11:32:19 24 4
gpt4 key购买 nike

我制作了两个独立的部分,有两个独立的背景。为什么这两个 div 不显示。

我试图让 Navbar 位于顶部,然后另一个部分没有连接到它下面的 Navbar,但它根本就没有出现,我想知道为什么。多谢你们!

                                            HTML
<!DOCTYPE html>
<html>
<head>
<title>
Hair by Michelle
</title>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
<div class="all">
<div class="navbar">
<ul> <h1>Hair By Michelle</h1>
<li class="home"><a href="#">home</a></li>
<li class="about"><a href="#">about</a></li>
<li class="availability"><a href="http://hairbymichelle.simplybook.me/sheduler/manage/">appointments</a></li>
<li class="contact"><a href="#">contact</a></li>
</ul>
</div>


<img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle">
</div>
<div class="hours">
<h1>Hours</h1>

</div>
</div>

                                           CSS

body {
background: gray;
background-image: url("http://i.jootix.com/r/abstract-hair-design-abstract-hair-design-1920x1080.jpg")
}
.navbar {
text-align: center;
background-color: #323232;
position: fixed;
width: 100%;
z-index:100;
}
.navbar h1 {
text-align: center;
text-shadow: -2px 1px 13px;
color: white;
}
.navbar li {
display: inline;
border-right: 2px solid black;
margin: 10px;
padding-right: 25px;
color: white;
}
.navbar li:last-child {
border-right:none;
}
.navbar li a{
text-decoration: none;
text-shadow: 2px;


}
.navbar li a:link {
color: white;
}
.navbar li a:visited {
color: white;
}
.navbar li a:active {
color: green;
}
.navbar li a:hover {
color: brown;

}
.pic1 {
width: 200px;
height: 200px;
border-radius: 100%;
margin-top:5px;
position: absolute;
z-index: 200;

}
.hours h1 {
background-color: #323232;
z-index: 300;
}

最佳答案

它就在那里,但隐藏在您的导航栏和图片后面。您已将导航栏和图像设置为 position: fixedposition: absolute所以它们从 DOM 流中移除。 <h1>位于顶部,因为它在 DOM 流中,就此而言基本上是第一个元素。如果设置 padding: "150px"你至少可以看到它。

您可能应该考虑一下重组。查看this有关定位的一些有用信息。

关于html - <div> 背景不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31954175/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com