学生信息管理系统MIS(前端)

在这里插入图片描述

在这里插入图片描述

改造HTML文件


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>学生信息管理系统MIS</title><!-- link在HTML文件中,引入外部的css文件 rel的值是固定写法,stylesheet样式表href用来指定样式表的位置--><link rel="stylesheet" href="student.css"/></head><body><!-- 提供表单来提交学生的数据 --><form><h1>学生信息管理系统MIS</h1><table><tr><td>姓名: <br /><input class="a" type="text" name="user" placeholder="请输入姓名.."/></td></tr><tr><td>年龄: <br /><input class="a" type="number" name="age" placeholder="请输入年龄.."/></td></tr><tr><td>性别:(单选框) <input type="radio" name="sex" value="1" checked="checked"/><input type="radio" name="sex" value="0"/></td></tr><tr><td>爱好:(多选) <input type="checkbox" name="like" value="ppq" checked="checked"/>乒乓球<input type="checkbox" name="like" value="ps"/>爬山<input type="checkbox" name="like" value="cg"/>唱歌</td></tr><tr><td>学历:(下拉框)  <select name="edu"><option value="1">本科</option><option value="2">专科</option><option value="3">研究生</option><option value="4">小学</option></select></td></tr><tr><td>入学日期:  <br /><input type="date" name="intime"/></td></tr><tr><td><button type="submit" id="btn1">保存</button><button type="reset" id="btn2">取消</button></td></tr></table></form></body>
</html>

创建css文件,提取css代码


/* 输入框 */
.a{width: 320px;height: 30px;
}
/* 保存按钮 */
#btn1{background-color: #0000FF; /* 背景色 */color: white; /* 文字颜色 */border-color: #0000FF; /* 边框颜色 */width: 50px; /* 宽度 */height: 30px; /* 高度 */
}
/* 取消按钮 */
#btn2{background-color: hotpink; /* 背景色 */border-color: hotpink; /* 边框颜色 */color: white; /* 文字颜色 */width: 50px; /* 宽度 */height: 30px; /* 高度 */
}

在这里插入图片描述

在这里插入图片描述

创建HTML网页文件


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>用户注册</title><!--HTML中引入css文件 --><link rel="stylesheet" href="regist.css" /></head><body><form method="post" action="#"><h3>用户注册</h3><div><input class="a" type="text" placeholder="用户名" name="user"/></div><div><span>支持中文、字母、数字、“-”、“_”的组合,4-20个字符</span></div><div><input class="a" type="password" placeholder="设置密码" name="pwd"/></div><div><span>建议使用数字、字母和符号两种以上的组合,6-20个字符</span></div><div><input class="a" type="password" placeholder="确认密码" name="repwd"/></div><div><span>两次密码输入不一致</span></div><div><input class="a" type="number" placeholder="验证手机" name="tel"/><a href="#">验证邮箱</a></div><div id="readme"><input type="checkbox"/>我已阅读并同意<a href="#">《京淘用户注册协议》</a></div><div><button type="submit">立即注册</button></div></form></body>
</html>

创建css文件

/* 输入框 */
.a{width: 350px;/* 宽度 */height: 30px;/* 高度 */padding: 5px;/* 内边距 */
}
/* 按钮 */
button{width: 360px;/* 宽度 */height: 40px;/* 高度 */background-color: red;/* 背景色 */border-color: red;/* 边框颜色 */color: white;/* 文字颜色 */font-size: 20px;/* 文字字号 */
}
/* 提示文字 */
span{font-size: 5px;/* 字号变小 */color: gray;/* 灰色的字 */padding: 20px; /* 内边距 */
}
/* 设置用户注册 */
h3{/*text-align: center;文本居中 */padding-left: 130px;/* 左边距 */
}
/* 修饰我已阅读 */
#readme{padding: 15px;/* 左边距 */
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/116412.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

volatile 关键字 与 CPU cache line 的效率问题

分析&回答 Cache Line可以简单的理解为CPU Cache中的最小缓存单位。目前主流的CPU Cache的Cache Line大小都是64Bytes。假设我们有一个512字节的一级缓存&#xff0c;那么按照64B的缓存单位大小来算&#xff0c;这个一级缓存所能存放的缓存个数就是512/64 8个。具体参见下…

jmeter单接口和多接口测试

最近接触到了多接口串联&#xff0c;接口串联的技术会在其他帖子有说明&#xff0c;其核心技术点就是通过正则表达式和变量来实现接口的关联。目前为止呢笔者用到的地方还只有一个&#xff0c;就是关于session保持的时候。但是看到很多资料都说测试过程中经常遇到b接口需要用a接…

微信小程序地图应用总结版

1.应用场景&#xff1a;展示公司位置&#xff0c;并打开第三方app&#xff08;高德&#xff0c;腾讯&#xff09;导航到目标位置。 &#xff08;1&#xff09;展示位置地图 uniapp官网提供了相关组件&#xff0c;uniapp-map组件 具体用法&#xff1a; html结构 <map sty…

Docker 容器学习笔记

Docker 容器学习笔记 容器的由来 早先&#xff0c;虚拟机通过操作系统实现相互隔离&#xff0c;保证应用程序在运行时相互独立&#xff0c;避免相互干扰。但是操作系统又笨又重&#xff0c;耗费资源严重&#xff1a; 容器技术只隔离应用程序的运行时环境但容器之间共享同一个…

【git】从一个git仓库迁移到另外一个git仓库

在远端服务器创建一个新的仓库 用界面创建&#xff0c;当然也可以用命令创建 拉去源仓库 git clone --bare git192.168.10.10:java/common.gitgit clone --bare <旧仓库地址>拉去成功以后会出现 进入到文件夹内部 出现下面信息&#xff1a; 推送到新的远端仓库 git …

Java从入门到精通-流程控制(一)

流程控制 1.复合语句 复合语句&#xff0c;也称为代码块&#xff0c;是一组Java语句&#xff0c;用大括号 {} 括起来&#xff0c;它们可以被视为单个语句。复合语句通常用于以下情况&#xff1a; - 在控制结构&#xff08;如条件语句和循环&#xff09;中包含多个语句。 - …

ROS机器人编程---------(二)ROS中的核心概念

ROS机器人编程 ROS中的核心概念 ROS的通信机制 在ROS中结点是最小单元&#xff0c;比如说机器人的遥控器可以作为一个控制结点&#xff0c;机器人上的摄像头也可以看作一个结点&#xff0c;ROS通过协调各个结点来实现 在启动任何ROS结点之前&#xff0c;都必须先启动ROS Mas…

Upload-labs 1~15 通关详细教程

文章目录 Upload-labs 1~15 通关详细教程Pass-01-前端js验证Pass-02-后端MIME验证Pass-03-黑名单验证Pass-04-黑名单验证.htaccessPass-05-文件后缀名大小写绕过Pass-06-文件后缀名空格绕过Pass-07-文件后缀名点绕过Pass-08-文件后缀名::$DATA绕过Pass-09-点空格点空格绕过Pass…

【小沐学Unity3d】3ds Max 骨骼动画制作(CAT、Character Studio、Biped、骨骼对象)

文章目录 1、简介2、 CAT2.1 加载 CATRig 预设库2.2 从头开始创建 CATRig 3、character studio3.1 基本描述3.2 Biped3.3 Physique 4、骨骼系统4.1 创建方法4.2 简单示例 结语 1、简介 官网地址&#xff1a; https://help.autodesk.com/view/3DSMAX/2018/CHS https://help.aut…

R语言nlme、nlmer、lme4用(非)线性混合模型non-linear mixed model分析藻类数据实例...

原文链接&#xff1a;http://tecdat.cn/?p23426 混合线性模型&#xff0c;又名多层线性模型(Hierarchical linear model)。它比较适合处理嵌套设计(nested)的实验和调查研究数据&#xff08;点击文末“阅读原文”获取完整代码数据&#xff09;。 相关视频 序言 此外&#xff0…

使用Python进行Base64编码和解码

假设您有一个想要通过网络传输的二进制图像文件。您很惊讶对方没有正确接收该文件 - 该文件只是包含奇怪的字符&#xff01; 嗯&#xff0c;您似乎试图以原始位和字节格式发送文件&#xff0c;而所使用的媒体是为流文本而设计的。 避免此类问题的解决方法是什么&#xff1f;答…

【Vue3】组件递归

【Vue3】组件递归 实现效果 通过传入一个数字&#xff0c;实现数字次循环 父组件 <script setup> import { ref } from "vue"; import RecursionMe from "./components/RecursionMe/index.vue";const level ref(0);const add () > level.val…

接口自动化测试 —— JMeter断言基本使用

断言 断言&#xff1a;就是让程序判断预期结果和实际结果是否一致 注意&#xff1a;请求发起成功了&#xff0c;不代表着一定符合预期的结果。 JMeter中常用断言 响应断言 JSON断言 持续时间断言 响应断言 步骤&#xff1a;&#xff1a;线程组——HTTP取样器——断言——…

解决springboot项目中的groupId、package或路径的混淆问题

对于像我一样喜欢跳跃着学习的聪明人来说&#xff0c;肯定要学springboot&#xff0c;什么sevlet、maven、java基础&#xff0c;都太老土了&#xff0c;用不到就不学。所以古代的聪明人有句话叫“书到用时方恨少”&#xff0c;测试开源项目时&#xff0c;编译总是报错&#xff…

Linux-Centos7安装Docker

文章目录 一、前言二、Docker安装1、Docker及系统版本2、Docker的自动化安装3、Docker手动安装3.1、卸载Docker&#xff08;可选&#xff09;3.2、设置源仓库3.3、Docker安装3.4、Docker启动3.5、验证是否安装成功3.5.1、拉取镜像3.5.2、查看镜像3.5.3、运行镜像 3.6、删除Dock…

http和https的区别?

什么是 HTTP&#xff1f; HTTP是一种互联网数据传输协议&#xff0c;用于在网络服务器和客户端之间进行数据传输。作为万维网的基础&#xff0c;HTTP协议允许网络浏览器向网络服务器发送请求&#xff0c;服务器则会返回响应。HTTP协议基于文本&#xff0c;因此传输的数据是人类…

多源最短路径算法:Floyd-Warshall算法分析

文章目录 图的邻接矩阵 一.Floyd-Warshall算法思想(基于动态规划)二.Floyd-Warshall算法接口笔记附录:单源最短路径--Bellman-Ford算法1.Bellman-Ford算法接口核心部分2.Bellman-Ford算法接口 图的邻接矩阵 namespace Graph_Structure {//Vertex是代表顶点的数据类型,Weight是…

Approaching (Almost) Any Machine Learning Problem中译版

前言 Abhishek Thakur&#xff0c;很多kaggler对他都非常熟悉&#xff0c;2017年&#xff0c;他在 Linkedin 发表了一篇名为Approaching (Almost) Any Machine Learning Problem的文章&#xff0c;介绍他建立的一个自动的机器学习框架&#xff0c;几乎可以解决任何机器学习问题…

JY901B智能9轴加速度计陀螺仪角度传感器

今日学习使用JY901B智能9轴加速度计陀螺仪角度传感器 本文会先使用上位机获取数据作演示&#xff0c;后介绍它的数据表发送原理。 文章提供详细的原理讲解&#xff0c;测试工程下载&#xff0c;代码讲解&#xff0c;本人有多注释的习惯&#xff0c;希望对大家有帮助。 我的J…

【LeetCode】剑指 Offer <二刷>(4)

目录 题目&#xff1a;剑指 Offer 09. 用两个栈实现队列 - 力扣&#xff08;LeetCode&#xff09; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 题目&#xff1a;剑指 Offer 10- I. 斐波那契数列 - 力扣&am…