页面布局之后台管理布局
2017-12-19 本文已影响0人
后来者2016
分析：
- 使用position: fixed 属性完成页面布局
- 内容超过一屏幕时使用：overflow: auto;
- 常用float操作可以单独定义为一个css属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body{
margin: 0 auto;
}
.pg-header{
height: 48px;
background-color: #2459a2;
color: white;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-content .menu{
position: fixed;
top: 48px;
left: 0px;
bottom: 0px;
width: 200px;
background-color: cadetblue;
}
.pg-content .content{
position: fixed;
top: 48px;
right: 0px;
left: 200px;
bottom: 0px;
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">b</div>
</div>
<div class="pg-foot"></div>
</body>
</html>
需求：
- 公司logo
- 登陆头像
- 点击跳转
- 鼠标放上去变色
- 鼠标放上去有下拉框，包含我的资料和注销
- 信箱、铃铛 其后显示数字
小图标网上下载地址：http://fontawesome.io/ 下载后将所有包到导入django，通过link引用css来使用
预备知识：默认字体黑色，鼠标放上去变为红色
.item{
background-color: #dddddd
}
.item:hover{
color: red
}
.item:hover .b{
color: blue
}
web 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body{
margin: 0 auto;
}
.pg-header{
height: 48px;
background-color: #2459a2;
color: white;
line-height: 48px;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-content .menu{
position: absolute;
top: 48px;
left: 0;
bottom: 0;
width: 200px;
background-color: cadetblue;
}
.pg-content .content{
position: absolute;
top: 48px;
right: 0;
bottom: 0;
left: 200px;
overflow: auto;
z-index: 9;
}
.pg-header .logo{
width: 200px;
background-color: darkblue;
text-align: center;
}
.pg-header .user{
width: 150px;
background-color: wheat;
}
.pg-header .user:hover .b{
display: block;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">腾讯科技</div>
<div class="user right" style="position: relative">
<a href="">
<img style="z-index:20;height: 40px;width: 40px;margin-top: 4px;border-radius: 50%;" src="" alt="">
</a>
<div style="display:none;position: absolute;top: 0;right: 0;background-color: #2459a2">
<a style="display: block" href="">我的资料</a>
<a style="display: block" href="">注销</a>
</div>
</div>
</div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
{# <div style="position: fixed;bottom: 0;right: 0;width: 50px;height: 50px;">返回顶部</div>#}
</div>
</div>
<div class="pg-foot"></div>
</body>
</html>
