HTML大作业

html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/denglu01.css">
<link rel="stylesheet" href="./css/公共.css">
<link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
<div class="left">
<div class="bg">
<div class="bg-text">
<h2>django-vue-lyadmin pro版</h2>
</div>
</div>
</div>
<div class="right">
<div class="biaoti">
<h1>Lyadmin后台管理系统</h1>
</div>
<div class="biaodan">
<div id="xiaobiaoti">
<h4>账号登录</h4>
</div>
<form action="">
<div class="input-group">
<span class="iconfont icon-icon_account"></span>
<input type="text" name="zhanghao" id="zhanghao" placeholder="请输入账号">
</div>
<div class="input-group">
<span class="iconfont icon-mima"></span>
<input type="password" name="mima" id="mima" placeholder="请输入密码">
</div>
<div class="input-group">
<span class="iconfont icon-yanzhengma"></span>
<input type="text" name="yanzhengma" id="yanzhengma" placeholder="请输入验证码">
</div>
<div>
<input type="button" id="denglu" value="登录">
</div>
<div id="xiahuaxian">--------------其他登录方式--------------</div>
</form>
<div id="qitafangshi"><span class="iconfont icon-weixin"></span></div>
</div>
</div>
</body>
</html>
css：
.left {
height: 100%;
width: 500px;
float: left;
}
.bg {
background-image: url(./images/auth_banner.jpg);
background-size: cover;
background-position: center;
height: 100%;
width: 500px;
position: relative; /* 设置相对定位，作为子元素绝对定位的参考 */
}

.bg-text {
position: absolute; /* 绝对定位，相对于 .bg 元素定位 /
top: 20px; / 距离顶部 20px，可以根据需要调整 /
left: 50%; / 水平居中的第一步 /
transform: translateX(-50%); / 水平居中的第二步 /
font-size: 24px; / 字体大小，可以根据需要调整 /
color: white; / 文字颜色，可以根据背景图调整 /
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); / 添加文字阴影，增强可读性 /
white-space: nowrap; / 防止文字换行 /
overflow: hidden; / 隐藏溢出的内容 /
text-overflow: ellipsis; / 当文字溢出时显示省略号 /
}
.right {
height: 100vh;
width: calc(100% - 500px);
float: left;
display: flex;
flex-direction: column; / 垂直排列子元素 /
justify-content: center;
align-items: center;
}
.biaoti {
display: flex;
align-items: center; / 垂直居中 /
font-size: 2rem;
font-weight: bold;
margin-bottom: 5rem;
}
.biaodan {
display: flex;
flex-direction: column; / 垂直排列子元素 /
}
.biaodan div {
margin-bottom: 2rem; / 子元素之间的间距 */
}

xiaobiaoti {

text-align: left;
}

zhanghao,

mima,

yanzhengma{

width: 35rem;
height: 4rem;
}

denglu{

border:none;
outline:none;
background-color: rgb(0, 98, 236);
color:white;
cursor: pointer;
width:35rem;
height: 3rem;
border-radius:1.5rem;
}

denglu:hover{

background-color: rgb(0, 72, 172);
}
.input-group {
position: relative; /* 为图标定位做准备 /
margin-bottom: 15px; / 输入组之间的间距 */
}

.input-group .iconfont {
position: absolute; /* 绝对定位图标 /
left: 10px; / 图标距离输入框左侧的距离 /
top: 50%; / 垂直居中图标 /
transform: translateY(-50%); / 精确垂直居中 /
color: #666; / 图标颜色 */
}

.input-group input {
padding-left: 35px;
width: 100%;
padding: 8px 8px 8px 35px;
border: 1px solid #ccc;
border-radius: 3px;
}

xiahuaxian{

text-align: center;

}

qitafangshi{

display: flex;
justify-content: center;
align-items: center; 
cursor: pointer;

}

qitafangshi:hover{

color: green;

}

html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/公共.css">
<link rel="stylesheet" href="./css/guanli.css">
<link rel="stylesheet" href="./font2/iconfont.css">
</head>
<body>
<div class="container">
<div class="top">
<div class="mingcheng">
<div class="help-icon">帮</div>
<div class="id">django-vue-lyadmin pro版</div>
</div>
<div class="user">
<div class="rizhi"><span class="iconfont icon-rizhi1">更新日志</span></div>
<div><span class="iconfont icon-fullscreen"></span></div>
<div><sapn class="inconfont icon-shuimian"></sapn></div>
<div><span class="inconfont icon-guanliyuan">管理员</span></div>
</div>
</div>
<div class="bottom">
<div class="nav">
<div><span class="iconfont icon-ic_dashboard ">DashBoard</span></div>
<div><span class="iconfont icon-shujumianban ">数据面板</span></div>
<div><span class="iconfont icon-guanliyuan ">管理员管理</span></div>
<div><span class="iconfont icon-yonghuguanli">用户管理</span></div>
<div><span class="iconfont icon-jichuguanli ">基础管理</span></div>
<div><span class="iconfont icon-shangchengguanli">商城管理</span></div>
<div><span class="iconfont icon-liuchengguanli">流程管理</span></div>
<div id="special"><span class="iconfont icon-gongnengdaquan ">功能管理</span></div>
<div><span class="iconfont icon-gerenzhongxin ">个人中心</span></div>
<div><span class="iconfont icon-xitongjiankong">系统监控</span></div>
<div><span class="iconfont icon-xitong-gongju ">系统工具</span></div>
<div><span class="iconfont icon-xitongguanli ">系统管理</span></div>
<div><span class="iconfont icon-rizhi">日志管理</span></div>
<div><span class="iconfont icon-gongneng"></span></div>
</div>
<div class="main">
<div class="main-top">
<div>DashBoar<span class="close-icon">×</span></div>
<div>数据面板<span class="close-icon">×</span></div>
<div>用户管理<span class="close-icon">×</span></div>
<div>功能大全<span class="close-icon">×</span></div>
</div>
<div class="nav1">
<h1>分类筛选器</h1>
<div id="h1">状态筛选(单):
<div id="h2"><span class="iconfont icon-gongneng ">功能按钮</span></div>
<div id="h2"><span class="iconfont icon-dayinji ">打印/水印</span></div>
<div id="h2"><span class="iconfont icon-erweima ">二维码</span></div>
<div id="h2"><span class="iconfont icon-shipin ">视频播放器</span></div>
<div id="h2"><span class="iconfont icon-qita ">其他</span></div>
</div>
</div>
<div class="nav2">
<h1>内容展示1
<div id="h3">后台生成
<div id="h6">生成条形码</div>
</div>
<div id="h4">office
<div id="h6">IFRAME预览PDF文件</div>
<div id="h6">OFFICE预览DOCX文件</div>
</div>
<div id="h5">弹窗
<div id="h6">弹窗分页表格</div>
<div id="h6">支付dialog弹窗</div>
<div id="h6">图片选择器</div>
</div>
</h1>
</div>
</div>
</div>
</body>
</html>
css：
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.top{
height: 5rem;
background-color: #003460;
display: flex;
justify-content: space-between;
}
.mingcheng{
width: 40rem;
height: 100%;
display: flex;;
align-items: center;
}
.help-icon {
background-color: rgb(0, 195, 255);
color: white;
width: 24px;
height: 24px;
border-radius: 4px;
text-align: center;
line-height: 24px;
margin-right: 10px;
margin-left: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.help-icon {
background-color: blue;
color: white;
border-radius: 4px;
padding: 4px 8px;
margin-right: 10px;
font-size: 18px;
font-weight: bold;
text-align: center;
border: 1px solid blue;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
}
.id{
font-size: 20px;
text-align: center;
color: white;
}
.user{
display: flex;
align-items: center;
text-align: center;
gap: 20px;
color: white;
width: 30rem;
height: 100%;
}
.bottom{
flex: 1;
display: flex;
}
.nav{
width: 30rem;
height: 100%;
background-color: #003460;
}
.nav div{
width: 100%;
height: 5rem;
color: white;
font-size: 20px;
text-align: center;
line-height: 5rem;
cursor: pointer;
}

special{

background-color: antiquewhite;
color: #003460;
}
.nav div:hover{
background-color:antiquewhite;
color: #003460;
font-weight: bold;
}
.main{
flex: 1;
height: 100%;
}
.main-top{
font-size: 15px;
display: flex;
height: 3rem;
align-items: start;
border: 1px solid #c5c8cb;
box-sizing: border-box; /* 让边框和内边距包含在元素总高度内 */
margin-bottom: 15px;
}

.main-top div{
height: 100%; /* 让 div 高度和 main-top 一致 /
border: 1px solid #c5c8cb;
padding: 5px;
box-sizing: border-box; / 让边框和内边距包含在元素总高度内 */
}
.close-icon {
margin-left: 10px;
color: #999;
cursor: pointer;
transition: color 0.3s;
}

/* 鼠标悬停时改变图标颜色 */
.close-icon:hover {
color: #ff0000;

}
h1{
margin-left: 15px;
}
.nav1{
width: 100%;
height: 20rem;
border: 1px solid #c5c8cb;
margin-bottom: 15px;
}

h1{

display: flex;
align-items: center;
font-size: 15px;
}

h2{

cursor: pointer;
border: 1px solid #cecfd0;
border-radius: 2rem;
padding: 5px;
margin-left: 10px;
color:gray;
}

h2:hover{

background-color: #0756bd;
color: white;
}
.nav2{
width: 100%;
height: 46rem;
}

h3,#h4,#h5{

width: 100%;
height: 12rem;
margin-bottom: 15px;
font-size: 15px;
padding: 10px;
border: 1px solid #c5c8cb;
border-radius: 1.5rem;
}

h6{

margin-left: 15px;
color: gray;
border: 1px solid #cecfd0;
display: inline-block;
padding: 2px 5px;
background-color: #0756bd;
color: white;
}
03
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/公共.css">
<link rel="stylesheet" href="./css/个人中心.css">
<link rel="stylesheet" href="./font2/iconfont.css">
<link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
<div class="container">
<div class="top">
<div class="mingcheng">
<div class="help-icon">帮</div>
<div class="id">django-vue-lyadmin pro版</div>
</div>
<div class="user">
<div class="rizhi"><span class="iconfont icon-rizhi1">更新日志</span></div>
<div><span class="iconfont icon-fullscreen"></span></div>
<div><sapn class="inconfont icon-shuimian"></sapn></div>
<div><span class="inconfont icon-guanliyuan">管理员</span></div>
</div>
</div>
<div class="bottom">
<div class="nav">
<div><span class="iconfont icon-ic_dashboard ">DashBoard</span></div>
<div><span class="iconfont icon-shujumianban ">数据面板</span></div>
<div><span class="iconfont icon-guanliyuan ">管理员管理</span></div>
<div><span class="iconfont icon-yonghuguanli">用户管理</span></div>
<div><span class="iconfont icon-jichuguanli ">基础管理</span></div>
<div><span class="iconfont icon-shangchengguanli">商城管理</span></div>
<div><span class="iconfont icon-liuchengguanli">流程管理</span></div>
<div><span class="iconfont icon-gongnengdaquan ">功能管理</span></div>
<div id="special"><span class="iconfont icon-gerenzhongxin ">个人中心</span></div>
<div><span class="iconfont icon-xitongjiankong">系统监控</span></div>
<div><span class="iconfont icon-xitong-gongju ">系统工具</span></div>
<div><span class="iconfont icon-xitongguanli ">系统管理</span></div>
<div><span class="iconfont icon-rizhi">日志管理</span></div>
<div><span class="iconfont icon-gongneng"></span></div>
</div>
<div class="main">
<div class="main-top">
<div>DashBoar<span class="close-icon">×</span></div>
<div>数据面板<span class="close-icon">×</span></div>
<div>用户管理<span class="close-icon">×</span></div>
<div>用户管理CRUD<span class="close-icon">×</span></div>
<div>功能大全<span class="close-icon">×</span></div>
<div>个人中心<span class="close-icon">×</span></div>
<div>个人中心新版<span class="close-icon">×</span></div>
</div>
<div class="bottom1">
<div class="left">
<div class="left-top">
<div class="left-top-top">
<span class="iconfont icon-guanliyuan icon-circle"></span>
<h1>管理员</h1>
<div id="guanliyuan">管理员</div>
</div>
<div class="left-top-zhong">基本设置</div>
<div class="left-top-bottom">
<div class="zhanghao"><span class="iconfont icon-icon_account">账号信息</span></div>
<div class="mima"><span class="iconfont icon-mima">密码</span></div>
</div>
</div>
<div class="left-bottom">
<div class="left-bottom-top">数据管理</div>
<div class="left-bottom-bottom"><span class="iconfont icon-rizhi1">操作日志</span></div>
</div>
</div>
<div class="right">
<div class="right-top">个人信息</div>
<div class="right-bottom">
<div class="zhanghao2">账号
<input type="text" placeholder="请输入账号">
</div>
<div class="xingming">*姓名
<input type="text" placeholder="请输入姓名">
</div>
<div class="dianhua">电话
<input type="tel" placeholder="请输入电话">
</div>
<div class="youxiang">邮箱
<input type="email" placeholder="请输入邮箱">
</div>
<div class="xingbie">
<div class="xingbie">
<label>性别：</label>
<select name="gender">
<option value="male">男</option>
<option value="female">女</option>
<option value="other">其他</option>
</select>
</div>
</div>

<div class="submit-container">
<button type="button" class="submit-button">完成</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
css：
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.top{
height: 5rem;
background-color: #003460;
display: flex;
justify-content: space-between;
}
.mingcheng{
width: 40rem;
height: 100%;
display: flex;;
align-items: center;
}
.help-icon {
background-color: rgb(0, 195, 255);
color: white;
width: 24px;
height: 24px;
border-radius: 4px;
text-align: center;
line-height: 24px;
margin-right: 10px;
margin-left: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.help-icon {
background-color: blue;
color: white;
border-radius: 4px;
padding: 4px 8px;
margin-right: 10px;
font-size: 18px;
font-weight: bold;
text-align: center;
border: 1px solid blue;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
}
.id{
font-size: 20px;
text-align: center;
color: white;
}
.user{
display: flex;
align-items: center;
text-align: center;
gap: 20px;
color: white;
width: 30rem;
height: 100%;
}
.bottom{
flex: 1;
display: flex;
}
.nav{
width: 30rem;
height: 100%;
background-color: #003460;
}
.nav div{
width: 100%;
height: 5rem;
color: white;
font-size: 20px;
text-align: center;
line-height: 5rem;
cursor: pointer;
}
.nav div:hover{
background-color:antiquewhite;
color: #003460;
font-weight: bold;
}

special{

background-color: antiquewhite; 
color: #003460;

}
.main{
flex: 1;
height: 100%;
}
.main-top{
font-size: 15px;
display: flex;
height: 3rem;
align-items: start;
border: 1px solid #c5c8cb;
box-sizing: border-box; /* 让边框和内边距包含在元素总高度内 /
margin-bottom: 15px;
}
.main-top div{
height: 100%; / 让 div 高度和 main-top 一致 /
border: 1px solid #c5c8cb;
padding: 5px;
box-sizing: border-box; / 让边框和内边距包含在元素总高度内 */
}
.close-icon {
margin-left: 10px;
color: #999;
cursor: pointer;
transition: color 0.3s;
}
.close-icon:hover {
color: #ff0000;
}
.bottom1{
height: 65rem;
display: flex;
flex-direction:row;
justify-content: space-between;
padding:20px ;
box-sizing: border-box;
}
.left{
width: 40rem;
height: 50rem;
display: flex;
flex-direction: column;
margin-right: 5px;
}
.left-top{
width: 100%;
height: 30rem;
}
.left-bottom{
width: 100%;
height: 10rem;
}
.left-top {
border: 1px solid #999;
border-radius: 1.5rem;
}
.left-bottom {
border: 1px solid #999;
border-radius: 1.5rem;
margin-top: 5px;
}
.left-top-top {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.left-top-top .iconfont.icon-guanliyuan {
font-size: 64px;
}
.icon-circle {
display: inline-flex;
justify-content: center;
align-items: center;
border: 1px solid gray;
border-radius: 50%;
width: 60px;
height: 60px;
font-size: 24px;
}

guanliyuan {

font-size: 20px;
margin-top: 10px;
border: 1px solid #ccc;
border-radius: 3rem;
background-color: blue;
color: white;
padding: 10px 20px;
}
.left-top-zhong{
margin-left: 10px;
margin-top: 30px;
color: #999;
}
.zhanghao {
color: blue;
padding-left: 10px;;
margin-bottom: 15px;
margin-top: 15px;
}
.mima {
padding-left: 10px;
}
.left-bottom-top{
margin-left: 10px;
margin-top: 10px;
color: #999;
}
.left-bottom-bottom{
margin-left: 10px;
margin-top: 20px;
}
.right{
display: flex;
flex-direction: column;
width: 80rem;
height: 50rem;
}
.right-top{
display: flex;
align-items: center;
width: 100%;
height: 8rem;
border: 1px solid #999;
border-radius: 1rem;
font-size: 20px;
padding-left: 20px;
}
.right-bottom{
width: 100%;
flex: 1;
border: 1px solid #999;
border-radius: 1rem;
margin-top: 5px;
display: flex;
flex-direction: column;
}
.zhanghao2{
padding-top: 15px;
font-size: 15px;
display: flex;
flex-direction: row;
width: 100%;
height: 5rem;
margin-top: 30px;
margin-left: 40px;
}
.xingming{
padding-top: 15px;
font-size: 15px;
display: flex;
flex-direction: row;
width: 100%;
height: 5rem;
margin-top: 10px;
margin-left: 40px;
}
.dianhua{
padding-top: 15px;
font-size: 15px;
display: flex;
flex-direction: row;
width: 100%;
height: 5rem;
margin-top: 10px;
margin-left: 40px;
}
.youxiang{
padding-top: 15px;
font-size: 15px;
display: flex;
flex-direction: row;
width: 100%;
height: 5rem;
margin-top: 10px;
margin-left: 40px;
}
.xingbie{
padding-top: 15px;
padding-left: 15px;
font-size: 15px;
display: flex;
flex-direction: row;
}
.xingbie select {
padding: 5px;
font-size: 15px;
border: 1px solid #c5c8cb;
border-radius: 3px;
margin-left: 10px;
}
.submit-container {
display: flex;
justify-content: center;
margin-top: 20px;
color: white;
cursor: pointer;
font-size: 10px;
}


屏幕截图 2025-05-06 182757.png
屏幕截图 2025-05-06 182929.png
屏幕截图 2025-05-06 182954.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容