HTML期末作业-基于HTML+CSS+JavaScript制作学生信息管理系统1页带增删改功能

源码获取 文末联系

Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 学生管理系统网页设计 | OA管理系统 | 后台管理模板 | 智能停车系统 | 等网站的设计与制作 | HTML期末大学生网页设计作业

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. JavaScript:做与用户的交互行为

文章目录

  • 前端学习路线
  • 网页基本结构
  • 网页演示
    • HTML结构代码
  • 学的反而越迷茫
  • 学习更多


前端学习路线

(1)html文件:其中index.html是首页、其他html为二级页面;
(2)css文件:css全部页面样式,文字滚动, 图片放大等;
(3)js文件:js实现动态轮播特效, 表单提交, 点击事件等等(网页中运用到js代码)

网页基本结构

(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个  
(2)二级页面:从首页点击进入之后的页面叫做二级页面
(3)三级页面:从二级页面点击进入的页面

网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的
首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单:是指位于页面顶部或者侧边区域的,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用.
网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。


网页演示

HTML期末作业-基于HTML+CSS+JavaScript制作学生信息管理系统1页带增删改功能_第1张图片

HTML结构代码



DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理系统title>
    <link rel="stylesheet" type="text/css" href="css/studentInformationManage.css">
head>
<body>

        <div class="wrapperBox">
            <div class="header">
                <div class="headerTitle">
                    <div class="headerLine">学生信息管理系统div>
                div>
                <div class="headerButton">
                    <button class="addButton">新增button>
                    <button id="deleteButton">删除button>
                div>
            div>
            <div class="container">
                <table id="containerTable">
                    <thead class="tableHeaher">
                    <tr>
                        <th><input type="checkbox">th>
                        <th>序号th>
                        <th>学号th>
                        <th>姓名th>
                        <th>学院th>
                        <th>专业th>
                        <th>年级th>
                        <th>班级th>
                        <th>年龄th>
                        <th>操作th>
                    tr>
                    thead>

                    <tbody id="tdata">
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">1td>
                        <td class="stuId">2018112030500td>
                        <td class="stuName">张三td>
                        <td class="stuAcademy">物电学院td>
                        <td class="stuMajor">物理学td>
                        <td class="stuYear">2018td>
                        <td class="stuClass">1td>
                        <td class="stuAge">21td>
                        <td>

                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">2td>
                        <td class="stuId">2018112030501td>
                        <td class="stuName">李四td>
                        <td class="stuAcademy">物电学院td>
                        <td class="stuMajor">物理学td>
                        <td class="stuYear">2018td>
                        <td class="stuClass">1td>
                        <td class="stuAge">21td>
                        <td>
                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">3td>
                        <td class="stuId">2018112030502td>
                        <td class="stuName">王五td>
                        <td class="stuAcademy">物电学院td>
                        <td class="stuMajor">物理学td>
                        <td class="stuYear">2018td>
                        <td class="stuClass">1td>
                        <td class="stuAge">21td>
                        <td>
                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">4td>
                        <td class="stuId">2018112030510td>
                        <td class="stuName">赵六td>
                        <td class="stuAcademy">物电学院td>
                        <td class="stuMajor">电子信息工程td>
                        <td class="stuYear">2018td>
                        <td class="stuClass">5td>
                        <td class="stuAge">21td>
                        <td>

                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">5td>
                        <td class="stuId">20181120305117td>
                        <td class="stuName">张三td>
                        <td class="stuAcademy">物电学院td>
                        <td class="stuMajor">电子信息工程td>
                        <td class="stuYear">2018td>
                        <td class="stuClass">5td>
                        <td class="stuAge">21td>
                        <td>

                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">6td>
                        <td class="stuId">2018112030520td>
                        <td class="stuName">张三td>
                        <td class="stuAcademy">物电学院td>
                        <td class="stuMajor">电子信息工程td>
                        <td class="stuYear">2018td>
                        <td class="stuClass">5td>
                        <td class="stuAge">21td>
                        <td>

                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">7td>
                        <td class="stuId">2018112030601td>
                        <td class="stuName">王五td>
                        <td class="stuAcademy">物电学院td>
                        <td class="stuMajor">光学td>
                        <td class="stuYear">2018td>
                        <td class="stuClass">6td>
                        <td class="stuAge">21td>
                        <td>

                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">8td>
                        <td class="stuId">2018112030602td>
                        <td class="stuName">张三td>
                        <td class="stuAcademy">物电学院td>
                        <td class="stuMajor">光学td>
                        <td class="stuYear">2018td>
                        <td class="stuClass">6td>
                        <td class="stuAge">21td>
                        <td>

                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">9td>
                        <td class="stuId">2018112030603td>
                        <td class="stuName">张三td>
                        <td class="stuAcademy">物电学院td>
                        <td class="stuMajor">光学td>
                        <td class="stuYear">2018td>
                        <td class="stuClass">6td>
                        <td class="stuAge">21td>
                        <td>

                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">10td>
                        <td class="stuId">2018112030604td>
                        <td class="stuName">张三td>
                        <td class="stuAcademy">物电学院td>
                        <td class="stuMajor">光电td>
                        <td class="stuYear">2018td>
                        <td class="stuClass">6td>
                        <td class="stuAge">21td>
                        <td>

                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">1td>
                        <td class="stuId">2018112030605td>
                        <td class="stuName">王大大td>
                        <td class="stuAcademy">应用技术学院td>
                        <td class="stuMajor">修路td>
                        <td class="stuYear">2015td>
                        <td class="stuClass">2td>
                        <td class="stuAge">21td>
                        <td>

                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">1td>
                        <td class="stuId">2018112030606td>
                        <td class="stuName">王小小td>
                        <td class="stuAcademy">物电学院td>
                        <td class="stuMajor">光电td>
                        <td class="stuYear">2018td>
                        <td class="stuClass">6td>
                        <td class="stuAge">21td>
                        <td>

                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">1td>
                        <td class="stuId">11503080210td>
                        <td class="stuName">张三td>
                        <td class="stuAcademy">计算机科学与工程学院td>
                        <td class="stuMajor">软件工程td>
                        <td class="stuYear">2015td>
                        <td class="stuClass">2td>
                        <td class="stuAge">21td>
                        <td>

                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">1td>
                        <td class="stuId">11503080210td>
                        <td class="stuName">李四td>
                        <td class="stuAcademy">会计学院td>
                        <td class="stuMajor">会计学td>
                        <td class="stuYear">2015td>
                        <td class="stuClass">2td>
                        <td class="stuAge">19td>
                        <td>
                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">1td>
                        <td class="stuId">11503080210td>
                        <td class="stuName">王五td>
                        <td class="stuAcademy">理学院td>
                        <td class="stuMajor">软件工程td>
                        <td class="stuYear">2015td>
                        <td class="stuClass">2td>
                        <td class="stuAge">18td>
                        <td>
                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">1td>
                        <td class="stuId">11503080210td>
                        <td class="stuName">赵六td>
                        <td class="stuAcademy">理学院td>
                        <td class="stuMajor">软件工程td>
                        <td class="stuYear">2000td>
                        <td class="stuClass">6td>
                        <td class="stuAge">21td>
                        <td>

                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">1td>
                        <td class="stuId">11503080210td>
                        <td class="stuName">张三td>
                        <td class="stuAcademy">计算机科学与工程学院td>
                        <td class="stuMajor">软件工程td>
                        <td class="stuYear">2015td>
                        <td class="stuClass">2td>
                        <td class="stuAge">21td>
                        <td>

                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">1td>
                        <td class="stuId">11503080210td>
                        <td class="stuName">李四td>
                        <td class="stuAcademy">会计学院td>
                        <td class="stuMajor">会计学td>
                        <td class="stuYear">2015td>
                        <td class="stuClass">2td>
                        <td class="stuAge">19td>
                        <td>
                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">1td>
                        <td class="stuId">11503080210td>
                        <td class="stuName">王五td>
                        <td class="stuAcademy">理学院td>
                        <td class="stuMajor">软件工程td>
                        <td class="stuYear">2015td>
                        <td class="stuClass">2td>
                        <td class="stuAge">18td>
                        <td>
                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">1td>
                        <td class="stuId">11503080210td>
                        <td class="stuName">赵六td>
                        <td class="stuAcademy">理学院td>
                        <td class="stuMajor">软件工程td>
                        <td class="stuYear">2000td>
                        <td class="stuClass">6td>
                        <td class="stuAge">21td>
                        <td>

                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">1td>
                        <td class="stuId">11503080210td>
                        <td class="stuName">张三td>
                        <td class="stuAcademy">计算机科学与工程学院td>
                        <td class="stuMajor">软件工程td>
                        <td class="stuYear">2015td>
                        <td class="stuClass">2td>
                        <td class="stuAge">21td>
                        <td>

                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">1td>
                        <td class="stuId">11503080210td>
                        <td class="stuName">李四td>
                        <td class="stuAcademy">会计学院td>
                        <td class="stuMajor">会计学td>
                        <td class="stuYear">2015td>
                        <td class="stuClass">2td>
                        <td class="stuAge">19td>
                        <td>
                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">1td>
                        <td class="stuId">11503080210td>
                        <td class="stuName">王五td>
                        <td class="stuAcademy">理学院td>
                        <td class="stuMajor">软件工程td>
                        <td class="stuYear">2015td>
                        <td class="stuClass">2td>
                        <td class="stuAge">18td>
                        <td>
                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">1td>
                        <td class="stuId">11503080210td>
                        <td class="stuName">赵六td>
                        <td class="stuAcademy">理学院td>
                        <td class="stuMajor">软件工程td>
                        <td class="stuYear">2000td>
                        <td class="stuClass">6td>
                        <td class="stuAge">21td>
                        <td>

                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">1td>
                        <td class="stuId">11503080210td>
                        <td class="stuName">张三td>
                        <td class="stuAcademy">计算机科学与工程学院td>
                        <td class="stuMajor">软件工程td>
                        <td class="stuYear">2015td>
                        <td class="stuClass">2td>
                        <td class="stuAge">21td>
                        <td>

                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">1td>
                        <td class="stuId">11503080210td>
                        <td class="stuName">李四td>
                        <td class="stuAcademy">会计学院td>
                        <td class="stuMajor">会计学td>
                        <td class="stuYear">2015td>
                        <td class="stuClass">2td>
                        <td class="stuAge">19td>
                        <td>
                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">1td>
                        <td class="stuId">11503080210td>
                        <td class="stuName">王五td>
                        <td class="stuAcademy">理学院td>
                        <td class="stuMajor">软件工程td>
                        <td class="stuYear">2015td>
                        <td class="stuClass">2td>
                        <td class="stuAge">18td>
                        <td>
                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>
                    <tr class="trHover">
                        <td><input type="checkbox">td>
                        <td class="stuSequence">1td>
                        <td class="stuId">11503080210td>
                        <td class="stuName">赵六td>
                        <td class="stuAcademy">理学院td>
                        <td class="stuMajor">软件工程td>
                        <td class="stuYear">2000td>
                        <td class="stuClass">6td>
                        <td class="stuAge">21td>
                        <td>

                            <a class="viewInf ">查看a>
                            <a class="updateInf ">修改a>

                        td>
                    tr>

                    tbody>
                    <tfoot>

                    tfoot>
                    tbody>
                table>
                
                <div class="modal addfade" id="addmodal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <i>Xi>
                                <h4>新增学生信息h4>
                            div>
                            <div class="modal-body">

                                <p>
                                    序号:<input type="text" />
                                p>
                                <p>
                                    学号:<input type="text" />
                                p>
                                <p>
                                    姓名:<input type="text" />
                                p>
                                <p>
                                    学院:<input type="text" />
                                p>
                                <p>
                                    专业:<input type="text" />
                                p>
                                <p>
                                    年级:<input type="text" />
                                p>
                                <p>
                                    班级:<input type="text" />
                                p>
                                <p>
                                    年龄:<input type="text" />
                                p>
                            div>
                            <div class="modal-footer">
                                <div class="pageInfoBox">div>
                                <button class="addButton_ok">确定button>
                                <button class="addButton_no">取消button>
                            div>
                        div>
                    div>
                div>



                
                <div class="modal movefade movemodal" id="movemodal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <i>Xi>
                                <h4>修改学生信息h4>
                            div>
                            <div class="modal-body">
                                <p>
                                    序号:<input type="text" />
                                p>
                                <p>
                                    学号:<input type="text" />
                                p>
                                <p>
                                    姓名:<input type="text" />
                                p>
                                <p>
                                    学院:<input type="text" />
                                p>
                                <p>
                                    专业:<input type="text" />
                                p>
                                <p>
                                    年级:<input type="text" />
                                p>
                                <p>
                                    班级:<input type="text" />
                                p>
                                <p>
                                    年龄:<input type="text" />
                                p>
                            div>
                            <div class="modal-footer">
                                <button class="updatabtn_ok">保存button>
                                <button class="updatabtn_no">取消button>
                            div>
                        div>
                    div>
                div>



                
                <div class="modal viewfade" id="viewmodal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <i>Xi>
                                <h4>查看学生信息h4>
                            div>
                            <div class="modal-body">
                                <p>
                                    序号:<input type="text" class="viewStyle" disabled="disabled" />
                                p>
                                <p>
                                    学号:<input type="text" />
                                p>
                                <p>
                                    姓名:<input type="text" />
                                p>
                                <p>
                                    学院:<input type="text" />
                                p>
                                <p>
                                    专业:<input type="text" />
                                p>
                                <p>
                                    年级:<input type="text" />
                                p>
                                <p>
                                    班级:<input type="text" />
                                p>
                                <p>
                                    年龄:<input type="text" />
                                p>
                            div>
                            <div class="modal-footer">
                                <button class="addButton_no">取消button>
                            div>
                        div>
                    div>
                div>
            div>
            <div class="footer">
                <div class="pageInformation"><span id="curPage">span>页,
                    共<span id="countPage">span>条,(每页显示20条)
                    <input id="page" type="text"style="display: none" >
                div>
                <div class="pageButton">
                    <button id="prePageButton">上一页button>
                    <button id="nextPageButton">下一页button>
                div>
            div>
        div>
        <script src="js/jquery.min.js">script>
        <script src="js/studentInformationManage.js">script>
body>
html>


学的反而越迷茫

有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光
—————————————————


学习更多

关注我 | 点赞博文 | 每天带你涨知识


在这里插入图片描述

你可能感兴趣的:(web前端期末大作业,javascript,html,css,bootstrap,html5)