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

最新推荐文章于 2024-05-19 09:58:49 发布

婉菡

最新推荐文章于 2024-05-19 09:58:49 发布

阅读量3.1k

点赞数 4

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/gcyqweasd/article/details/107549256

版权

本文档将指导你如何使用HTML和CSS快速创建一个通用的管理系统顶部及侧面导航栏。通过引用`indexSystem.html`、`iconfont.css`和`indexStyle.css`文件，实现导航栏的样式和功能。这将帮助你构建一个简洁、实用的后台管理系统界面。

摘要由CSDN通过智能技术生成

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 ty

最低0.47元/天解锁文章

婉菡

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
通用管理系统顶部及侧面导航栏简易制作

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" hr
复制链接

扫一扫

专栏目录