框架预览：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">//载入图标库
<style type="text/css">
body{
margin: 0;
}
.header{
height:48px;
background-color: #2459a2;
color: white;
line-height: 48px; //将字体上下居中
}
.header .icons{
padding:0 10px;//内变宽
font-size: 2px;
}
.header .fort{
display: inline-block;
padding: 0px 5px;
background-color: red;
border-radius: 64%;
line-height: 20px; //行高
}
.header .icons:hover{//鼠标滑过就会出现背景框
background-color: #020d1f
}
.header .logo{
width: 200px;
text-align: center;//字体左右居中
}
.header .user{
height: 48px;
margin-right: 77px;
padding: 0 20px;
position: relative;
}
.header .user:hover{
background-color: #020d1f
}
.header .user .a img{
z-index: 20 ;
width: 40px;
height:40px;
margin-top: 4px;
border-radius: 50%;
}
.header .user .b {
z-index: 20;
background-color: ghostwhite;
color: black;
position: absolute;
top:48px;
right: 40px;
width: 160px;
display: none;
}
.header .user:hover .b{
display: block;
}
.header .user .b a{
display: block;
}
.left{
float: left ;
}
.right{
float: right;
}
.content .menu{
position: fixed;
top: 48px;
left: 0;
bottom: 0;
width: 200px;
background-color: #dddddd;
}
.content .menu1{
position: absolute;
top:48px;
right:0;
bottom:0;
left: 200px;
background-color: purple;
z-index: 10;
overflow: auto; //设置滚动条，永远固定在某个窗口位置上，relative--单独无意义，absolute--第一次定位，可以指定，滚动时，就不在了
}
</style>
</head>
<body>
<div class="header">
<div class="logo left">
Python
</div>
<div class="user right ">
<a class="a" href="#">
<img src=" 416.jpg">
</a>
<div class="b">
<a>我的资料</a>
<a>修改资料</a>
<a>进入空间</a>
<a>退出登入</a>
</div>
</div>
<div class="icons right">
<i class="fa fa-tv" aria-hidden="true"></i>
<span style="font-size: 2px">数据中心</span>
</div>
<div class="icons right">
<i class="fa fa-envelope-o" aria-hidden="true"> 我的邮件</i>
<span class="fort">99+</span>
</div>
<div class="icons right">
<i class="fa fa-user-circle" aria-hidden="true"> 我的主页</i>
</div>
</div>
<div class="content">
<div class="menu left"></div>
<div class="menu1 left">
</div>
</div>
<div class="footer"></div>
<script src="commons.js"></script>
</body>
</html>
时间： 2024-10-19 09:01:09