关于HTML网页中导航栏重叠的问题
我在写HTML网页时，在附加导航栏时遇到了重叠的问题。第一开始其实是导航栏收到下面方框css的影响，我就单独隔离了导航栏的CSS，但是隔离后出现了重叠现象下面是重叠时的样子：
下面这个是导航栏本来的样子：
跪求大佬帮我看看是哪里出的问题，不胜感激！
以下是我的html和css的code
html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MY poem</title>
<link rel="stylesheet" type="text/css" href="css/poem0.css">
<link rel="icon" type="image/x-icon" href="img/logo/logo.ico">
</head>
<body>
<br>
<div id = "title000">
<div class='ribbon'>
<a href="introduction.html" target="_blank"><span>Seif-Introduction</span></a>
<a href="School.html" target="_blank"><span>MY School</span></a>
<a href="achievement.html" target="_blank"><span>Achievement</span></a>
<a href="poem.html" target="_blank"><span>My Poem</span></a>
<a href="contact.html" target="_blank"><span>Contact</span></a>
</div>
</div>
<h1>MY POEM</h1>
<br>
<h3>Author：Zichen Cao</h3>
<br><hr><br><br>
<div class="left">
<a href="poem/Circle Arounding.html" target="_blank">Circle Arounding</a><br><br><br>
<a href="poem/She's far away.html" target="_blank">She's far away</a><br><br><br>
<a href="poem/Dunes and waterfalls.html" target="_blank">Dunes and waterfalls</a><br><br><br>
<a href="poem/Everything's flowing.html" target="_blank">Everything's flowing</a><br><br><br>
<a href="poem/Fade to light.html" target="_blank">Fade to light</a><br>
</div>
<div class="right">
<a href="poem/Interstitial space.html" target="_blank">Interstitial space</a><br><br><br>
<a href="poem/Never see July.html" target="_blank">Never see July</a><br><br><br>
<a href="poem/The wind shifts.html" target="_blank">The wind shifts</a><br><br><br>
<a href="poem/To one coming north.html" target="_blank">To one coming north</a><br><br><br>
<a href="poem/If gardon.html" target="_blank">If gardon</a><br>
</div>
</body>
</html>
CSS code:
@charset "utf-8";
/* CSS Document */
* { margin: 0;padding: 0;}/*消除顶部空白*/
body{
background-color: #CCFFFF;
}
#title000 {
all: initial;
}
#title000 * {
all: unset;
}
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: green;
color: white;
}
.left,.right {
text-align: center;
}
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
body{ margin:0; height:100%}
html{ height:100%} /*兼容div高度100%*/
h1{
text-align: center;
font-family: SimHei;
font-weight: bold;
}
h3{
text-align: center;
color: #696969;
margin-left: 0%;
}
div{
font-family: KaiTi;
font-weight: bold;
font-size: 19px;
}
#title000 * {
display: flex;
justify-content: center;
position: absolute;
top: 10px;
margin: auto;
}
#title000 *:after,
#title000 *:before {
margin-top: 0.5em;
content: "";
display: flex;
;
border: 1.5em solid #fff;
}
#title000 *:after {
border-right-color: transparent;
}
#title000 *:before {
border-left-color: transparent;
}
#title000 * a:link,
#title000 * a:visited {
color: #000;
text-decoration: none;
height: 3.5em;
overflow: hidden;
}
#title000 * span {
background: #fff;
display: inline-block;
line-height: 3em;
padding: 0 1.5em;
margin-top: 0.5em;
position: relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s;
/* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s;
/* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s;
/* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s;
/* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
#title000 * a:hover span {
background: #FFD204;
margin-top: 0;
}
#title000 * span:before {
content: "";
position: absolute;
top: 3em;
left: 0;
border-right: 0.5em solid #9B8651;
border-bottom: 0.5em solid #fff;
}
#title000 * span:after {
content: "";
position: absolute;
top: 3em;
right: 0;
border-left: 0.5em solid #9B8651;
border-bottom: 0.5em solid #fff;
}
大哥 你导航的div绝对定位了。。。
#title000 * {
display: flex;
justify-content: center;
position: absolute;
position: absolute;你把这个去掉就知道了 本帖最后由 zpy2 于 2021-4-29 08:25 编辑
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MY poem</title>
<link rel="stylesheet" type="text/css" href="css/poem0.css">
<link rel="icon" type="image/x-icon" href="img/logo/logo.ico">
<style>
.over-flex{
display :flex;
justify-content :center;
align-items :center
}
</style>
</head>
<body>
<br>
<div class='ribbon over-flex'>
<a href="introduction.html" target="_blank"><span>Seif-Introduction</span></a>
<a href="School.html" target="_blank"><span>MY School</span></a>
<a href="achievement.html" target="_blank"><span>Achievement</span></a>
<a href="poem.html" target="_blank"><span>My Poem</span></a>
<a href="contact.html" target="_blank"><span>Contact</span></a>
</div>
<h1>MY POEM</h1>
<br>
<h3>Author：Zichen Cao</h3>
<br><hr><br><br>
<div class="left">
<a href="poem/Circle Arounding.html" target="_blank">Circle Arounding</a><br><br><br>
<a href="poem/She's far away.html" target="_blank">She's far away</a><br><br><br>
<a href="poem/Dunes and waterfalls.html" target="_blank">Dunes and waterfalls</a><br><br><br>
<a href="poem/Everything's flowing.html" target="_blank">Everything's flowing</a><br><br><br>
<a href="poem/Fade to light.html" target="_blank">Fade to light</a><br>
</div>
<div class="right">
<a href="poem/Interstitial space.html" target="_blank">Interstitial space</a><br><br><br>
<a href="poem/Never see July.html" target="_blank">Never see July</a><br><br><br>
<a href="poem/The wind shifts.html" target="_blank">The wind shifts</a><br><br><br>
<a href="poem/To one coming north.html" target="_blank">To one coming north</a><br><br><br>
<a href="poem/If gardon.html" target="_blank">If gardon</a><br>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MY poem</title>
<link rel="stylesheet" type="text/css" href="css/poem0.css">
<link rel="icon" type="image/x-icon" href="img/logo/logo.ico">
<style>
.over-flex{
display :flex;
justify-content :center;
align-items :center
}
</style>
</head>
<body>
<br>
<div class='ribbon over-flex'>
<a href="introduction.html" target="_blank"><span>Seif-Introduction</span></a>
<a href="School.html" target="_blank"><span>MY School</span></a>
<a href="achievement.html" target="_blank"><span>Achievement</span></a>
<a href="poem.html" target="_blank"><span>My Poem</span></a>
<a href="contact.html" target="_blank"><span>Contact</span></a>
</div>
<h1>MY POEM</h1>
<br>
<h3>Author：Zichen Cao</h3>
<br><hr><br><br>
<div class="left">
<a href="poem/Circle Arounding.html" target="_blank">Circle Arounding</a><br><br><br>
<a href="poem/She's far away.html" target="_blank">She's far away</a><br><br><br>
<a href="poem/Dunes and waterfalls.html" target="_blank">Dunes and waterfalls</a><br><br><br>
<a href="poem/Everything's flowing.html" target="_blank">Everything's flowing</a><br><br><br>
<a href="poem/Fade to light.html" target="_blank">Fade to light</a><br>
</div>
<div class="right">
<a href="poem/Interstitial space.html" target="_blank">Interstitial space</a><br><br><br>
<a href="poem/Never see July.html" target="_blank">Never see July</a><br><br><br>
<a href="poem/The wind shifts.html" target="_blank">The wind shifts</a><br><br><br>
<a href="poem/To one coming north.html" target="_blank">To one coming north</a><br><br><br>
<a href="poem/If gardon.html" target="_blank">If gardon</a><br>
</div>
</body>
</html>
页:
[1]