• 【HTML】HTML作业---管理系统界面

    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、登录页

    相关代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>资产管理 - 登录title>
    6.     <link rel="stylesheet" href="../static/css/login.css">
    7. head>
    8. <body class="login-bg">
    9.     <div class="login-content">
    10.         <div class="login-title">某某有限公司资产管理登录div>
    11.         <form action="" method="post">
    12.             <input class="login-input topline" type="text" name="username" placeholder="用户名">
    13.             <input class="login-input" type="text" name="password" placeholder="密码">
    14.             
    15.             <input class="login-input login-submit" type="submit">
    16.         form>
    17.     div>
    18. body>
    19. html>

    3.2、首页

     相关代码：

    1.        <div class="table-left">
    2.                 <p>生产服务器统计p>
    3.                 <br/><br/>
    4.                 <table class="table-list">
    5.                     <thead>
    6.                         <tr>
    7.                             <th class="table-line">序号th>
    8.                             <th>资产类型th>
    9.                             <th class="table-line">数量th>
    10.                         tr>
    11.                     thead>
    12.                     <tbody>
    13.                         <tr>
    14.                             <td class="table-line">1td>
    15.                             <td>服务器td>
    16.                             <td class="table-line">3td>
    17.                         tr>
    18.                         <tr>
    19.                             <td class="table-line">2td>
    20.                             <td>网关td>
    21.                             <td class="table-line">5td>
    22.                         tr>
    23.                         <tr>
    24.                             <td class="table-line" colspan="2">合计td>
    25.                             <td class="table-line">8td>
    26.                         tr>
    27.                     tbody>
    28.                 table>
    29.                 <br/><br/>
    30.                 <table class="table-list">
    31.                     <thead>
    32.                         <tr>
    33.                             <th class="table-line">序号th>
    34.                             <th>服务器类型th>
    35.                             <th class="table-line">数量th>
    36.                         tr>
    37.                     thead>
    38.                     <tbody>
    39.                         <tr>
    40.                             <td class="table-line">1td>
    41.                             <td>Linuxtd>
    42.                             <td class="table-line">15td>
    43.                         tr>
    44.                         <tr>
    45.                             <td class="table-line">2td>
    46.                             <td>Windowstd>
    47.                             <td class="table-line">20td>
    48.                         tr>
    49.                         <tr>
    50.                             <td class="table-line" colspan="2">合计td>
    51.                             <td class="table-line">35td>
    52.                         tr>
    53.                     tbody>
    54.                 table>
    55.                 <br/><br/>
    56.                 <table class="table-list">
    57.                     <thead>
    58.                         <tr>
    59.                             <th class="table-line">序号th>
    60.                             <th>数据库类型th>
    61.                             <th class="table-line">数量th>
    62.                         tr>
    63.                     thead>
    64.                     <tbody>
    65.                         <tr>
    66.                             <td class="table-line">1td>
    67.                             <td>Oracletd>
    68.                             <td class="table-line">20td>
    69.                         tr>
    70.                         <tr>
    71.                             <td class="table-line">2td>
    72.                             <td>Mysqltd>
    73.                             <td class="table-line">12td>
    74.                         tr>
    75.                         <tr>
    76.                             <td class="table-line">3td>
    77.                             <td>Sql Servertd>
    78.                             <td class="table-line">8td>
    79.                         tr>
    80.                         <tr>
    81.                             <td class="table-line" colspan="2">合计td>
    82.                             <td class="table-line">40td>
    83.                         tr>
    84.                     tbody>
    85.                 table>
    86.             div>
    87.             <div class="table-middle">
    88.                 <p>办公服务器统计p>
    89.                 <br/><br/>
    90.                 <table class="table-list">
    91.                     <thead>
    92.                         <tr>
    93.                             <th class="table-line">序号th>
    94.                             <th>资产类型th>
    95.                             <th class="table-line">数量th>
    96.                         tr>
    97.                     thead>
    98.                     <tbody>
    99.                         <tr>
    100.                             <td class="table-line">1td>
    101.                             <td>服务器td>
    102.                             <td class="table-line">3td>
    103.                         tr>
    104.                         <tr>
    105.                             <td class="table-line">2td>
    106.                             <td>网关td>
    107.                             <td class="table-line">5td>
    108.                         tr>
    109.                         <tr>
    110.                             <td class="table-line" colspan="2">合计td>
    111.                             <td class="table-line">8td>
    112.                         tr>
    113.                     tbody>
    114.                 table>
    115.                 <br/><br/>
    116.                 <table class="table-list">
    117.                     <thead>
    118.                         <tr>
    119.                             <th class="table-line">序号th>
    120.                             <th>服务器类型th>
    121.                             <th class="table-line">数量th>
    122.                         tr>
    123.                     thead>
    124.                     <tbody>
    125.                         <tr>
    126.                             <td class="table-line">1td>
    127.                             <td>Linuxtd>
    128.                             <td class="table-line">15td>
    129.                         tr>
    130.                         <tr>
    131.                             <td class="table-line">2td>
    132.                             <td>Windowstd>
    133.                             <td class="table-line">20td>
    134.                         tr>
    135.                         <tr>
    136.                             <td class="table-line" colspan="2">合计td>
    137.                             <td class="table-line">35td>
    138.                         tr>
    139.                     tbody>
    140.                 table>
    141.                 <br/><br/>
    142.                 <table class="table-list">
    143.                     <thead>
    144.                         <tr>
    145.                             <th class="table-line">序号th>
    146.                             <th>数据库类型th>
    147.                             <th class="table-line">数量th>
    148.                         tr>
    149.                     thead>
    150.                     <tbody>
    151.                         <tr>
    152.                             <td class="table-line">1td>
    153.                             <td>Oracletd>
    154.                             <td class="table-line">20td>
    155.                         tr>
    156.                         <tr>
    157.                             <td class="table-line">2td>
    158.                             <td>Mysqltd>
    159.                             <td class="table-line">12td>
    160.                         tr>
    161.                         <tr>
    162.                             <td class="table-line">3td>
    163.                             <td>Sql Servertd>
    164.                             <td class="table-line">8td>
    165.                         tr>
    166.                         <tr>
    167.                             <td class="table-line" colspan="2">合计td>
    168.                             <td class="table-line">40td>
    169.                         tr>
    170.                     tbody>
    171.                 table>
    172.             div>
    173.             <div class="table-right">
    174.                 <p>非服务器统计p>
    175.                 <br/><br/>
    176.                 <table class="table-list">
    177.                     <thead>
    178.                         <tr>
    179.                             <th class="table-line">序号th>
    180.                             <th>资产类型th>
    181.                             <th class="table-line">数量th>
    182.                         tr>
    183.                     thead>
    184.                     <tbody>
    185.                         <tr>
    186.                             <td class="table-line">1td>
    187.                             <td>笔记本td>
    188.                             <td class="table-line">3td>
    189.                         tr>
    190.                         <tr>
    191.                             <td class="table-line">2td>
    192.                             <td>台式机td>
    193.                             <td class="table-line">5td>
    194.                         tr>
    195.                         <tr>
    196.                             <td class="table-line">3td>
    197.                             <td>电话机td>
    198.                             <td class="table-line">7td>
    199.                         tr>
    200.                         <tr>
    201.                             <td class="table-line">4td>
    202.                             <td>摄像头td>
    203.                             <td class="table-line">5td>
    204.                         tr>
    205.                         <tr>
    206.                             <td class="table-line" colspan="2">合计td>
    207.                             <td class="table-line">20td>
    208.                         tr>
    209.                     tbody>
    210.                 table>
    211.                 <br/><br/>
    212.                 <table class="table-list">
    213.                     <thead>
    214.                         <tr>
    215.                             <th class="table-line">序号th>
    216.                             <th>所在网络th>
    217.                             <th class="table-line">数量th>
    218.                         tr>
    219.                     thead>
    220.                     <tbody>
    221.                         <tr>
    222.                             <td class="table-line">1td>
    223.                             <td>办公td>
    224.                             <td class="table-line">15td>
    225.                         tr>
    226.                         <tr>
    227.                             <td class="table-line">2td>
    228.                             <td>生产td>
    229.                             <td class="table-line">20td>
    230.                         tr>
    231.                         <tr>
    232.                             <td class="table-line" colspan="2">合计td>
    233.                             <td class="table-line">35td>
    234.                         tr>
    235.                     tbody>
    236.                 table>
    237.             div>

    3.3、相关服务列表界面

     相关代码：

    1.     <div class="nav">
    2.         <div class="nav-left">某某有限公司资产管理div>
    3.         <div class="nav-right">
    4.             <div class="nav-right-name">coding加油站  <i class="fa fa-caret-down" aria-hidden="true">i>
    5.             <dl class="nav-right-signout">
    6.                 <dd><a href="person_detail.html">修改密码a>dd>
    7.                 <dd><a href="login.html">退    出a>dd>
    8.             dl>
    9.                 div>
    10.         div>
    11.     div>
    12.     <div class="sidebar">
    13.         <ul>
    14.             <li><a href="index.html"><i class="fa fa-tachometer" aria-hidden="true">i><span class="">资产概览span>a>li>
    15.             <li><a href="server_list.html"><i class="fa fa-table" aria-hidden="true">i><span>生产服务器span>a>li>
    16.             <li class="active-li"><a href="bgserver_list.html"><i class="fa fa-th-large" aria-hidden="true">i><span class="">办公服务器span>a>li>
    17.             <li><a href="nonserver_list.html"><i class="fa fa-bars" aria-hidden="true">i><span class="">非服务器span>a>li>
    18.             <li><a href="person_list.html"><i class="fa fa-user" aria-hidden="true">i><span class="">人员管理span>a>li>
    19.             <li><a href="operater_log.html"><i class="fa fa-book" aria-hidden="true">i><span class="">日志记录span>a>li>
    20.         ul>
    21.     div>

    总结

    以上就是本次项目的全部内容，需要交流或者获取代码请关注微信公众号：coding加油站获取

  • 相关阅读:
    Redis发布订阅与原理
    【vue2第十三章】自定义指令 自定义v-loading指令
    RabbitMQ 死信队列
    什么是面向切面编程(AOP)？
    vite项目启动use `--host` to expose
    docker搭建个人镜像仓库
    rocketMq 安装
    全新力作—C++ string类的模拟实现
    QT QWT配置环境和运行
    Python基础入门例程1-NP1 Hello World!
  • 原文地址：https://blog.csdn.net/pandas23/article/details/126414188