web第二次作业

一.后台管理系统首页代码

1.html代码

<!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/demo01.css">

</head>

<body>

<div id="container">

<div class="left">

<div>

<div class="logo">

<img src="../img/logo.png" alt="">

<span>OPENLAB管理系统</span>

</div>

<div class="header-img">

<img src="../img/tx.png" alt="">

<h2>管理员:星</h2>

</div>

<ul class="nav">

<li>首页</li>

<li>系统管理</li>

<li>用户管理</li>

<li>店铺管理</li>

<li>订单管理</li>

<li>积分管理</li>

</ul>

</div>

<div class="exit">

<span>安全退出</span>

</div>

</div>

<div class="right">

<div class="header">

<span>收起菜单</span>

<span>OPENLAB管理系统</span>

<span>管理员:星</span>

</div>

<div class="main">

<div class="content">

<h2>用户信息管理</h2>

<div class="line"><p></p><div>妖娆的分割线</div><p></p></div>

<div class="search-box">

<div>

<label for="username">账号:</label>

<input type="text" placeholder="请输入账号">

</div>

<div>

<label for="eamil">邮箱:</label>

<input type="email" placeholder="请输入邮箱">

</div>

<div>

<button>搜索</button>

</div>

</div>

<div class="line"><p></p><div>妖娆的分割线</div><p></p></div>

<div class="tb-title">

<div>ID</div>

<div>账号</div>

<div>密码</div>

<div>头像</div>

<div>邮箱</div>

<div>状态</div>

<div>操作</div>

</div>

<div class="tb-content">

<div>001</div>

<div>tom</div>

<div>******</div>

<div><img src="../img/tx.png" alt=""></div>

<div>tom@openlab.com</div>

<div><span class="s-active">启用</span></div>

<div>

<button class="edit">编辑</button>

<button class="disable">禁用</button>

<button class="delete">删除</button>

</div>

</div>

<div class="tb-content">

<div>002</div>

<div>jerry</div>

<div>******</div>

<div><img src="../img/tx.png" alt=""></div>

<div>jerry@openlab.com</div>

<div><span class="s-active">启用</span></div>

<div>

<button class="edit">编辑</button>

<button class="disable">禁用</button>

<button class="delete">删除</button>

</div>

</div>

</div>

</div>

<div class="footer">

<span>版权所有,翻版必究</span>

</div>

</div>

</div>

</body>

</html>

2.style.css代码

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

html,body{

width: 100%;

height: 100%;

}

3.demo01.css代码

#container{

width: 100%;

height: 100%;

display: flex;

}

.left{

width: 300px;

height: 100%;

background-color: #203453;

display: flex;

flex-direction: column;

justify-content: space-between;

}

.left > div:nth-of-type(1){

display: flex;

flex-direction: column;

align-items: center;

gap: 30px;

}

.left .logo{

width: 100%;

height: 50px;

background-color: #f5f5f5;

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

}

.logo img{

width: 40px;

height: 40px;

}

.logo span{

font-size: 20px;

font-weight: 600;

letter-spacing: 3px;

}

.left .header-img{

width: 100%;

/* background-color: antiquewhite; */

color: white;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.left .header-img img{

width: 100px;

height: 100px;

border-radius: 50%;

}

.left .nav{

width: 90%;

list-style: none;

/* background-color: salmon; */

}

.nav li,

.exit{

width: 100%;

height: 50px;

font-size: 18px;

color: white;

cursor: pointer;

line-height: 50px;

text-align: center;

}

.nav li:hover,

.exit:hover{

background-color: white;

color: #203453;

font-weight: 600px;

}

.left .exit{

width: 100%;

height: 50px;

/* background-color: aquamarine; */

}

.right{

height: 100%;

flex: 1;

background-color: #f2f2f1;

display: flex;

flex-direction: column;

}

.right .header,

.right .footer{

height: 50px;

color: #333;

background-color: #f5f5f5;

}

.right .header{

border-bottom: solid 1px #ccc;

display: flex;

justify-content: space-between;

align-items: center;

padding-left: 20px;

padding-right: 20px;

}

.header span:nth-of-type(1){

display: inline-block;

width: 100px;

height: 30px;

background-color: #ddd;

border-radius: 8px;

line-height: 30px;

text-align: center;

font-size: 14px;

cursor: pointer;

}

.header span:nth-of-type(2){

font-size: 20px;

font-weight: 600;

}

.right .footer{

border-top: solid 1px #ccc;

font-size: 12px;

color: #ccc;

line-height: 50px;

text-align: center;

}

.main{

flex: 1;

padding: 10px;

}

.main .content{

width: 100%;

height: 100%;

padding: 30px;

background-color: white;

border-radius: 10px;

}

.main h2{

color: #444;

}

.main .line{

display: flex;

flex-direction: row;

align-items: center;

}

.line p{

flex: 1;

height: 2px;

background-color: #ccc;

}

.line div{

width: 120px;

font-size: 12px;

color: #ccc;

text-align: center;

}

.main .search-box{

padding: 10px;

display: flex;

gap: 50px;

}

.search-box label{

font-size: 20px;

font-weight: 500;

}

.search-box input{

width: 260px;

height: 30px;

outline: none;

border: solid 1px #888;

border-radius: 3px;

padding: 5px;

}

.search-box button{

width: 120px;

height: 30px;

border: none;

background-color: #1094d5;

color: white;

letter-spacing: 2px;

cursor: pointer;

border-radius: 3px;

}

.tb-title,

.tb-content{

width: 100%;

height: 80px;

font-weight: 700;

align-items: center;

display: flex;

justify-content: space-evenly;

border-bottom: solid 2px #555;

}

.tb-title >div:nth-of-type(1),

.tb-content >div:nth-of-type(1),

.tb-title >div:nth-of-type(3),

.tb-content >div:nth-of-type(3),

.tb-title >div:nth-of-type(4),

.tb-content >div:nth-of-type(4),

.tb-title >div:nth-of-type(6),

.tb-content >div:nth-of-type(6)

{

width: 120px;

}

.tb-title >div:nth-of-type(2),

.tb-content >div:nth-of-type(2){

width: 200px;

}

.tb-title >div:nth-of-type(5),

.tb-content >div:nth-of-type(5){

width: 220px;

}

.tb-title >div:nth-of-type(7),

.tb-content >div:nth-of-type(7){

flex: 1;

}

.tb-content{

font-weight: 500;

border-bottom: solid 1px #888;

}

.tb-content >div>img{

width: 50px;

height: 50px;

border-radius: 50%;

}

.edit,

.disable,

.delete{

width: 60px;

height: 20px;

border-radius: 9px;

border: none;

background-color: #555;

color: white;

cursor: pointer;

}

.edit{

background-color: rgb(19, 201, 19);

}

.delete{

background-color: rgb(237, 17, 17);

}

二.网页展示效果

相关推荐
yanlele13 分钟前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子1 小时前
React状态管理最佳实践
前端
烛阴2 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子2 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码2 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw52 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !2 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
Burt3 小时前
tsdown vs tsup, 豆包回答一坨屎,还是google AI厉害
前端
群联云防护小杜3 小时前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构