作业分析
管理员登录 2025-03-22 153942.png
管理系统 2025-03-22 162138.png
代码实现
代码1示例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理员登录</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
body{
display: flex;
flex-direction: column;
background: linear-gradient(135deg,#abdcff,#0396ff);
}
.header{
width: 100%;
height: 72px;
display:flex ;
justify-content: center;
}
.main{
width: 100%;
flex: 1;
}
.header .content{
width: 1200px;
height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
}
.header .content a{
color: white;
text-decoration: none;
}
.header .content img{
width: 100px;
height: 30px;
}
.header .content a:hover{
color: #dff9fb;
font-size: 18px;
font-weight: 600;
}
.main{
display: flex;
justify-content: center;
align-items: center;
}
.login-box{
width: 400px;
height: 330px;
background-color: rgba(255,255,255,0.8);
border-radius: 8px;
box-shadow: #888 10px 10px 20px;
}
.header{
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 18px;
letter-spacing: 3px;
}
.login{
height: 270px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.login p{
height: 40px;
/* background-color: orange; */
display: flex;
justify-content: space-evenly;
align-items: center;
}
.login p input{
width: 260px;
height: 32px;
}
.login p button{
outline: none;
border: none;
width: 300px;
height: 32px;
border-radius: 16px;
background-color: #4872f6;
color: white;
}
.login p button:hover{
background-color: #143bbd;
font-weight: 600;
}
</style>
</head>
<body>
<div class="header">
<div class="content">
<img src="./images/logo.png" alt="">
<a href="#">去登录</a>
</div>
</div>
<div class="main">
<div class="login-box">
<div class="header">
管理员登录
</div>
<div class="login">
<p>
<label for="zhanghao">账号：</label>
<input type="text" name="zhanghao"
id="zhanghao" placeholder="请输入账号">
</p>
<p>
<label for="mima">密码：</label>
<input type="password" name="mima"
id="mima" placeholder="请输入密码">
</p>
<p>
<button>登录</button>
</p>
</div>
</div>
</div>
</body>
</html>
代码2示例
<!DOCTYPE html>
<html lang="zh-CN">
<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/demo02.css">
</head>
<body>
<!-- 左侧导航栏 -->
<div class="left-nav">
<ul>
<li>首页</li>
<li>人员管理</li>
<li>系统管理</li>
<li>日志管理</li>
</ul>
</div>
<div class="right-content">
<div class="right-top">
<h1>管理系统</h1>
</div>
<div class="right-middle">
<p>这里是中间内容区域，您可以根据实际需求添加具体的管理功能展示。</p>
</div>
<div class="right-bottom">
<p>版权所有 © 2024 管理系统</p>
</div>
</div>
</body>
</html>
代码2样式示例
body {
display: flex;
background: rgba(135deg,#abdcff,#0396ff);
}
.left-nav {
width: 200px;
background-color: #6d7991;
color:aliceblue;
padding-top: 20px;
}
.left-nav ul {
list-style-type: none;
padding: 0;
}
.left-nav ul li {
padding: 15px 20px;
cursor: pointer;
transition: background-color 0.3s;
}
.left-nav ul li:hover {
background-color: #45455d;
}
.right-content {
flex: 1;
color: aliceblue;
display: flex;
flex-direction: column;
background-color: #2B2F3B;
}
.right-top {
background-color: #30364a;
padding: 20px;
border-bottom: 1px solid #30364a;
}
.right-middle {
flex: 1;
padding: 20px;
overflow-y: auto;
}
.right-bottom {
background-color: #30364a;
padding: 10px;
border-top: 1px solid #30364a;
text-align: center;
}
