一、效果如图
二、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>个人博客-主页</title>
<style>
* {
margin: 0;
padding: 0;
}
header {
position: fixed;
background-color: #333;
width: 100%;
box-shadow: 5px 5px 5px #888888;
}
nav {
width: 1200px;
margin: 0 auto;
text-align: right;
}
nav>#blog-name {
position: relative;
color: #fff;
font: italic bold 20px/1 "微软雅黑";
padding: 20px 0;
float: left;
margin-left: 60px;
}
nav>ul,
li {
list-style: none;
display: inline-block;
}
nav a {
display: inline-block;
font: italic bold 15px "微软雅黑";
color: #fff;
padding: 20px 60px;
text-decoration: none;
}
nav a:hover {
background-color: rgb(19, 224, 224);
}
p {
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<header>
<nav>
<div id="blog-name">笑笑是一个码农</div>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">时光轴</a></li>
<li><a href="#">留言</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</header>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
</html>