HTML大作業(yè)

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后臺(tái)管理系統(tǒng)</h1>
</div>
<div class="biaodan">
<div id="xiaobiaoti">
<h4>賬號(hào)登錄</h4>
</div>
<form action="">
<div class="input-group">
<span class="iconfont icon-icon_account"></span>
<input type="text" name="zhanghao" id="zhanghao" placeholder="請(qǐng)輸入賬號(hào)">
</div>
<div class="input-group">
<span class="iconfont icon-mima"></span>
<input type="password" name="mima" id="mima" placeholder="請(qǐng)輸入密碼">
</div>
<div class="input-group">
<span class="iconfont icon-yanzhengma"></span>
<input type="text" name="yanzhengma" id="yanzhengma" placeholder="請(qǐng)輸入驗(yàn)證碼">
</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; /* 設(shè)置相對(duì)定位，作為子元素絕對(duì)定位的參考 */
}

.bg-text {
position: absolute; /* 絕對(duì)定位，相對(duì)于 .bg 元素定位 /
top: 20px; / 距離頂部 20px，可以根據(jù)需要調(diào)整 /
left: 50%; / 水平居中的第一步 /
transform: translateX(-50%); / 水平居中的第二步 /
font-size: 24px; / 字體大小，可以根據(jù)需要調(diào)整 /
color: white; / 文字顏色，可以根據(jù)背景圖調(diào)整 /
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); / 添加文字陰影，增強(qiáng)可讀性 /
white-space: nowrap; / 防止文字換行 /
overflow: hidden; / 隱藏溢出的內(nèi)容 /
text-overflow: ellipsis; / 當(dāng)文字溢出時(shí)顯示省略號(hào) /
}
.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; /* 為圖標(biāo)定位做準(zhǔn)備 /
margin-bottom: 15px; / 輸入組之間的間距 */
}

.input-group .iconfont {
position: absolute; /* 絕對(duì)定位圖標(biāo) /
left: 10px; / 圖標(biāo)距離輸入框左側(cè)的距離 /
top: 50%; / 垂直居中圖標(biāo) /
transform: translateY(-50%); / 精確垂直居中 /
color: #666; / 圖標(biāo)顏色 */
}

.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 ">數(shù)據(jù)面板</span></div>
<div><span class="iconfont icon-guanliyuan ">管理員管理</span></div>
<div><span class="iconfont icon-yonghuguanli">用戶(hù)管理</span></div>
<div><span class="iconfont icon-jichuguanli ">基礎(chǔ)管理</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 ">個(gè)人中心</span></div>
<div><span class="iconfont icon-xitongjiankong">系統(tǒng)監(jiān)控</span></div>
<div><span class="iconfont icon-xitong-gongju ">系統(tǒng)工具</span></div>
<div><span class="iconfont icon-xitongguanli ">系統(tǒng)管理</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>數(shù)據(jù)面板<span class="close-icon">×</span></div>
<div>用戶(hù)管理<span class="close-icon">×</span></div>
<div>功能大全<span class="close-icon">×</span></div>
</div>
<div class="nav1">
<h1>分類(lèi)篩選器</h1>
<div id="h1">狀態(tài)篩選(單):
<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>內(nèi)容展示1
<div id="h3">后臺(tái)生成
<div id="h6">生成條形碼</div>
</div>
<div id="h4">office
<div id="h6">IFRAME預(yù)覽PDF文件</div>
<div id="h6">OFFICE預(yù)覽DOCX文件</div>
</div>
<div id="h5">彈窗
<div id="h6">彈窗分頁(yè)表格</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; /* 讓邊框和內(nèi)邊距包含在元素總高度內(nèi) */
margin-bottom: 15px;
}

.main-top div{
height: 100%; /* 讓 div 高度和 main-top 一致 /
border: 1px solid #c5c8cb;
padding: 5px;
box-sizing: border-box; / 讓邊框和內(nèi)邊距包含在元素總高度內(nèi) */
}
.close-icon {
margin-left: 10px;
color: #999;
cursor: pointer;
transition: color 0.3s;
}

/* 鼠標(biāo)懸停時(shí)改變圖標(biāo)顏色 */
.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/個(gè)人中心.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 ">數(shù)據(jù)面板</span></div>
<div><span class="iconfont icon-guanliyuan ">管理員管理</span></div>
<div><span class="iconfont icon-yonghuguanli">用戶(hù)管理</span></div>
<div><span class="iconfont icon-jichuguanli ">基礎(chǔ)管理</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 ">個(gè)人中心</span></div>
<div><span class="iconfont icon-xitongjiankong">系統(tǒng)監(jiān)控</span></div>
<div><span class="iconfont icon-xitong-gongju ">系統(tǒng)工具</span></div>
<div><span class="iconfont icon-xitongguanli ">系統(tǒng)管理</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>數(shù)據(jù)面板<span class="close-icon">×</span></div>
<div>用戶(hù)管理<span class="close-icon">×</span></div>
<div>用戶(hù)管理CRUD<span class="close-icon">×</span></div>
<div>功能大全<span class="close-icon">×</span></div>
<div>個(gè)人中心<span class="close-icon">×</span></div>
<div>個(gè)人中心新版<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">基本設(shè)置</div>
<div class="left-top-bottom">
<div class="zhanghao"><span class="iconfont icon-icon_account">賬號(hào)信息</span></div>
<div class="mima"><span class="iconfont icon-mima">密碼</span></div>
</div>
</div>
<div class="left-bottom">
<div class="left-bottom-top">數(shù)據(jù)管理</div>
<div class="left-bottom-bottom"><span class="iconfont icon-rizhi1">操作日志</span></div>
</div>
</div>
<div class="right">
<div class="right-top">個(gè)人信息</div>
<div class="right-bottom">
<div class="zhanghao2">賬號(hào)
<input type="text" placeholder="請(qǐng)輸入賬號(hào)">
</div>
<div class="xingming">*姓名
<input type="text" placeholder="請(qǐng)輸入姓名">
</div>
<div class="dianhua">電話
<input type="tel" placeholder="請(qǐng)輸入電話">
</div>
<div class="youxiang">郵箱
<input type="email" placeholder="請(qǐng)輸入郵箱">
</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; /* 讓邊框和內(nèi)邊距包含在元素總高度內(nèi) /
margin-bottom: 15px;
}
.main-top div{
height: 100%; / 讓 div 高度和 main-top 一致 /
border: 1px solid #c5c8cb;
padding: 5px;
box-sizing: border-box; / 讓邊框和內(nèi)邊距包含在元素總高度內(nèi) */
}
.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
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容