⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 学生管理系统网页设计 | OA管理系统 | 后台管理模板 | 智能停车系统 | 等网站的设计与制作 | HTML期末大学生网页设计作业
HTML:结构
CSS:样式
在操作方面上运用了html5和css3,
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
JavaScript:做与用户的交互行为
(1)html文件:其中index.html是首页、其他html为二级页面;
(2)css文件:css全部页面样式,文字滚动, 图片放大等;
(3)js文件:js实现动态轮播特效, 表单提交, 点击事件等等(网页中运用到js代码)
(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个
(2)二级页面:从首页点击进入之后的页面叫做二级页面
(3)三级页面:从二级页面点击进入的页面
网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的
首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单:是指位于页面顶部或者侧边区域的,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用.
网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。
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%,你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?
所以,放松心态吧,好好享受大学时光
—————————————————
关注我 | 点赞博文 | 每天带你涨知识