html5和css3已经变得非常疯狂，并且做了我以前从未见过的事情.总共有3个问题

我想开始创建一个简单的网站，我现在正在工作的导航栏和主体。

下面是代码，稍后我会解释问题。

html {
font-family: poppins, "Open Sans", "Inter", Arial, Helvetica, sans-serif;
background-image: url("river-bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
.navlink {
font-size: 1em;
padding: 1em;
text-decoration: none;
color: #fff;
background: rgba(0, 0, 0, 0.6);
transition: all 0.4s ease-in;
}
#navbar {
float: right;
padding: 3em;
}
.navlink:hover {
background: rgba(0, 0, 0, 0)
}
#p1 {
float: right;
}
#p2 {
float: right;
}
body {
width: 80%;
height: 100%;
margin-top: 5em;
margin-bottom: 5em;
}
#main-content-wrapper {
width: 100%;
height: 100%;
background: #00f100;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap" rel="stylesheet">
</head>
<header>
<div id="navbar">
<a href="#" class="navlink" id="p1">page1</a>
<a href="#" class="navlink" id="p2">page2</a>
</div>
</header>
<div id="logospace"></div>
<body>
<div id="main-content-wrapper">
b
</div>
</body>
</html>

问题1:链接被交换了，不管我做了什么。导航链接1和2是向右浮动的，但导航链接1总是在右边结束，无论我如何扭曲和翻转代码。

问题2:导航显然是在主体之外，但它仍然漂浮在主体的右侧，而不是整个html标签或网站。

问题3:正文出现在导航栏上方，尽管它应该在导航栏下方。

这简直要把我逼疯了，我正在寻找解决办法。

Thanks in advance

你有一些<body></body>以外的元素
你真的需要float: right在.navbar里面吗?
既然你是使用百分比尺寸的身体，你需要指定它的父html元素的大小以及。

html {
font-family: poppins, "Open Sans", "Inter", Arial, Helvetica, sans-serif;
background-image: url("river-bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
.navlink {
font-size: 1em;
padding: 1em;
text-decoration: none;
color: #fff;
background: rgba(0, 0, 0, 0.6);
transition: all 0.4s ease-in;
}
#navbar {
float: right;
padding: 3em;
}
.navlink:hover {
background: rgba(0, 0, 0, 0)
}
/*
#p1 {
float: right;
}
#p2 {
float: right;
}
*/
body {
width: 80%;
height: 100%;
margin-top: 5em;
margin-bottom: 5em;
}
#main-content-wrapper {
width: 100%;
height: 100%;
background: #00f100;
}

/* added */
#navbar {
display: flex; /* removes gap between children */
}
html
{
width: 100vw;
height: 100vh;
background-color: pink;
}
body
{
background-color: blue;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div id="navbar">
<a href="#" class="navlink" id="p1">page1</a>
<a href="#" class="navlink" id="p2">page2</a>
</div>
</header>
<div id="logospace"></div>
<div id="main-content-wrapper">
b
</div>
</body>
</html>

相关内容

最新更新

热门标签：