时间戳

首页 > 解决方案 > 为什么导航栏后没有显示我的文字？

html - 为什么导航栏后没有显示我的文字？

问题描述

我对这整个 HTML/CSS 很陌生。在查阅了一些教程后，我设法制作了一个基本的导航栏，但现在的问题是我输入的任何文本都没有出现在导航栏下。我错过了什么吗？

HTML：

body{
    margin:0;
}

nav{
    position: fixed;
    top:0;
    width:100%;
    background-color:#f2bbac ;
    float: right;
    height:70px;
    font-family: 'Quicksand', sans-serif;
}
nav ul{
   list-style: none;
   padding:0;
   margin:0;
}
nav a{
    text-decoration: none;
    font-size: 20px;  
    color: white;
    text-transform: uppercase;
}
nav a:hover{
    color:gray;
}
nav li{
    display: inline-block;
    margin-left: 40px;
    padding: 20px;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
    <link href ="stylesheets/mainstyle.css"rel="StyleSheet" type="text/css">
    <title>books</title>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
</head>
<body>

    <nav>
        <ul>
            <li><a href="mainpage.html">Home</a></li>
            <li><a href="aboutpage.html">About</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>
    </nav>
    <h1>hello there. testing</h1>
</body>
<script src="script.js" async defer></script>
</html>

标签： htmlcss

解决方案

这是由于position: fixed;. nav它使底层内容从顶部开始。你必须给h1. 我之前刚刚添加了一个body垫片h1

body {
    margin: 0;
}
	
nav {
    position: fixed;
	top: 0;
	width: 100%;
	background-color: #f2bbac;
	float: right;
	height: 70px;
	font-family: 'Quicksand', sans-serif;
}
		
nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
		
nav a {
	text-decoration: none;
	font-size: 20px;
	color: white;
	text-transform: uppercase;
}
		
nav a:hover {
	color: gray;
}
		
nav li {
	display: inline-block;
	margin-left: 40px;
	padding: 20px;
}
<!DOCTYPE html>
<html lang="en-us">

<head>
    <link href ="stylesheets/mainstyle.css"rel="StyleSheet" type="text/css">
    <title>books</title>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
</head>

<body>
    <nav>
        <ul>
            <li><a href="mainpage.html">Home</a></li>
            <li><a href="aboutpage.html">About</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>
    </nav>
    <div style="height: 50px;width: 100%;"></div>
    <h1>hello there. testing</h1>
</body>
<script src="script.js" async defer></script>

</html>

推荐阅读