当前位置：移动技术网 > IT编程>网页制作>HTML > 通用管理系统顶部及侧面导航栏简易制作

通用管理系统顶部及侧面导航栏简易制作

2020年07月24日 | 移动技术网IT编程 | 我要评论

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="#" >&#xe759;返回首页</a></div>
		</header>
		<section>
			<!-- 侧边栏 -->
			<div class="left">
				<div class="icon iconfont"><span> &#xe74c;用户管理</span>
					<ul class="ul_1">
						<li class="icon iconfont"><a href="#">&#xe6f0;用户列表</a></li>
						<li class="icon iconfont"><a href="#">&#xe6f0;用户列表</a></li>
						<li class="icon iconfont"><a href="#">&#xe6f0;用户列表</a></li>
					</ul>
				</div>
				<div class="icon iconfont"><span> &#xe6ef;商品管理</span>
					<ul class="ul_1">
						<li class="icon iconfont"><a href="#">&#xe752;商品列表</a></li>
						<li class="icon iconfont"><a href="#">&#xe752;商品列表</a></li>
						<li class="icon iconfont"><a href="#">&#xe752;商品列表</a></li>
					</ul>
				</div>
				<div class="icon iconfont"><span> &#xe6f9;数据统计</span>
					<ul class="ul_1">
						<li class="icon iconfont"><a href="#">&#xe74b;数据列表</a></li>
						<li class="icon iconfont"><a href="#">&#xe74b;数据列表</a></li>
						<li class="icon iconfont"><a href="#">&#xe74b;数据列表</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="&#xe7b3;搜索" class="icon iconfont" />
				</div>
				<div class="mainCenter">
					<input type="button" name="" id="" value="&#xe746;批量删除" class="icon iconfont"  />
					<input type="button" name="" id="" value="&#xe7b0;添加" 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

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

monkey测试所用的所有链接

使用Monkey命令做简单的安卓APP稳定性测试：hptts://www.jianshu.c04c314986a... [阅读全文]
string中的to_string()和stoi/atoi

std::to_stringstring to_string (int val);string to_strin... [阅读全文]
less中使用last-child选择器

css：.search{ .time{ &:first-child{ ma... [阅读全文]
jQuery实现选项卡

<!DOCTYPE html><html><head><meta ch... [阅读全文]
在Mac下安装Xampp 7.4.8版本

官网下载（国内不好下载）官网地址https://www.apachefriends.org/... [阅读全文]
HTML基础标签(上)

HTML语法规范基本语法HTML标签是由尖括号包围的关键词,例如HTML标签通常是成对出现的,例如称为双标签,分... [阅读全文]
Cesium可视域分析

yin [阅读全文]
如何在 HTML 中使用 svg

在网页使用 svg先在素材网站上找到素材，下载 svg 格式，一般在 iconfont 上面找素材，这里以向下的... [阅读全文]
elementui tree设置节点半选解决方案

问题1tree组件在获取完数据进行页面回显时，因为获取的数据中包含父节点的关系，把不该选中的子节点也全部勾上了。... [阅读全文]
解决matplotlib作图中文无法正常显示的问题

matplotlib在默认情况下无法正常显示图表中的中文：找到matplotlib的安装目录。如下面我使用的是a... [阅读全文]

网友评论


验证码：

通用管理系统顶部及侧面导航栏简易制作

2020年07月24日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论