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

已于 2022-09-16 13:14:31 修改
阅读量2.6w 收藏 421
点赞数 67
文章标签： 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;
}

 
 

HTML布局
2401_86523075的博客
03-29 818
在 CSS 框架中，float 属性曾广泛用于实现布局（如网格系统），但随着现代布局技术（Flexbox 和 Grid）的普及，它的使用场景有所减少。浮动元素绑定到文档流，这可能会损害灵活性。使用flexbox确保元件的行为可以预见当页面布局必须适应不同的屏幕尺寸和不同的显示设备。缺点：不能在IE10和早期的浏览器工作。元素的设计目的是显示表格数据。因此，不要为页面布局使用表格，这会带来代码混乱。html有四种不同的方法来创建多列布局。元素没有被设计成布局工具。定义文档或者节的页眉。
管理系统界面模板（静态HTML+CSS）
10-11
管理系统界面模板（静态HTML+CSS）可以做一般管理系统界面
精选后台管理页面HTML模板集合
最新发布
weixin_42418754的博客
03-13 977
本文还有配套的精品资源，点击获取 简介：本集合提供了快速构建后台管理界面的预设布局和设计元素，主要知识点覆盖了HTML基础、后台管理功能实现及页面模板复用等Web开发领域。模板集合包括登录页面、主页面、控制面板、数据展示等常见后台元素，旨在为开发者提供便捷的起点。通过修改和定制这些模板，初学者可以高效地学习和实践后台管理系统的设计与开发。 1. 后台管理界面设计原...
HTML5+CSS3 漂亮后台管理系统登录界面
06-16
使用HTML+css3写的漂亮后台管理系统登录界面，界面非常美观，分格好看。拿来作为系统的登录界面非常合适
HTML+CSS的后台管理系统
Sweethonor的博客
11-16 2579
原生态构架的后台管理系统
【HTML】HTML作业---管理系统界面
热门推荐
coding加油站
08-20 1万+
html作业，html大作业，资产管理系统，管理系统模版
学生信息管理系统(html + js + css)
07-01
实现对学生信息的增、删、改、查。主要对html、css、js方面知识的运用。
html+css管理系统后台登录页面
04-10
html+css管理系统后台登录页面，适用于网页设计登录页面的个性化设计。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者...
基于html+css+js的图书管理系统.zip
10-17
资源包含文件：课程报告...本项目是用html，css，js语言编写的图书管理系统，用jquery进行页面的加工，ajax异步读取信息，json数据存储相关信息。详细介绍参考：https://blog.csdn.net/newlw/article/details/126915158
web前端html+css+js实现学生信息管理系统
11-13
本项目以HTML、CSS和JavaScript为核心技术，实现了一个简易的学生信息管理系统，旨在提供一个直观、易用的界面，用于展示和操作学生资料。 【HTML】：HTML（HyperText Markup Language）是网页的基础，负责定义网页...
人工智能-项目实践-信息管理系统-利用HTML+CSS3技术设计一个简单的用户信息管理系统
03-06
利用HTML+CSS3技术设计一个简单的用户信息管理系统 二、实验内容 1.使用图像标签，创建一个使用图标工作台页面，使用标签创建图像链接。 2.使用HTML标签+CSS样式表创建提交数据用户表单页面。 3.使用HTML+CSS技术...
商城后台管理系统HTML+css+jquery
06-30
一个非常完善的后台管理系统前端源码，使用HTML+css+jQuery开发。
各种好看的管理系统界面html源码
10-29
里面有10余种管理系统登录及其管理主界面，样式好看，可以根据自己的需要进行改写或直接取用。
HTML漂亮的信息系统管理界面
03-22
HTML漂亮的信息系统管理界面； HTML CSS JQuery 信息系统 漂亮界面 UI
内容多样的后台管理系统html界面
07-25
表单，表格，验证，登录注册，幻灯片，聊天窗口等等非常全面的一个html静态界面
前后台系统管理HTML界面
12-15
超给力的近10套漂亮登录界面，包括后台管理系统界面。值得一看
用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript
08-10
### 一、旅游网站设计与实现的关键知识点 #### 1.1 HTML5基本结构与语义化标签的应用 ...此外，对于已经有一定基础的学生而言，这些项目也能提供一个检验自己能力的机会，通过亲手实现这些功能，进一步巩固所学知识。
html+css实现一个响应式管理平台架构模板
xingyu_qie的专栏
01-10 3346
文本将会带你使用html+css实现一个响应式的管理平台架构模板，目前来说市面上的管理平台架构模板大同小异，文本的知识点都会符合场景所需。
使用DIV+CSS技术设计的非遗文化网页与实现制作（web前端网页制作课作业）
wx___BJ050106的博客
12-12 233
💗 非遗文化网页设计 、等网站的设计与制作。🏷️HTML非遗文化网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序...
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值