⛵Obtenga el código fuente y el contacto al final del artículo✈
Descripción de la tecnología de desarrollo web front-end tema de diseño web, producción de diseño DIV+CSS, asignación final del curso de diseño web HTML+CSS | diseño web del sistema de gestión de estudiantes | sistema de gestión OA | plantilla de gestión de fondo | sistema de estacionamiento inteligente | y otros diseños y producción de sitios web | Tarea final de diseño web de HTML para la universidad
-
HTML: estructura
-
CSS: estilo
En términos de operación, se utilizan html5 y css3, y se
adoptan conocimientos básicos como estructura div+css, forma, hipervínculo, flotante, posicionamiento absoluto, posicionamiento relativo, estilo de fuente y video de referencia. -
JavaScript: hacer comportamiento interactivo con el usuario
Directorio de artículos
Ruta de aprendizaje frontal
(1) archivo html: donde index.html es la página de inicio y otro html es la página de segundo nivel; (
2) archivo css: css todos los estilos de página, desplazamiento de texto, zoom de imagen, etc.;
(3) archivo js : js realiza efectos especiales de carrusel dinámico, envío de formularios, evento de clic, etc. (el código js se usa en páginas web)
Estructura básica de la página web.
(1) Página de inicio: la primera página que ve cuando ingresa a la página web (LOGO, nombre de la empresa, navegación, banner, noticias, información relacionada, información inferior, generalmente el banner es 5) (2) Página secundaria: después de hacer clic para ingresar desde el
página de inicio La página se llama página de segundo nivel
(3) Página de tercer nivel: la página en la que se hizo clic desde la página de segundo nivel
Página web html : una página web es el elemento básico de un sitio web y una plataforma para llevar varias aplicaciones de sitios web.
En términos sencillos, un sitio web es una página de inicio compuesta de páginas web : la página de inicio es la
página de entrada de un sitio web, por lo que a menudo se edita para que sea más fácil de entender El área superior o lateral, también conocida como la barra de navegación , desempeña la función de vincular varias páginas en el sitio o software
Pie de página de la página web : Es el área en la parte inferior de cada página en la página web. A menudo se utiliza para mostrar información adicional. Como autor, número de registro, etc.
demostración web
código de estructura 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">1</td>
<td class="stuId">2018112030500</td>
<td class="stuName">张三</td>
<td class="stuAcademy">物电学院</td>
<td class="stuMajor">物理学</td>
<td class="stuYear">2018</td>
<td class="stuClass">1</td>
<td class="stuAge">21</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">2</td>
<td class="stuId">2018112030501</td>
<td class="stuName">李四</td>
<td class="stuAcademy">物电学院</td>
<td class="stuMajor">物理学</td>
<td class="stuYear">2018</td>
<td class="stuClass">1</td>
<td class="stuAge">21</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">3</td>
<td class="stuId">2018112030502</td>
<td class="stuName">王五</td>
<td class="stuAcademy">物电学院</td>
<td class="stuMajor">物理学</td>
<td class="stuYear">2018</td>
<td class="stuClass">1</td>
<td class="stuAge">21</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">4</td>
<td class="stuId">2018112030510</td>
<td class="stuName">赵六</td>
<td class="stuAcademy">物电学院</td>
<td class="stuMajor">电子信息工程</td>
<td class="stuYear">2018</td>
<td class="stuClass">5</td>
<td class="stuAge">21</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">5</td>
<td class="stuId">20181120305117</td>
<td class="stuName">张三</td>
<td class="stuAcademy">物电学院</td>
<td class="stuMajor">电子信息工程</td>
<td class="stuYear">2018</td>
<td class="stuClass">5</td>
<td class="stuAge">21</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">6</td>
<td class="stuId">2018112030520</td>
<td class="stuName">张三</td>
<td class="stuAcademy">物电学院</td>
<td class="stuMajor">电子信息工程</td>
<td class="stuYear">2018</td>
<td class="stuClass">5</td>
<td class="stuAge">21</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">7</td>
<td class="stuId">2018112030601</td>
<td class="stuName">王五</td>
<td class="stuAcademy">物电学院</td>
<td class="stuMajor">光学</td>
<td class="stuYear">2018</td>
<td class="stuClass">6</td>
<td class="stuAge">21</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">8</td>
<td class="stuId">2018112030602</td>
<td class="stuName">张三</td>
<td class="stuAcademy">物电学院</td>
<td class="stuMajor">光学</td>
<td class="stuYear">2018</td>
<td class="stuClass">6</td>
<td class="stuAge">21</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">9</td>
<td class="stuId">2018112030603</td>
<td class="stuName">张三</td>
<td class="stuAcademy">物电学院</td>
<td class="stuMajor">光学</td>
<td class="stuYear">2018</td>
<td class="stuClass">6</td>
<td class="stuAge">21</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">10</td>
<td class="stuId">2018112030604</td>
<td class="stuName">张三</td>
<td class="stuAcademy">物电学院</td>
<td class="stuMajor">光电</td>
<td class="stuYear">2018</td>
<td class="stuClass">6</td>
<td class="stuAge">21</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">1</td>
<td class="stuId">2018112030605</td>
<td class="stuName">王大大</td>
<td class="stuAcademy">应用技术学院</td>
<td class="stuMajor">修路</td>
<td class="stuYear">2015</td>
<td class="stuClass">2</td>
<td class="stuAge">21</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">1</td>
<td class="stuId">2018112030606</td>
<td class="stuName">王小小</td>
<td class="stuAcademy">物电学院</td>
<td class="stuMajor">光电</td>
<td class="stuYear">2018</td>
<td class="stuClass">6</td>
<td class="stuAge">21</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">1</td>
<td class="stuId">11503080210</td>
<td class="stuName">张三</td>
<td class="stuAcademy">计算机科学与工程学院</td>
<td class="stuMajor">软件工程</td>
<td class="stuYear">2015</td>
<td class="stuClass">2</td>
<td class="stuAge">21</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">1</td>
<td class="stuId">11503080210</td>
<td class="stuName">李四</td>
<td class="stuAcademy">会计学院</td>
<td class="stuMajor">会计学</td>
<td class="stuYear">2015</td>
<td class="stuClass">2</td>
<td class="stuAge">19</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">1</td>
<td class="stuId">11503080210</td>
<td class="stuName">王五</td>
<td class="stuAcademy">理学院</td>
<td class="stuMajor">软件工程</td>
<td class="stuYear">2015</td>
<td class="stuClass">2</td>
<td class="stuAge">18</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">1</td>
<td class="stuId">11503080210</td>
<td class="stuName">赵六</td>
<td class="stuAcademy">理学院</td>
<td class="stuMajor">软件工程</td>
<td class="stuYear">2000</td>
<td class="stuClass">6</td>
<td class="stuAge">21</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">1</td>
<td class="stuId">11503080210</td>
<td class="stuName">张三</td>
<td class="stuAcademy">计算机科学与工程学院</td>
<td class="stuMajor">软件工程</td>
<td class="stuYear">2015</td>
<td class="stuClass">2</td>
<td class="stuAge">21</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">1</td>
<td class="stuId">11503080210</td>
<td class="stuName">李四</td>
<td class="stuAcademy">会计学院</td>
<td class="stuMajor">会计学</td>
<td class="stuYear">2015</td>
<td class="stuClass">2</td>
<td class="stuAge">19</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">1</td>
<td class="stuId">11503080210</td>
<td class="stuName">王五</td>
<td class="stuAcademy">理学院</td>
<td class="stuMajor">软件工程</td>
<td class="stuYear">2015</td>
<td class="stuClass">2</td>
<td class="stuAge">18</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">1</td>
<td class="stuId">11503080210</td>
<td class="stuName">赵六</td>
<td class="stuAcademy">理学院</td>
<td class="stuMajor">软件工程</td>
<td class="stuYear">2000</td>
<td class="stuClass">6</td>
<td class="stuAge">21</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">1</td>
<td class="stuId">11503080210</td>
<td class="stuName">张三</td>
<td class="stuAcademy">计算机科学与工程学院</td>
<td class="stuMajor">软件工程</td>
<td class="stuYear">2015</td>
<td class="stuClass">2</td>
<td class="stuAge">21</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">1</td>
<td class="stuId">11503080210</td>
<td class="stuName">李四</td>
<td class="stuAcademy">会计学院</td>
<td class="stuMajor">会计学</td>
<td class="stuYear">2015</td>
<td class="stuClass">2</td>
<td class="stuAge">19</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">1</td>
<td class="stuId">11503080210</td>
<td class="stuName">王五</td>
<td class="stuAcademy">理学院</td>
<td class="stuMajor">软件工程</td>
<td class="stuYear">2015</td>
<td class="stuClass">2</td>
<td class="stuAge">18</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">1</td>
<td class="stuId">11503080210</td>
<td class="stuName">赵六</td>
<td class="stuAcademy">理学院</td>
<td class="stuMajor">软件工程</td>
<td class="stuYear">2000</td>
<td class="stuClass">6</td>
<td class="stuAge">21</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">1</td>
<td class="stuId">11503080210</td>
<td class="stuName">张三</td>
<td class="stuAcademy">计算机科学与工程学院</td>
<td class="stuMajor">软件工程</td>
<td class="stuYear">2015</td>
<td class="stuClass">2</td>
<td class="stuAge">21</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">1</td>
<td class="stuId">11503080210</td>
<td class="stuName">李四</td>
<td class="stuAcademy">会计学院</td>
<td class="stuMajor">会计学</td>
<td class="stuYear">2015</td>
<td class="stuClass">2</td>
<td class="stuAge">19</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">1</td>
<td class="stuId">11503080210</td>
<td class="stuName">王五</td>
<td class="stuAcademy">理学院</td>
<td class="stuMajor">软件工程</td>
<td class="stuYear">2015</td>
<td class="stuClass">2</td>
<td class="stuAge">18</td>
<td>
<a class="viewInf ">查看</a>
<a class="updateInf ">修改</a>
</td>
</tr>
<tr class="trHover">
<td><input type="checkbox"></td>
<td class="stuSequence">1</td>
<td class="stuId">11503080210</td>
<td class="stuName">赵六</td>
<td class="stuAcademy">理学院</td>
<td class="stuMajor">软件工程</td>
<td class="stuYear">2000</td>
<td class="stuClass">6</td>
<td class="stuAge">21</td>
<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>X</i>
<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>X</i>
<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>X</i>
<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>
Cuanto más aprendes, más confundido te vuelves
Es normal sentirse así, porque realmente no has estado en la empresa y no sabes cuánto necesitas aprender para ser competente en el trabajo que se te ha asignado en la empresa. Puedo ver por su declaración que sus cimientos aún deben ser muy sólidos. Definitivamente no hay problema para seguir el conjunto completo de tutoriales en video en Internet.
Cuando ingrese a la empresa en el futuro y descubra que la dificultad y la cantidad de trabajo son solo alrededor del 20% de su período de estudio, puede suspirar: Entonces, el trabajo no es más que eso.
Esto es normal, porque la mayoría de las empresas lo contratan para trabajar y escribir negocios, no para permitirle ser un recién llegado para desarrollar la estructura de la empresa. Son todas cosas prefabricadas, lo que tienes que hacer es agregar ladrillos y tejas bajo la guía de otros y dirigirlos de la mano. En ese momento, me temo que exclamarás: ¿Esto es todo?
Entonces, relájate y disfruta de tu tiempo universitario
—————————————————
aprende más
Sígueme | Dar me gusta a las publicaciones del blog | Llevarte a aumentar tus conocimientos todos los días
