admin管理员组文章数量:1530516
1、引言
设计结课作业,课程设计无处下手,网页要求的总数量太多?没有合适的模板?数据库,java,python,vue,html作业复杂工程量过大?毕设毫无头绪等等一系列问题。你想要解决的问题,在微信公众号“coding加油站”中全部会得到解决
2、作品介绍
某某有限公司资产管理采用html,css技术来实现,符合所学知识体系,适用于常见的作业以及课程设计,需要获取更多的作品,请关注微信公众号:coding加油站,获取,如需更多资料,可在微信后台留言。欢迎大家来提问,交流学习。
2.1、作品简介方面
某某有限公司资产管理采用常规方式来实现,符合绝大部分的要求。代码配置有相关文档讲解,如需从代码中学到知识点,那么这个作品将是你的不二之选
2.2、作品二次开发工具
此作品代码相对简单,基本使用课堂中所学知识点来完成,只需要修改相关的介绍文字,一些图片,就可以改为自己独一无二的代码,网页作品下载后可使用任意编辑软件(例如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)。
2.3、作品技术介绍
html网页作品技术方面:使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面,部分采用了javascript来做校验。 使用html5,以及css3等相关技术完成技术的布局,在本作品中,会使用常见的布局,常见的浮动布局,flex布局都会有使用到哦。同时在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识,同时使用了一些js的相关知识。例如使用到了dom,和bom来获取浏览器的相关api,同时使用css对样式进行相关的美化,使得界面更加符合网页设计
3、作品演示
3.1、登录页
相关代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>资产管理 - 登录</title>
<link rel="stylesheet" href="../static/css/login.css">
</head>
<body class="login-bg">
<div class="login-content">
<div class="login-title">某某有限公司资产管理登录</div>
<form action="" method="post">
<input class="login-input topline" type="text" name="username" placeholder="用户名">
<input class="login-input" type="text" name="password" placeholder="密码">
<!--<div class="error">账号密码错误!</div>-->
<input class="login-input login-submit" type="submit">
</form>
</div>
</body>
</html>
3.2、首页
相关代码:
<div class="table-left">
<p>生产服务器统计</p>
<br/><br/>
<table class="table-list">
<thead>
<tr>
<th class="table-line">序号</th>
<th>资产类型</th>
<th class="table-line">数量</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-line">1</td>
<td>服务器</td>
<td class="table-line">3</td>
</tr>
<tr>
<td class="table-line">2</td>
<td>网关</td>
<td class="table-line">5</td>
</tr>
<tr>
<td class="table-line" colspan="2">合计</td>
<td class="table-line">8</td>
</tr>
</tbody>
</table>
<br/><br/>
<table class="table-list">
<thead>
<tr>
<th class="table-line">序号</th>
<th>服务器类型</th>
<th class="table-line">数量</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-line">1</td>
<td>Linux</td>
<td class="table-line">15</td>
</tr>
<tr>
<td class="table-line">2</td>
<td>Windows</td>
<td class="table-line">20</td>
</tr>
<tr>
<td class="table-line" colspan="2">合计</td>
<td class="table-line">35</td>
</tr>
</tbody>
</table>
<br/><br/>
<table class="table-list">
<thead>
<tr>
<th class="table-line">序号</th>
<th>数据库类型</th>
<th class="table-line">数量</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-line">1</td>
<td>Oracle</td>
<td class="table-line">20</td>
</tr>
<tr>
<td class="table-line">2</td>
<td>Mysql</td>
<td class="table-line">12</td>
</tr>
<tr>
<td class="table-line">3</td>
<td>Sql Server</td>
<td class="table-line">8</td>
</tr>
<tr>
<td class="table-line" colspan="2">合计</td>
<td class="table-line">40</td>
</tr>
</tbody>
</table>
</div>
<div class="table-middle">
<p>办公服务器统计</p>
<br/><br/>
<table class="table-list">
<thead>
<tr>
<th class="table-line">序号</th>
<th>资产类型</th>
<th class="table-line">数量</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-line">1</td>
<td>服务器</td>
<td class="table-line">3</td>
</tr>
<tr>
<td class="table-line">2</td>
<td>网关</td>
<td class="table-line">5</td>
</tr>
<tr>
<td class="table-line" colspan="2">合计</td>
<td class="table-line">8</td>
</tr>
</tbody>
</table>
<br/><br/>
<table class="table-list">
<thead>
<tr>
<th class="table-line">序号</th>
<th>服务器类型</th>
<th class="table-line">数量</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-line">1</td>
<td>Linux</td>
<td class="table-line">15</td>
</tr>
<tr>
<td class="table-line">2</td>
<td>Windows</td>
<td class="table-line">20</td>
</tr>
<tr>
<td class="table-line" colspan="2">合计</td>
<td class="table-line">35</td>
</tr>
</tbody>
</table>
<br/><br/>
<table class="table-list">
<thead>
<tr>
<th class="table-line">序号</th>
<th>数据库类型</th>
<th class="table-line">数量</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-line">1</td>
<td>Oracle</td>
<td class="table-line">20</td>
</tr>
<tr>
<td class="table-line">2</td>
<td>Mysql</td>
<td class="table-line">12</td>
</tr>
<tr>
<td class="table-line">3</td>
<td>Sql Server</td>
<td class="table-line">8</td>
</tr>
<tr>
<td class="table-line" colspan="2">合计</td>
<td class="table-line">40</td>
</tr>
</tbody>
</table>
</div>
<div class="table-right">
<p>非服务器统计</p>
<br/><br/>
<table class="table-list">
<thead>
<tr>
<th class="table-line">序号</th>
<th>资产类型</th>
<th class="table-line">数量</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-line">1</td>
<td>笔记本</td>
<td class="table-line">3</td>
</tr>
<tr>
<td class="table-line">2</td>
<td>台式机</td>
<td class="table-line">5</td>
</tr>
<tr>
<td class="table-line">3</td>
<td>电话机</td>
<td class="table-line">7</td>
</tr>
<tr>
<td class="table-line">4</td>
<td>摄像头</td>
<td class="table-line">5</td>
</tr>
<tr>
<td class="table-line" colspan="2">合计</td>
<td class="table-line">20</td>
</tr>
</tbody>
</table>
<br/><br/>
<table class="table-list">
<thead>
<tr>
<th class="table-line">序号</th>
<th>所在网络</th>
<th class="table-line">数量</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-line">1</td>
<td>办公</td>
<td class="table-line">15</td>
</tr>
<tr>
<td class="table-line">2</td>
<td>生产</td>
<td class="table-line">20</td>
</tr>
<tr>
<td class="table-line" colspan="2">合计</td>
<td class="table-line">35</td>
</tr>
</tbody>
</table>
</div>
3.3、相关服务列表界面
相关代码:
<div class="nav">
<div class="nav-left">某某有限公司资产管理</div>
<div class="nav-right">
<div class="nav-right-name">coding加油站 <i class="fa fa-caret-down" aria-hidden="true"></i>
<dl class="nav-right-signout">
<dd><a href="person_detail.html">修改密码</a></dd>
<dd><a href="login.html">退 出</a></dd>
</dl>
</div>
</div>
</div>
<div class="sidebar">
<ul>
<li><a href="index.html"><i class="fa fa-tachometer" aria-hidden="true"></i><span class="">资产概览</span></a></li>
<li><a href="server_list.html"><i class="fa fa-table" aria-hidden="true"></i><span>生产服务器</span></a></li>
<li class="active-li"><a href="bgserver_list.html"><i class="fa fa-th-large" aria-hidden="true"></i><span class="">办公服务器</span></a></li>
<li><a href="nonserver_list.html"><i class="fa fa-bars" aria-hidden="true"></i><span class="">非服务器</span></a></li>
<li><a href="person_list.html"><i class="fa fa-user" aria-hidden="true"></i><span class="">人员管理</span></a></li>
<li><a href="operater_log.html"><i class="fa fa-book" aria-hidden="true"></i><span class="">日志记录</span></a></li>
</ul>
</div>
总结
以上就是本次项目的全部内容,需要交流或者获取代码请关注微信公众号:coding加油站获取
版权声明:本文标题:【HTML】HTML作业---管理系统界面 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1725197093a1012521.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论