<!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>
body{
width: 100%;
/* 上下外边距为0,左右外边距是自动,这样设置可以让div水平居中 */
margin:0 auto;
}
.head{
position: fixed;
top: 0;
width: 100%;
height: 10%;
/* margin: 0 auto; */
}
.footer{
height: 60px;
background-color: gray;
color: white;
text-align: center;
font-size: 12px;
font-family: 'Microsoft Yahei';
height:60px; line-height:60px;
}
.content{
display: flex;
margin-top: 60px;
}
ul {
width: 100%;
list-style-type: none;
margin: 0;
padding-left: 20%;
overflow: hidden;
background-color: gray;
float: left;
}
li:hover {
background-color: rgb(104, 100, 100);
}
li{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
float:left;
}
.left{
background-color: azure;
width: 70%;
height: 700px;
}
</style>
</head>
<body>
<div class="head">
<ul>
<li>首页</li>
<li>书籍</li>
<li>文章</li>
<li>随笔</li>
</ul>
</div>
<div class="content">
<div class="left">
<div>最新书籍</div>
<div>书籍列表</div>
</div>
<div class="right">
<div>书籍分类</div>
<div>最热书籍</div>
</div>
</div>
<div class="footer">CopyRight © 2020-2022 浮生若梦 All Rights Reserved</div>
</body>
</html>
html导航栏顶端固定
最新推荐文章于 2023-12-07 12:38:47 发布