• 【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.  <div class="navigation-menu-body">
    2.             <ul>
    3.                 <li class="navigation-divider">信息管理li>
    4.                 <li>
    5.                     <a href="index.html">
    6.                         <i class="nav-link-icon" data-feather="airplay">i>
    7.                         <span>首页span>
    8.                         <span class="badge badge-success">2span>
    9.                     a>
    10.                 li>
    11.                 <li>
    12.                     <a href="select_event.html">
    13.                         <i class="nav-link-icon" data-feather="clipboard">i>
    14.                         <span>事件记录span>
    15.                         <span class="badge badge-success">2span>
    16.                     a>
    17.                 li>
    18.                 <li>
    19.                     <a href="#">
    20.                         <i class="nav-link-icon" data-feather="feather">i>
    21.                         <span>老年人信息管理span>
    22.                     a>
    23.                     <ul>
    24.                         <li><a href="add_old.html">信息录入a>li>
    25.                         <li><a href="select_old.html">信息查询a>li>
    26.                         <li><a href="modify_old.html">信息删改a>li>
    27.                         <li><a href="analyze_old.html">统计分析a>li>
    28.                     ul>
    29.                 li>
    30.                 <li>
    31.                     <a href="#">
    32.                         <i class="nav-link-icon" data-feather="user">i>
    33.                         <span>工作人员信息管理span>
    34.                     a>
    35.                     <ul>
    36.                         <li><a href="add_worker.html">信息录入a>li>
    37.                         <li><a href="select_worker.html">信息查询a>li>
    38.                         <li><a href="modify_worker.html">信息删改a>li>
    39.                         <li><a href="analyze_worker.html">统计分析a>li>
    40.                     ul>
    41.                 li>
    42.                 <li>
    43.                     <a href="#">
    44.                         <i class="nav-link-icon" data-feather="users">i>
    45.                         <span>义工信息管理span>
    46.                     a>
    47.                     <ul>
    48.                         <li><a href="add_volunteer.html">信息录入a>li>
    49.                         <li><a href="select_volunteer.html">信息查询a>li>
    50.                         <li><a href="modify_volunteer.html">信息删改a>li>
    51.                         <li><a href="analyze_volunteer.html">统计分析a>li>
    52.                     ul>
    53.                 li>
    54.                 <li class="navigation-divider">系统管理li>
    55.                 <li>
    56.                     <a href="#">
    57.                         <i class="nav-link-icon" data-feather="database">i>
    58.                         <span>数据管理span>
    59.                     a>
    60.                     <ul>
    61.                         <li><a href="old_table.html">老人信息表a>li>
    62.                         <li><a href="worker_table.html">工作人员信息表a>li>
    63.                         <li><a href="volunteer_table.html">义工信息表a>li>
    64.                         <li><a href="event_table.html">事件信息表a>li>
    65.                         <li><a href="manager_table.html">系统管理员信息表a>li>
    66.                     ul>
    67.                 li>
    68.                 <li>
    69.                     <a href="#">
    70.                         <i class="nav-link-icon" data-feather="monitor">i>
    71.                         <span>摄像头管理span>
    72.                     a>
    73.                     <ul>
    74.                         <li><a href="monitor1.html">摄像头1a>li>
    75.                         <li><a href="monitor2.html">摄像头2a>li>
    76.                         <li><a href="monitor3.html">摄像头3a>li>
    77.                         <li><a href="monitor4.html">摄像头4a>li>
    78.                         <li><a href="monitor5.html">摄像头5a>li>
    79.                     ul>
    80.                 li>
    81.             ul>
    82.         div>

    3.2、事件记录

    相关代码：

    1.  <div id="main">
    2.  
    3.         
    4.         <div class="header">
    5.  
    6.             
    7.             <ul class="navbar-nav">
    8.  
    9.                 
    10.                 <li class="nav-item navigation-toggler">
    11.                     <a href="#" class="nav-link">
    12.                         <i data-feather="menu">i>
    13.                     a>
    14.                 li>
    15.                 
    16.  
    17.                 
    18.                 <li class="nav-item" id="header-logo">
    19.                     <a href="index.html">
    20.                         <img class="logo" src="../static/assets/media/image/logo.png" alt="logo">
    21.                         <img class="logo-sm" src="../static/assets/media/image/logo-sm.png" alt="small logo">
    22.                     a>
    23.                 li>
    24.                 
    25.             ul>
    26.             
    27.  
    28.             
    29.             <div class="header-right">
    30.                 <ul class="navbar-nav">
    31.  
    32.                     
    33.                     <li class="nav-item search-form">
    34.                         <div class="row">
    35.                             <div class="col-md-6">
    36.                                 <h4>智慧养老系统后台h4>
    37.                             div>
    38.                         div>
    39.                     li>
    40.                     
    41.  
    42.                     
    43.                     <li class="nav-item dropdown">
    44.                         <a href="#" class="nav-link" title="全屏" data-toggle="fullscreen">
    45.                             <i class="maximize" data-feather="maximize">i>
    46.                             <i class="minimize" data-feather="minimize">i>
    47.                         a>
    48.                     li>
    49.                     
    50.  
    51.                     
    52.                     <li class="nav-item dropdown">
    53.                         <a href="#" class="nav-link nav-link-notify" title="通知" data-toggle="dropdown">
    54.                             <i data-feather="bell">i>
    55.                         a>
    56.                         <div class="dropdown-menu dropdown-menu-right dropdown-menu-big">
    57.                             <div class="p-4 text-center" data-backround-image="assets/media/image/image1.png">
    58.                                 <h6 class="mb-1">通知h6>
    59.                             div>
    60.                             <div>
    61.                                 <ul class="list-group list-group-flush">
    62.                                     <li>
    63.                                         <a class="list-group-item d-flex align-items-center hide-show-toggler">
    64.                                             <div class="flex-grow-1">
    65.                                                 <p class="mb-0 line-height-20 d-flex justify-content-between">
    66.                                                     老年人信息录入成功
    67.                                                 p>
    68.                                                 <span class="text-muted small">1分钟前span>
    69.                                             div>
    70.                                         a>
    71.                                     li>
    72.                                     <li>
    73.                                         <a class="list-group-item d-flex align-items-center hide-show-toggler">
    74.                                             <div class="flex-grow-1">
    75.                                                 <p class="mb-0 line-height-20 d-flex justify-content-between">
    76.                                                     工作人员信息录入成功
    77.                                                 p>
    78.                                                 <span class="text-muted small">5分钟前span>
    79.                                             div>
    80.                                         a>
    81.                                     li>
    82.                                     <li>
    83.                                         <a class="list-group-item d-flex align-items-center hide-show-toggler">
    84.                                             <div class="flex-grow-1">
    85.                                                 <p class="mb-0 line-height-20 d-flex justify-content-between">
    86.                                                     老年人信息删除成功
    87.                                                 p>
    88.                                                 <span class="text-muted small">1小时前span>
    89.                                             div>
    90.                                         a>
    91.                                     li>
    92.                                     <li>
    93.                                         <a class="list-group-item d-flex align-items-center hide-show-toggler">
    94.                                             <div class="flex-grow-1">
    95.                                                 <p class="mb-0 line-height-20 d-flex justify-content-between">
    96.                                                     义工信息删除成功
    97.                                                 p>
    98.                                                 <span class="text-muted small">2小时前span>
    99.                                             div>
    100.                                         a>
    101.                                     li>
    102.                                 ul>
    103.                             div>
    104.                         div>
    105.                     li>
    106.                     
    107.                 ul>
    108.  
    109.                 
    110.                 <ul class="navbar-nav d-flex align-items-center">
    111.                     <li class="nav-item header-toggler">
    112.                         <a href="#" class="nav-link">
    113.                             <i data-feather="arrow-down">i>
    114.                         a>
    115.                     li>
    116.                 ul>
    117.                 
    118.             div>
    119.             
    120.         div>
    121.         
    122.  
    123.         
    124.         <div class="main-content">
    125.  
    126.             
    127.             <div class="container">
    128.  
    129.                 
    130.                 <div class="page-header">
    131.                     <h4>信息删改h4>
    132.                     <nav aria-label="breadcrumb">
    133.                         <ol class="breadcrumb">
    134.                             <li class="breadcrumb-item">
    135.                                 <a href="#">老年人信息管理a>
    136.                             li>
    137.                             <li class="breadcrumb-item active" aria-current="page">信息删改li>
    138.                         ol>
    139.                     nav>
    140.                 div>

    3.3、信息录入界面

    相关代码：

    1.     <div class="page-header">
    2.                     <h4>信息录入h4>
    3.                     <nav aria-label="breadcrumb">
    4.                         <ol class="breadcrumb">
    5.                             <li class="breadcrumb-item">
    6.                                 <a href="#">工作人员信息管理a>
    7.                             li>
    8.                             <li class="breadcrumb-item active" aria-current="page">信息录入li>
    9.                         ol>
    10.                     nav>
    11.                 div>
    12.                 
    13.  
    14.                 <div class="row">
    15.                     <div class="col-md-12">
    16.  
    17.                         <div class="card">
    18.                             <div class="card-body">
    19.  
    20.                                 <h6 class="card-title">工作人员信息录入h6>
    21.  
    22.                                 <div class="row">
    23.                                     <div class="col-md-8">
    24.                                         <form>
    25.                                             <div class="form-group row">
    26.                                                 <label class="col-sm-4 col-form-label">姓名label>
    27.                                                 <div class="col-sm-8">
    28.                                                     <input type="text" class="form-control" placeholder="请输入工作人员姓名">
    29.                                                 div>
    30.                                             div>
    31.                                             <fieldset class="form-group">
    32.                                                 <div class="row">
    33.                                                     <div class="col-form-label col-sm-4 pt-0">性别div>
    34.                                                     <div class="col-sm-8">
    35.                                                         <div class="form-check">
    36.                                                             <input class="form-check-input" type="radio"
    37.                                                                 name="gridRadios" id="gridRadios1" value="option1"
    38.                                                                 checked>
    39.                                                             <label class="form-check-label" for="gridRadios1">
    40.                                                                 男
    41.                                                             label>
    42.                                                         div>
    43.                                                         <div class="form-check">
    44.                                                             <input class="form-check-input" type="radio"
    45.                                                                 name="gridRadios" id="gridRadios2" value="option2">
    46.                                                             <label class="form-check-label" for="gridRadios2">
    47.                                                                 女
    48.                                                             label>
    49.                                                         div>
    50.                                                     div>
    51.                                                 div>
    52.                                             fieldset>
    53.                                             <div class="form-group row">
    54.                                                 <label class="col-sm-4 col-form-label">电话label>
    55.                                                 <div class="col-sm-8">
    56.                                                     <input type="text" class="form-control" placeholder="请输入电话号码">
    57.                                                 div>
    58.                                             div>
    59.                                             <div class="form-group row">
    60.                                                 <label class="col-sm-4 col-form-label">身份证号label>
    61.                                                 <div class="col-sm-8">
    62.                                                     <input type="text" class="form-control" placeholder="请输入身份证号">
    63.                                                 div>
    64.                                             div>
    65.                                             <div class="form-group row">
    66.                                                 <label class="col-sm-4 col-form-label">出生日期label>
    67.                                                 <div class="col-sm-8">
    68.                                                     <input type="text" class="J_Item" autocomplete="off" />
    69.                                                 div>
    70.                                             div>
    71.                                             <div class="form-group row">
    72.                                                 <label class="col-sm-4 col-form-label">入职日期label>
    73.                                                 <div class="col-sm-8">
    74.                                                     <input type="text" class="J_Item" autocomplete="off" />
    75.                                                 div>
    76.                                             div>
    77.                                             <div class="form-group row">
    78.                                                 <label class="col-sm-4 col-form-label">离职日期label>
    79.                                                 <div class="col-sm-8">
    80.                                                     <input type="text" class="J_Item" autocomplete="off" />
    81.                                                 div>
    82.                                             div>
    83.                                             <div class="form-group row">
    84.                                                 <label class="col-sm-4 col-form-label">图像目录label>
    85.                                                 <div class="col-sm-8">
    86.                                                     <input type="text" class="form-control" placeholder="请输入图像目录">
    87.                                                 div>
    88.                                             div>
    89.                                             <div class="form-group row">
    90.                                                 <label class="col-sm-4 col-form-label">头像路径label>
    91.                                                 <div class="col-sm-8">
    92.                                                     <div class="fileinput fileinput-new" data-provides="fileinput"
    93.                                                         id="exampleInputUpload">
    94.                                                         <div class="fileinput-new thumbnail"
    95.                                                             style="width: 200px;height: auto;max-height:150px;">
    96.                                                             <img id='picImg'
    97.                                                                 style="width: 100%;height: auto;max-height: 140px;"
    98.                                                                 src="../static/assets/media/images/noimage.png"
    99.                                                                 alt="" />
    100.                                                         div>
    101.                                                         <div class="fileinput-preview fileinput-exists thumbnail"
    102.                                                             style="max-width: 200px; max-height: 150px;">div>
    103.                                                         <div>
    104.                                                             <span class="btn btn-primary btn-file">
    105.                                                                 <span class="fileinput-new">选择文件span>
    106.                                                                 <span class="fileinput-exists">换一张span>
    107.                                                                 <input type="file" name="pic1" id="picID"
    108.                                                                     accept="image/gif,image/jpeg,image/x-png">
    109.                                                             span>
    110.                                                             <a href="javascript:;"
    111.                                                                 class="btn btn-warning fileinput-exists"
    112.                                                                 data-dismiss="fileinput">移除a>
    113.                                                         div>
    114.                                                     div>
    115.                                                 div>
    116.                                             div>
    117.                                             <div class="form-group row">
    118.                                                 <label class="col-sm-4 col-form-label">描述label>
    119.                                                 <div class="col-sm-8">
    120.                                                     <textarea class="form-control" rows="3"
    121.                                                         placeholder="请输入描述内容">textarea>
    122.                                                 div>
    123.                                             div>
    124.                                             <div class="form-group row">
    125.                                                 <label class="col-sm-4 col-form-label">删除标志label>
    126.                                                 <div class="col-sm-8">
    127.                                                     <input type="text" class="form-control" placeholder="请输入删除标志">
    128.                                                 div>
    129.                                             div>
    130.                                             <button type="submit" class="btn btn-primary">录入信息button>
    131.                                         form>
    132.                                     div>
    133.                                 div>
    134.  
    135.                             div>
    136.                         div>
    137.  
    138.                     div>
    139.                 div>

    4、代码结构图

    总结

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

  • 相关阅读:
    第四代可燃气体监测仪：可燃气体监测仪效果有哪些？
    python 给图片添加噪声
    3.JS数组求和的几种方法
    题解0014：信奥一本通1472——The XOR Largest Pair（字典树）
    每次遇到sass 总要出问题，yarn不行，用cnpm i 就顺利了
    Django——视图
    reghdfe：多维面板固定效应估计
    Linux 页表管理（二）
    群晖-使用docker套件部署Prometheus+Grafana
    浏览器的兼容性问题如何解决
  • 原文地址：https://blog.csdn.net/pandas23/article/details/126440294