公共样式
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size:62.5%;
}
html,body{
width: 100%;
height: 100%;
}
1.第一个网页
.bg{
width: 100%;
height: 100%;
display: flex;
}
.login-bg{
width: 100%;
height: 100%;
display: flex;
}
.left{
width:35rem;
height:100%;
/* background-color:blue; */
background-image: url(../images/beijing.jpg);
background-size: cover;
background-position: center;
}
.title{
font-size:2em;
margin-top:1.5rem;
margin-left:1.5rem;
color:white;
}
.title-p{
font-size:1.5rem;
margin-left:1.5rem;
color:aliceblue
}
.bottom{
font-size:1.5rem;
margin-left:1.5rem;
margin-top:65rem;
color:white;
}
.right{
width:120rem;
height:100%;
/* background-color:green; */
display: flex;
justify-content: center;
align-items: center;
}
.login-box{
width:35rem;
height:35rem;
/* background-color:red; */
display: flex;
flex-direction: column;
gap:10px;
}
.inside{
font-size: 3rem;
width:4rem;
height:4rem;
background-color: rgb(49, 206, 234);
position:absolute;
margin-top:3rem;
margin-left:1.5rem;
display: flex;
justify-content: center;
align-items: center;
}
#in{
font-size: 3rem;
color:white;
}
.login-title{
font-size: 2.8rem;
margin-top:3rem;
margin-left:6rem;
color:black;
}
.denglu{
font-size: 1.5rem;
color: rgb(47, 153, 199);
margin-left: 1.5rem;
}
.text{
gap:10px;
}
#zhanghao{
width: 30rem;
height: 30px;
margin-left:1.5rem;
}
#mima{
width: 30rem;
height: 30px;
margin-left:1.5rem;
margin-top: 2rem;
}
#yanzhengma{
width: 30rem;
height: 30px;
margin-left:1.5rem;
margin-top:2.3rem;
}
#denglu1{
border: none;
outline: none;
background-color: rgb(0, 98, 236);
color:white;
cursor: pointer;
width:29rem;
height:3rem;
border-radius: 1.5rem;
margin-left:1.5rem;
}
#denglu:hover{
background-color: rgb(0, 72, 172);
}
#other{
margin-left:13rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="bg">
<div class="login-bg">
<div class="left">
<h1 class="title">django-vue-lyadmin pro版</h1>
<p class="title-p">Vue3 + Django4.x易于DIY + 低代码开平台</p>
<p class="bottom">Copyright © 2022 django-vue-lyadmin All rights reserved.</p>
</div>
<div class="right">
<div class="login-box">
<div class="inside"><p id="in">帮</p> </div>
<span class="login-title">lyadmin后台管理系统</span>
<p class="denglu">账号登录</p>
<div class="text">
<input type="text" name="zhanghao" id="zhanghao" placeholder="请输入账号" required>
<input type="password" name="mima" id="mima" placeholder="请输入密码" required>
<input type="text" name="yanzhengma" id="yanzhengma" placeholder="请输入验证码" required>
</div>
<div>
<input type="button" id="denglu1" value="登录">
</div>
<p id="other">其他登录方式</p>
</div>
</div>
</div>
</div>
</body>
</html>
效果
image.png
2.第二个网页
.houtai{
width:100%;
height:100%;
display: flex;
flex-direction: column;
}
.top{
width:100%;
height:7rem;
background-color: rgb(0, 52, 96);
display: flex;
}
.inside{
font-size: 3rem;
width:4rem;
height:4rem;
background-color: rgb(9, 79, 184);
position:absolute;
border-radius: 5px;
margin-left:2rem;
margin-top:1rem;
}
#in{
font-size: 3rem;
color:white;
text-align: center;
}
.a{
color:white;
font-size: 2rem;
margin-left:7rem;
margin-top:1.5rem;
}
.p{
color:gold;
margin-top: 1.5rem;
margin-left: 83rem;
}
.bottom{
width:100%;
height:93rem;
display: flex;
flex-direction:row;
}
.left{
width:20rem;
height:100%;
background-color: rgb(0,52,96);
}
.left div{
width: 100%;
height:5rem;
color:white;
font-size: 1.6rem;
text-align: start;
padding-left: 25px;
line-height: 5rem;
cursor: pointer;
}
.left i{
margin-right: 1rem;
}
.left div:hover{
background-color: aliceblue;
color:rgb(102, 169, 252);
font-weight: 700;
}
.right{
height:100%;
width:100%;
/* background-color:aliceblue; */
display: flex;
flex-direction: column;
gap:5rem;
}
.shang{
width:100%;
height:10rem;
background-color:aliceblue;
margin-top:3rem;
gap:2rem;
/* border-style: dashed; */
display: flex;
flex-direction: column;
}
.shang p{
font-size: 25px;
color: black;
margin-left: 4rem;
}
.shang span{
font-size: 1.5rem;
display: flex;
flex-direction: row;
gap:3rem;
margin-left: 4rem;
}
.shang div{
width: 12rem;
height:3rem;
border-radius: 5rem;
border:solid;
text-align: center;
font-size:1.5rem;
}
.xia{
width: 100%;
height:40rem;
display: flex;
flex-direction: column;
background-color: aliceblue;
gap:2rem;
padding-left: 4rem;
/* border-style: dotted; */
}
.xia p{
font-size: 25px;
}
.xia div{
width: 120rem;
height: 8rem;
background-color: rgb(212, 220, 228);
display: flex;
flex-direction: column;
gap: 0.7rem;
padding: 1rem;
}
.xia div span{
display: flex;
gap:2rem;
}
.xia div span p{
font-size: 1.5rem;
border-radius: 5px;
border: solid;
width:17rem;
text-align: center;
background-color: rgb(59, 156, 201);
color:white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/guanli1.css">
<link rel="stylesheet" href="./font/iconfont.css">
<body>
<div class="houtai">
<div class="top">
<div class="inside"><p id="in">帮</p></div>
<p class="a">django-vue-lyadmin-pro后台管理系统</p>
<div class="p">更新日志
<i class="iconfont icon-fangda"></i>
<i class="iconfont icon-moonyueliang"></i>
<i class="iconfont icon-yingyongshichang"></i>
<i class="iconfont icon-guanzi">管理员</i>
</div>
</div>
<div class="bottom">
<div class="left">
<div><i class="iconfont icon-igw-f-dashboard-add"></i>DashBoard</div>
<div><i class="iconfont icon-shujumianban"></i>数据面板</div>
<div><i class="iconfont icon-guanliyuanguanli"></i>管理员管理</div>
<div><i class="iconfont icon-yonghuguanli"></i>用户管理</div>
<div><i class="iconfont icon-jichuguanli"></i>基础管理</div>
<div><i class="iconfont icon-shangchengguanli"></i>商城管理</div>
<div><i class="iconfont icon-liuchengguanli"></i>流程管理</div>
<div><i class="iconfont icon-gongnengdaquan"></i>功能大全</div>
<div><i class="iconfont icon-gerenzhongxin"></i>个人中心</div>
<div><i class="iconfont icon-xitongjiankong"></i>系统监控</div>
<div><i class="iconfont icon-xitonggongju"></i>系统工具</div>
<div><i class="iconfont icon-xitongguanli"></i>系统管理</div>
<div><i class="iconfont icon-rizhiguanli"></i>日志管理</div>
</div>
<div class="right">
<div class="shang">
<p>分类筛选器</p>
<span>状态筛选(单):
<div><i class="iconfont icon-gongnenganniu">功能按钮</i></div>
<div><i class="iconfont icon-dayinji_o"></i>打印/水印</div>
<div><i class="iconfont icon-erweima"></i>二维码</div>
<div><i class="iconfont icon-shipinbofang"></i>视频播放器</div>
<div><i class="iconfont icon-qita"></i>其他</div>
</span>
</div>
<div class="xia">
<p>内容展示1</p>
<div>
<h2>后台生成</h2>
<span>
<p>生成条形码唛头</p>
</span>
</div>
<div>
<h2>office</h2>
<span>
<p>IFRAME预览PDF文件</p>
<p>OFFICE预览DOCX文件</p>
</span>
</div>
<div>
<h2>弹窗</h2>
<span>
<p>弹窗分页表格</p>
<p>支付dialog弹窗</p>
<p>图片选择器</p>
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
效果
image.png
3.第三个网页
.houtai{
width:100%;
height:100%;
display: flex;
flex-direction: column;
}
.top{
width:100%;
height:7rem;
background-color: rgb(0, 52, 96);
display: flex;
}
.inside{
font-size: 3rem;
width:4rem;
height:4rem;
background-color: rgb(9, 79, 184);
position:absolute;
border-radius: 5px;
margin-left:2rem;
margin-top:1rem;
}
#in{
font-size: 3rem;
color:white;
text-align: center;
}
.a{
color:white;
font-size: 2rem;
margin-left:7rem;
margin-top:1.5rem;
}
.p{
color:gold;
margin-top: 1.5rem;
margin-left: 83rem;
}
.bottom{
width:100%;
height:93rem;
display: flex;
flex-direction:row;
}
.left{
width:20rem;
height:100%;
background-color: rgb(0,52,96);
}
.left div{
width: 100%;
height:5rem;
color:white;
font-size: 1.6rem;
text-align: start;
padding-left: 25px;
line-height: 5rem;
cursor: pointer;
}
.left i{
margin-right: 1rem;
}
.left div:hover{
background-color: aliceblue;
color:rgb(102, 169, 252);
font-weight: 700;
}
.right{
width: 100%;
height: 100%;
background-color: white;
display:flex;
flex-direction: row;
gap:1.5rem;
}
.zuo{
width:25rem;
height:35rem;
background-color:aliceblue;
margin-left: 1.5rem;
margin-top:1.5rem;
display: flex;
flex-direction: column;
}
#span{
display: flex;
flex-direction: column;
align-items: center;
margin-top:1rem;
font-size: 16px;
}
.iconfont icon-guanliyuan{
font-size: 24px !important;
}
.g{
width:3rem;
height:2rem;
background-color: rgb(64, 140, 254);
}
#s{
font-size: 1.5rem;
color: black;
display: flex;
flex-direction: column;
gap:2rem;
margin-left: 2rem;
margin-top:5rem;
}
.you{
width:100%;
height:40rem;
background-color:aliceblue;
margin-top:1.5rem;
}
.shang{
width:100%;
height:4rem;
/* background-color: aqua; */
font-size: 2rem;
}
.xia{
width:100%;
height:100%;
/* background-color: aquamarine; */
display: flex;
flex-direction: column;
}
#x{
margin-left: 5rem;
margin-right: 2rem;
display: flex;
flex-direction: column;
gap:2rem;
font-size: 1.5rem;
}
#zhanghao,
#xingming,
#dianhua,
#youxiang{
width: 90rem;
height:3rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/guanli2.css">
<link rel="stylesheet" href="./font/iconfont.css">
<body>
<div class="houtai">
<div class="top">
<div class="inside"><p id="in">帮</p></div>
<p class="a">django-vue-lyadmin-pro后台管理系统</p>
<div class="p">更新日志
<i class="iconfont icon-fangda"></i>
<i class="iconfont icon-moonyueliang"></i>
<i class="iconfont icon-yingyongshichang"></i>
<i class="iconfont icon-guanzi">管理员</i>
</div>
</div>
<div class="bottom">
<div class="left">
<div><i class="iconfont icon-igw-f-dashboard-add"></i>DashBoard</div>
<div><i class="iconfont icon-shujumianban"></i>数据面板</div>
<div><i class="iconfont icon-guanliyuanguanli"></i>管理员管理</div>
<div><i class="iconfont icon-yonghuguanli"></i>用户管理</div>
<div><i class="iconfont icon-jichuguanli"></i>基础管理</div>
<div><i class="iconfont icon-shangchengguanli"></i>商城管理</div>
<div><i class="iconfont icon-liuchengguanli"></i>流程管理</div>
<div><i class="iconfont icon-gongnengdaquan"></i>功能大全</div>
<div><i class="iconfont icon-gerenzhongxin"></i>个人中心</div>
<div><i class="iconfont icon-xitongjiankong"></i>系统监控</div>
<div><i class="iconfont icon-xitonggongju"></i>系统工具</div>
<div><i class="iconfont icon-xitongguanli"></i>系统管理</div>
<div><i class="iconfont icon-rizhiguanli"></i>日志管理</div>
</div>
<div class="right">
<div class="zuo">
<span id="span">
<i class="iconfont icon-guanliyuan"></i>
<h2>管理员</h2>
<p id="g">管理员</p>
</span>
<span id="s">
<p>基本设置</p>
<div><i class="iconfont icon-zhanghaoxinxi">账号信息</i></div>
<div><i class="iconfont icon-mima">密码</i></div>
<div>数据管理</div>
<div><i class="iconfont icon-caozuorizhi">操作日志</i></div>
</span>
</div>
<div class="you">
<div class="shang">个人信息</div>
<div class="xia">
<span id="x">
<div>
<label for="zhanghao">账号</label>
<input type="text" name="zhanghao" id="zhanghao" placeholder="admin" required>
<div>账号信息用于登录，系统不允许修改</div>
</div>
<div>
<label for="xingming">姓名</label>
<input type="text" name="xingming" id="xingming" placeholder="管理员" required>
</div>
<div>
<label for="dianhua">电话</label>
<input type="text" name="dianhua" id="dianhua">
</div>
<div>
<label for="youxiang">邮箱</label>
<input type="text" name="youxiang" id="youxiang">
</div>
<form>
<label for="xingbie">性别</label>
<input type="radio" id="gender-male" name="gender" value="male">
<label for="gender-male">男</label>
<input type="radio" id="gender-female" name="gender" value="female">
<label for="gender-female">女</label>
<input type="radio" id="gender-weizhi" name="gender" value="weizhi">
<label for="gender-weizhi">未知</label>
</form>
<div id="btn">
<input type="button" id="baocun" value="保存">
</div>
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
效果
image.png
