HTML+CSS实现一个管理系统页面的制作

已于 2022-09-16 13:14:31 修改
阅读量2.5w 收藏 409
点赞数 66
文章标签： css html css3
于 2021-11-01 13:44:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50815545/article/details/121078358
版权

1.先来看成品效果

2.html的源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="main.css">
		<title>信息管理系统</title>
	</head>
	<body>
		<div class="head">
			<div class="head-left">
				<img src="img/logo.png">
			</div>
			<div class="head-right">
				<div class="head-right-top">
					<ul>
						<li>退出</li>
						<li><img src="img/dl.png"></li>
						<li>欢迎使用信息系统!</li>
						<li><img src="img/left_15.png"></li>					
					</ul>
				</div>
				<div class="head-right-bottom">
					<ul>
						<li><a href="#"><img src="img/left_14.png"></a><p>系统管理</p></li>
						<li><a href="#"><img src="img/left_05.png"></a><p>数据分析</p></li>
						<li><a href="#"><img src="img/left_05.png"></a><p>设备管理</p></li>
						<li><a href="#"><img src="img/left_03.jpg"></a><p>数据同步</p></li>
						<li><a href="#"><img src="img/equi-icon2.png"></a><p>数据展示</p></li>
						<li><a href="#"><img src="img/equi-icon1.png"></a><p>数据采集</p></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="content-left">
			<img src="img/e_01.jpg">
			<div class="left_1">
				<img src="img/left_01.png">
				<p>设备信息</p>
			</div>
			<div class="left_2">
				<img src="img/jiao.png">
				<p>所有设备</p>
			</div>
			<div class="left_2">
					<img src="img/jiao.png">
				<p>正常设备</p>
			</div>
			<div class="left_2">
				<img src="img/jiao.png">
				<p>异常设备</p>
			</div>
			<div class="left_2">
				<img src="img/jiao.png">
				<p>共享设备</p>
			</div>
			<div class="left_1">
					<img src="img/left_03.jpg">
				<p>设备接口</p>
			</div>
			<div class="left_1">
				<img src="img/left_02.png">
				<p>集成设备</p>
			</div>
			<div class="left_1">
				<img src="img/left_03.png">
				<p>设备厂商</p>
			</div>
			<div class="left_1">
				<img src="img/left_05.png">
				<p>设备型号</p>
			</div>
			<div class="left_1">
				<img src="img/left_06.png">
				<p>更多设备</p>
			</div>
		</div>
		<div class="content_right">
			<div class="control_right_top">
				<img src="img/home.jpg">
				<span>当前位置&gt;&gt;设备管理&gt;&gt;设备信息&gt;&gt;所有设备&gt;&gt;</span>
				<hr style="width: 100%;">
			</div>
			<div class="content_right_content">
				<span><img src="img/left_14.png">&nbsp;搜索&nbsp;&nbsp;&nbsp;设备名称:<input type="text" placeholder="输入设备名称">&nbsp;&nbsp;设备类型:<select><option>计算机设备</option>
					<option>科学设备</option><option>软件设备</option><option>智能设备</option>
				</select>&nbsp;&nbsp;<button type="button">查询</button></span>
			</div>
			<div class="content_table">
				<table>
					<tr>
						<td><input type="checkbox">全选</input></td>
						<td>设备类型</td>
						<td>设备名称</td>
						<td>设备编号</td>
						<td>创建日期</td>
						<td>设备状态</td>
						<td>是否共享</td>
						<td>修改设备</td>
					</tr>
					<tr>
						<td><input type="checkbox"></td>
						<td>网络摄像头</td>
						<td>计算机网络设备</td>
						<td>0001</td>
						<td>2021/10/30</td>
						<td style="color: red;">设备异常</td>
						<td><img src="img/device-1.png" /></td>
						<td><img src="img/share-1.png" /></td>
						<td><img src="img/equi-icon2.png" /></td>
					</tr>
					<tr>
						<td><input type="checkbox"></td>
						<td>智能终端</td>
						<td>集成开发版设备</td>
						<td>0010</td>
						<td>2021/10/30</td>
						<td style="color: green;">设备正常</td>
						<td><img src="img/device-1.png" /></td>
						<td><img src="img/share-1.png" /></td>
						<td><img src="img/equi-icon2.png" /></td>
					</tr>
					<tr>
						<td><input type="checkbox"></td>
						<td>移动电话</td>
						<td>算法与数据设备</td>
						<td>0011</td>
						<td>2021/10/30</td>
						<td style="color: green;">设备正常</td>
						<td><img src="img/device-1.png" /></td>
						<td><img src="img/share-1.png" /></td>
						<td><img src="img/equi-icon2.png" /></td>
					</tr>
					<tr>
						<td><input type="checkbox"></td>
						<td>平板电脑</td>
						<td>IDE开发设备</td>
						<td>0100</td>
						<td>2021/10/30</td>
						<td style="color: green;">设备正常</td>
						<td><img src="img/device-1.png" /></td>
						<td><img src="img/share-1.png" /></td>
						<td><img src="img/equi-icon2.png" /></td>
					</tr>
					<tr>
						<td><input type="checkbox"></td>
						<td>STM32开发班</td>
						<td>底层架构设备</td>
						<td>0101</td>
						<td>2021/10/30</td>
						<td style="color: green;">设备正常</td>
						<td><img src="img/device-1.png" /></td>
						<td><img src="img/share-1.png" /></td>
						<td><img src="img/equi-icon2.png" /></td>
					</tr>
					<tr>
						<td><input type="checkbox"></td>
						<td>树莓派开发板</td>
						<td>链路层设备</td>
						<td>0110</td>
						<td>2021/10/30</td>
						<td style="color: green;">设备正常</td>
						<td><img src="img/device-1.png" /></td>
						<td><img src="img/share-1.png" /></td>
						<td><img src="img/equi-icon2.png" /></td>
					</tr>
				</table>
				<span><img src="img/tj.jpg">|<img src="img/sc.jpg"></span>
				<span style="float: right; margin-right: 200px;"><button type="button">首页</button>
					<button type="button" style="border: none; background: none; font-weight: bold;">1</button>
					<button type="button" style="border: none; background: none; font-weight: bold;">2</button>
					<button type="button" style="border: none; background: none; font-weight: bold;">3</button>
					<button type="button" style="border: none; background: none; font-weight: bold;">...</button>
					<button type="button">下一页</button>
					<button type="button">尾页</button>
				</span>
			</div>
		</div>
	</body>
</html>

3.CSS的源码

.head{
	height: 100px;
	width: 100%;
	margin: 0;
	background-color: cornflowerblue;
}
.head-left{
	height: px;
	width: 500px;
}
.head-left img {
	padding-top: 20px;
	padding-left: 20px;
	float: left;
}
.head-right-top{
	width: 600px;
	height: 20px;
	float: right;
	margin-right: 20px;
	margin-bottom: 3px;
}
.head-right-top>ul{
	margin: 0;
	padding: 0;
	list-style: none;
	margin-right: 20;
}
.head-right-top li{
	float: right;
	padding-left: 6px;
}
.head-right-top a{
	margin-left: 10px;
	text-decoration: none;
}
.head-right-bottom{
	height: 40px;
	width: 600px;
	float: right;
}
.head-right-bottom>ul{
	text-align: center;
	margin: 0;
	padding: 0;
	list-style-type: none;
	margin-right: 20px;
}
.head-right-bottom li{
	float: right;
	padding-left: 14px;
}
.head-right-bottom img{
	width: 25px;
	height: 25px;
}.head-right-bottom p{
	color: white;
	font-size: 15px;
}
.content-left{
	width: 200px;
	height: 1000px;
	background-color: lightskyblue;
}
.content-left p{
	display: inline;
}
.left_1>p{
	color: black;
	line-height: 30px;
}
.left_2>p{
	color: white;
	line-height: 25px;
}
.left_2{
	margin-left: 30px;
}
.content_right{
	position: absolute;
	left: 210px;
	top: 107px;
}
.control_right_top{
	width: 1500px;
	height: 30px;
	margin-bottom: 2px;
}
.content_table table{
	width: 1200px;
	height: 500px;
	text-align: center;
}

 
 

单片机电子爱好者
关注
  • 66
    点赞
  • 踩
  • 409
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
各种好看的管理系统界面html源码
10-29
里面有10余种管理系统登录及其管理主界面，样式好看，可以根据自己的需要进行改写或直接取用。
HTML漂亮的信息系统管理界面
03-22
HTML漂亮的信息系统管理界面； HTML CSS JQuery 信息系统 漂亮界面 UI
基于html+css+js的图书管理系统
热门推荐
毕业作品网站
09-18 3万+
本项目是用html，css，js语言编写的图书管理系统，用jquery进行页面的加工，ajax异步读取信息，json数据存储相关信息。用户在搜索框输入书名/作者/出版社信息，点击搜索按钮，弹出该图书的详细信息，如果没有搜索到，就弹出提示。（3）主界面：主要包含一个图书信息的表格，添加图书的输入框，搜索框，管理系统的标题，页脚。用户输入用户名，密码，与已存储的json数据进行验证，验证成功进入主界面，不成功弹出警告。点击图书表格上每条图书后的删除按钮，删除单条图书信息，新添加后的图书信息也可以删除。
HTML期末作业-基于HTML+CSS+JavaScript制作学生信息管理系统模板
最新发布
网页设计与制作
06-04 843
🧑‍🎓 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。🏷️HTML网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新
【HTML】HTML作业---管理系统界面
coding加油站
08-20 1万+
html作业，html大作业，资产管理系统，管理系统模版
内容多样的后台管理系统html界面
07-25
表单，表格，验证，登录注册，幻灯片，聊天窗口等等非常全面的一个html静态界面
管理系统HTML模板
08-20
蓝色的后台管理系统，适合web初学者，超级的好用！！
html+css管理系统后台登录页面
04-10
html+css管理系统后台登录页面，适用于网页设计登录页面的个性化设计。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者...
通过html+css+js制作一个简单的登录页面
09-26
这是通过html+css+js制作的一个简单的登录页面。 适合想学习前端开发的小白。 可以抖音搜索“汤圆的家”，抖音号为122355808，去观看教学视频。 也可以在哔哩哔哩搜索“web-lyh”观看教学视频。
html5+css3+js登录页面
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
人工智能-项目实践-信息管理系统-利用HTML+CSS3技术设计一个简单的用户信息管理系统
03-06
利用HTML+CSS3技术设计一个简单的用户信息管理系统 二、实验内容 1.使用图像标签，创建一个使用图标工作台页面，使用标签创建图像链接。 2.使用HTML标签+CSS样式表创建提交数据用户表单页面。 3.使用HTML+CSS技术...
HTML5+CSS3 漂亮后台管理系统登录界面
06-16
使用HTML+css3写的漂亮后台管理系统登录界面，界面非常美观，分格好看。拿来作为系统的登录界面非常合适
管理系统HTML
12-10
管理系统 HTML Javascript CSS 简洁漂亮
前后台系统管理HTML界面
12-15
超给力的近10套漂亮登录界面，包括后台管理系统界面。值得一看
学生信息管理系统模板 HTML模板 整套模板
01-03
学生信息管理系统模板，全套模板，DIV+CSS布局，清新简约。有个人中心、我的信息、班级信息、短信息、学院通知、我的异议、教务中心、我的报考、我的成绩、我的书籍、学习中心、资料下载、学习历程、财务中心、我的财务、教学系统等系统功能菜单。
项目管理系统html静态界面
04-02
项目管理系统，包括项目管理、任务管理、信息箱、客户信息权限管理、我的信息管理模块，html静态界面+css+js，传统布局
HTML5期末大作业：个人信息展示网站设计——清新春暖花开个人博客网站(6页) HTML+CSS+JavaScript...
qq_365392777
10-15 2434
常见网页设计作业题材有 ​​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他​​ 等网页设计题目, ​​A...
HTML+CSS的后台管理系统
Sweethonor的博客
11-16 1570
原生态构架的后台管理系统
管理系统界面模板（静态HTML+CSS）
10-11
管理系统界面模板（静态HTML+CSS）可以做一般管理系统界面
使用html css制作一个图书管理系统的静态页面
06-08
好的，下面是一个简单的图书管理系统的静态页面的代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图书管理系统</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>图书管理系统</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">图书列表</a></li> <li><a href="#">添加图书</a></li> <li><a href="#">借阅记录</a></li> </ul> </nav> <main> <section> <h2>图书列表</h2> <table> <thead> <tr> <th>图书编号</th> <th>图书名称</th> <th>作者</th> <th>出版社</th> <th>出版日期</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>《JavaScript高级程序设计》</td> <td>Nicholas C. Zakas</td> <td>人民邮电出版社</td> <td>2013-03-01</td> <td><a href="#">编辑</a> | <a href="#">删除</a></td> </tr> <tr> <td>002</td> <td>《CSS权威指南》</td> <td>Eric A. Meyer</td> <td>中国电力出版社</td> <td>2010-06-01</td> <td><a href="#">编辑</a> | <a href="#">删除</a></td> </tr> <tr> <td>003</td> <td>《HTML5权威指南》</td> <td>Adam Freeman</td> <td>清华大学出版社</td> <td>2011-07-01</td> <td><a href="#">编辑</a> | <a href="#">删除</a></td> </tr> </tbody> </table> </section> <section> <h2>添加图书</h2> <form> <label for="book-id">图书编号：</label> <input type="text" id="book-id" name="book-id" required> <label for="book-name">图书名称：</label> <input type="text" id="book-name" name="book-name" required> <label for="book-author">作者：</label> <input type="text" id="book-author" name="book-author" required> <label for="book-publisher">出版社：</label> <input type="text" id="book-publisher" name="book-publisher" required> <label for="book-date">出版日期：</label> <input type="date" id="book-date" name="book-date" required> <button type="submit">添加</button> </form> </section> <section> <h2>借阅记录</h2> <table> <thead> <tr> <th>借阅人</th> <th>图书名称</th> <th>借阅日期</th> <th>归还日期</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>《JavaScript高级程序设计》</td> <td>2019-01-01</td> <td>2019-01-10</td> </tr> <tr> <td>李四</td> <td>《CSS权威指南》</td> <td>2019-01-05</td> <td>2019-01-15</td> </tr> <tr> <td>王五</td> <td>《HTML5权威指南》</td> <td>2019-01-10</td> <td>2019-01-20</td> </tr> </tbody> </table> </section> </main> <footer> <p>版权所有 © 2021 图书管理系统</p> </footer> </body> </html> ``` 上面的代码中，使用了 HTML 和 CSS 来实现了一个简单的图书管理系统的静态页面。其中，通过 `<header>`、`<nav>`、`<main>` 和 `<footer>` 等 HTML 标签来划分页面结构，使用了 `<table>` 和 `<form>` 标签来展示图书列表和添加图书的表单，同时还使用了 CSS 样式来美化页面。
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值