通用管理系统顶部及侧面导航栏简易制作
程序员文章站
2022-03-22 10:27:20
indexStystem.html通用管理系统
indexStystem.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通用管理系统</title>
<link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="../css/indexStyle.css"/>
</head>
<body>
<!-- 头部导航栏 -->
<header>
<div class="left">通用管理系统</div>
<div class="right icon iconfont " ><a href="#" >返回首页</a></div>
</header>
<section>
<!-- 侧边栏 -->
<div class="left">
<div class="icon iconfont"><span> 用户管理</span>
<ul class="ul_1">
<li class="icon iconfont"><a href="#">用户列表</a></li>
<li class="icon iconfont"><a href="#">用户列表</a></li>
<li class="icon iconfont"><a href="#">用户列表</a></li>
</ul>
</div>
<div class="icon iconfont"><span> 商品管理</span>
<ul class="ul_1">
<li class="icon iconfont"><a href="#">商品列表</a></li>
<li class="icon iconfont"><a href="#">商品列表</a></li>
<li class="icon iconfont"><a href="#">商品列表</a></li>
</ul>
</div>
<div class="icon iconfont"><span> 数据统计</span>
<ul class="ul_1">
<li class="icon iconfont"><a href="#">数据列表</a></li>
<li class="icon iconfont"><a href="#">数据列表</a></li>
<li class="icon iconfont"><a href="#">数据列表</a></li>
</ul>
</div>
</div>
<div class="right">
<div class="mainTop">
<input type="date" name="startDate" id="startDate" value="" placeholder="开始日期"/>
<input type="date" name="endDate" id="endDate" value="" placeholder="终止日期"/>
<input type="text" name="" id="" value="" placeholder="请输入用户名"/>
<input type="button" name="" id="" value="搜索" class="icon iconfont" />
</div>
<div class="mainCenter">
<input type="button" name="" id="" value="批量删除" class="icon iconfont" />
<input type="button" name="" id="" value="添加" class="icon iconfont" />
</div>
<table class="tab" cellspacing="0" cellpadding="">
<tr>
<th><input type="checkbox" name="" id="" value="" />序号</th>
<th>姓名</th>
<th>性别</th>
<th>手机号</th>
<th>邮箱</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" />1</td>
<td>张三</td>
<td>男</td>
<td>15842653217</td>
<td>89211222@qq.com</td>
<td>激活</td>
<td>
<a href="#">查看</a>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" />2</td>
<td>张三</td>
<td>男</td>
<td>15842653217</td>
<td>89211222@qq.com</td>
<td>激活</td>
<td>
<a href="#">查看</a>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" />3</td>
<td>张三</td>
<td>男</td>
<td>15842653217</td>
<td>89211222@qq.com</td>
<td>激活</td>
<td>
<a href="#">查看</a>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" />4</td>
<td>张三</td>
<td>男</td>
<td>15842653217</td>
<td>89211222@qq.com</td>
<td>激活</td>
<td>
<a href="#">查看</a>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" />5</td>
<td>张三</td>
<td>男</td>
<td>15842653217</td>
<td>89211222@qq.com</td>
<td>激活</td>
<td>
<a href="#">查看</a>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" />6</td>
<td>张三</td>
<td>男</td>
<td>15842653217</td>
<td>89211222@qq.com</td>
<td>激活</td>
<td>
<a href="#">查看</a>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" />7</td>
<td>张三</td>
<td>男</td>
<td>15842653217</td>
<td>89211222@qq.com</td>
<td>激活</td>
<td>
<a href="#">查看</a>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" />8</td>
<td>张三</td>
<td>男</td>
<td>15842653217</td>
<td>89211222@qq.com</td>
<td>激活</td>
<td>
<a href="#">查看</a>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" />9</td>
<td>张三</td>
<td>男</td>
<td>15842653217</td>
<td>89211222@qq.com</td>
<td>激活</td>
<td>
<a href="#">查看</a>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
</tr>
</table>
</div>
</section>
</body>
</html>
iconfont.css
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1595232820571'); /* IE9 */
src: url('iconfont.eot?t=1595232820571#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1595232820571') format('woff'),
url('iconfont.ttf?t=1595232820571') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1595232820571#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconall:before {
content: "\e6ef";/* 商品管理 */
}
.iconbussiness-man:before {/* 用户列表 */
content: "\e6f0";
}
.iconintegral:before {/* 数据统计 */
content: "\e6f9";
}
.iconNotvisible:before {/* 眼睛禁止 */
content: "\e6fe";
}
.iconarrow-right:before {
content: "\e743";
}
.iconarrow-lift:before {
content: "\e744";
}
.iconarrow-up:before {
content: "\c";
}
.iconashbin:before {/* 删除 */
content: "\e746";
}
.iconbrowse:before {/* 眼睛 */
content: "\e747";
}
.iconcategory:before {/* 三横 */
content: "\e748";
}
.iconclose:before {/* 叉 */
content: "\e749";
}
.iconcart-Empty:before {/* 购物车 */
content: "\e74a";
}
.icondata:before {/* 数据列表 */
content: "\e74b";
}
.iconCustomermanagement:before {/* 用户管理 */
content: "\e74c";
}
.iconfurniture:before {
content: "\e751";
}
.iconfolder:before {
content: "\e752";/* 商品列表 */
}
.iconinspection:before {
content: "\e754";
}
.iconMoneymanagement:before {/* 返回首页图标 */
content: "\e759";
}
.iconnamecard:before {
content: "\e75a";
}
.iconstop:before {
content: "\e767";
}
.iconsuspended:before {
content: "\e768";
}
.iconusercenter:before {
content: "\e773";
}
.iconadd-select:before {
content: "\e7b0";/* 加号添加 */
}
.iconarrow-down:before {
content: "\e7b2";
}
.iconsearch:before {
content: "\e7b3";/* 搜索 */
}
indexStyle.css
*{
padding: 0px;
margin: 0px;
}
ul,li{
list-style: none;
}
/* 顶部导航栏 */
header{
width: 100%;
/* height: 60px; */
background: #383d41;
overflow: hidden;
/* position: relative; */
}
header .left{
float: left;
/* display: inline-block; */
font-size: 30px;
color: white;
padding: 15px 20px;
}
header .right{
float: right;
position: absolute;
display: inline-block;
/* padding: 20px 30px; */
top: 25px;
right: 40px;
}
header .right>a{
font-size: 16px;
color: white;
text-decoration: none;
}
/* 侧边栏 */
section{
overflow: hidden;
width: 100%;
}
section .left{
position: fixed;
height: 100%;
width: 10%;
background: #333743;
}
section .left>div{
width: 100%;
background: #333743;
}
section .left>div>span{
display: block;
padding: 10px 0px;
text-indent: 20px;
font-size:20px;
text-decoration: none;
color: white;
}
section .left>div>ul{
width: 100%;
background: #333743;
max-height: 0px;
overflow: hidden;
transition: all 5s ease-in;
}
section .left>div:hover ul{
max-height: 9999px;
transition-timing-function: ease-in-out;
}
section .left>div>ul>li>a{
display:block;
width: 100%;
padding: 5px 0px;
font-size: 18px;
color: white;
text-indent: 30px;
text-decoration: none;
background: #292b37;
}
section .left>div>ul>li>a:hover{
background: #4a4f63;
}
/* 主体部分 */
section .right{
width: 88%;
/* height: 100%; */
/* background: blue; */
position: absolute;
left: 12%;
top: 100px;
}
section .right .mainTop{
width: 100%;
/* background: red; */
}
section .right .mainTop input{
width: 200px;
height:30px;
margin: 10px;
border-radius: 4px;
border: none;
border: solid 1px #ccc;
}
section .right .mainTop input:nth-child(4){
width: 60px;
background: #009688;
color: white;
border: none;
}
section .right .mainCenter{
width: 100%;
/* background: red; */
padding: 10px;
}
section .right .mainCenter input{
height:30px;
width: 100px;
color: white;
background: #ff5722;
border: none;
border-radius: 4px;
margin-right: 20px;
}
section .right .mainCenter input:nth-child(2){
width: 60px;
background: #009688;
}
section .right .tab{
width: 95%;
border-collapse: collapse;
}
section .right .tab th{
height: 30px;
border: 1px solid #CCC;
background: #f2f2f2;
}
section .right .tab td{
height: 40px;
text-align: center;
border: 1px solid #CCC;
}
本文地址：https://blog.csdn.net/gcyqweasd/article/details/107549256
下一篇： VSCode设置背景图