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>[email protected]</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>[email protected]</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);

}

二.网页展示效果

相关推荐
浪裡遊27 分钟前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
LinDaiuuj28 分钟前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝38 分钟前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3111 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion1 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜1 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf
珠峰下的沙砾1 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
航Hang*1 小时前
WEBSTORM前端 —— 第2章:CSS —— 第3节:背景属性与显示模式
前端·css·css3·html5·webstorm
wuhen_n1 小时前
CSS元素动画篇:基于当前位置的变换动画(一)
前端·css·html·css3·html5
拉不动的猪2 小时前
# 移动端与PC端全屏的处理
前端·javascript·面试