当前位置：首页 > news >正文

Web第一次作业

news 2025/11/11 12:08:56

题目

html代码

index

css代码

base

index

效果展示

index

题目

实现一个登录页面、实现一个注册页面；实现一个主页

- 登录页面：`login.html`
- 注册页面：`register.html`
- 主页：`index.html`

要求如下：

- 主页中，可以点击 **注册**或者**登录**能直接在新窗口跳转到对应的页面
- 登录页面中，输入账号、密码可以点击登录-自动跳转到主页
- 注册页面中，输入账号、密码、确认密码、昵称，点击注册，注册后自动跳转到登录页面

html代码

index

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>index</title><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/index.css">
</head>
<body><div class="container"><h3>有位大能注意到了你，并向你发出邀请</h3><div class="nav"><div class="login"><ul><li><a href="./login.html">进入宗门</a><a href="./login.html" target="_blank">好好修炼</a></li></ul></div><div class="register"><ul><li><a href="./register.html">加入宗门</a><a href="./register.html" target="_blank">老祖的青睐</a></li></ul></div></div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>login</title><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/login.css">
</head>
<body><div class="container"><div class="body"><h3>请核实身份</h3><p><span>身份：</span><input type="text" id="account" placeholder="此处填写账号"></p><p><span>密码：</span><input type="password" id="passwd" placeholder="此处填写密码"></p></div><div class="nav"><div class="index"><ul><li><a href="./index.html">完成核实</a><a href="./index.html">老祖的认可</a></li></ul></div></div></div>
</body>
</html>

register

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>register</title><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/register.css">
</head>
<body><div class="container"><div class="body"><h3>请登记身份</h3><form action=""><p><span>身份：</span><input type="text" id="account" placeholder="此处填写账号"></p><p><span>密码：</span><input type="password" id="passwd" placeholder="此处填写账号密码"></p><p><span>确认密码：</span><input type="password" id="confirm_password" placeholder="确认密码"></p><p><span>仙号：</span><input type="text" id="name" placeholder="此处填写昵称"></p><p class="reset"><span></span><input type="submit" value="提交" class="btn"><input type="reset" value="重置" class="btn"></p></form></div><div class="nav"><div class="login"><ul><li><a href="./login.html">完成登记</a><a href="./login.html">前往核实</a></li></ul></div></div></div>
</body>
</html>

css代码

base

* {padding: 0;margin: 0;box-sizing: border-box;list-style: none;
}@font-face {font-family: ziti1;src: url(../font/字魂剑气手书.ttf);
}@font-face {font-family: ziti2;src: url(../font/MD.ttf);
}body  {background-color: #f5f5f5;
}.container{/* border: 1px red solid; */margin: 20px auto;width: 1200px;height: 600px;
}.nav {/* border: 1px blue solid; */margin: 20px auto;width: 1200px;height: 400px;display: flex;
}ul {display: flex;
}/* 导航 */
li {/* border: 1px black solid; *//* 对li与a定位 */position: relative;width: 200px;height: 200px;line-height: 200px;/* 3d实现 *//* transform: rotateX(-20deg) rotateY(30deg);transform: scale3d(1,1.1,1.1); */transform-style: preserve-3d;transition: all 0.5s;
}li:hover {transform: rotateX(-90deg);
}a {text-decoration: none;/* 定位 */position: absolute;display: block;width: 200px;height: 200px;border-radius: 8%;font-family: ziti1;font-size: 20px;text-align: center;
}/*每个面都有独立的轴，互不影响 */
a:first-child {background-color: white;color: black;transform: translateZ(103px);
}a:last-child {background-color: black;color: white;/* 调整旋转度数和a的轴距离 */transform: rotateX(90deg) translateZ(103px);
}

index

.login {/* border: 1px rebeccapurple solid; */width: 300px;height: 100px;margin-top: 300px;margin-left: 300px;display: block;
}.register {/* border: 1px black solid; */width: 300px;height: 100px;margin: 300px 0px 0px 200px;display: block;
}h3 {font-size: 60px;text-align: center;padding-top: 50px;font-family: ziti2;color: rgb(215, 190, 160);
}.container {background-image: url(../imges/下载4.jpg);background-repeat: no-repeat;background-size: cover;
}li {margin-top: 20px;width: 300px;height: 100px;line-height: 100px;
}a {width: 300px;height: 100px;
}a:first-child {background-color: brown;transform: translateZ(50px);
}a:last-child {background-color: rgb(215, 190, 160);transform: rotateX(90deg) translateZ(50px);
}

login

.body {/* border: 1px black solid; */margin: 0 auto;width: 600px;height: 300px;margin-top: 30px;font-family: '楷体';
}h3 {font-family: ziti2;font-size: 40px;color: aquamarine;text-align: center;margin: 16px 0;
}p {height: 80px;               margin-top: 30px;
}span {display: inline-block;text-align: right;width: 85px;margin-left: 100px;margin-right: 20px;font-size: 25px;
}input {height: 50px;color: #d9e2eb;vertical-align: middle;resize: none;border-radius: 5px;
}.index {width: 500px;height: 200px;margin: 0 auto;
}li {margin-top: 20px;width: 500px;height: 100px;line-height: 100px;
}a {width: 500px;height: 100px;
}a:first-child {transform: translateZ(50px);
}a:last-child {background-color: #ace7fa;transform:rotateX(90deg) translateZ(50px);
}.container {background-image: url(../imges/下载2.jpg);background-repeat: no-repeat;background-size: cover;
}

register

.body {/* border: 1px black solid; */width: 800px;height: 400px;margin: 0 auto;
}form {width: 60%;height: 300px;font-family: "楷体";font-weight: bold;margin: 20px auto;border-radius: 15%;
}h3 {font-family: ziti2;font-size: 40px;text-align: center;margin: 16px 0;
}p {height: 50px;               margin-top: 16px;
}span {display: inline-block;text-align: right;width: 100px;margin-left: 20px;margin-right: 20px;font-size: 20px;
}input {height: 30px;color: #d9e2eb;vertical-align: middle;resize: none;border-radius: 5px;
}.reset {height: 28px;
}.btn {width: 100px;height: 28px;border-radius: 5px;color: black;
}.login {width: 500px;height: 200px;margin: 0 auto;
}li {margin-top: 20px;width: 500px;height: 100px;line-height: 100px;
}a {width: 500px;height: 100px;
}a:first-child {transform: translateZ(50px);
}a:last-child {transform:rotateX(90deg) translateZ(50px);
}.container {background-image: url(../imges/下载.jpg);background-repeat: no-repeat;background-size: cover;
}

效果展示

index

login

register

Web第一次作业

目录题目 html代码 index login register css代码 base index login register 效果展示 index login register 题目实现一个登录页面、实现一个注册页面；实现一个主页 - 登录页面：login.html - 注册页面：register.html - 主页…...

编程日记 2025/1/16 7:05:30

CentOS 6.8 安装 Nginx

个人博客地址：CentOS 6.8 安装 Nginx | 一张假钞的真实世界提前安装： # sudo yum install yum-utils 一般情况下这个工具系统已经安装。创建文件/etc/yum.repos.d/nginx.repo，输入内容如下： [nginx-stable] namenginx stab…...

编程日记 2025/1/16 7:02:26

网络网络层ICMP协议

网络网络层ICMP协议 1. ICMP 协议介绍 ICMP（Internet Control Message Protocol）是 TCP/IP 协议簇中的网络层控制报文协议。用于在 IP 主机、路由器之间传递控制消息，提供可能有关通信问题的反馈信息。以及用于网络诊断或调试（…...

编程日记 2025/1/16 6:56:20

当父级元素设置了flex 布局，两个子元素都设置了flex :1, 但是当子元素放不下的时候会溢出父元素怎么解决（css 样式问题）

一、问题遇到个样式问题，当父级元素设置了flex 布局 ，两个子元素都设置了flex :1, 但是当子元素放不下的时候会溢出父元素怎么解决 （拖拽浏览器使页面变小） 二、解决方法 .father{min-height: 600px;width: 100%;display: flex…...

编程日记 2025/1/16 6:55:11

Vue.js组件开发-如何实现路由懒加载

在Vue.js应用中，路由懒加载是一种优化性能的技术，它允许在需要时才加载特定的路由组件，而不是在应用启动时加载所有组件。这样可以显著减少初始加载时间，提高用户体验。在Vue Router中，实现路由懒加载非常简单&#xf…...

编程日记 2025/1/16 6:53:06

灵活妙想学数学

灵活妙想学数学题1：海星有几只？ 一共有12只海洋生物，分别是5只脚的海星，8只脚的章鱼和10只脚的鱿鱼，这些海洋动物的脚一共有87只，每种生物至少有1只，问海星有几只？ 解&#xff1a…...

编程日记 2025/1/16 6:52:05

使用 Multer 上传图片到阿里云 OSS的两种方式

文件上传到哪里更好？ 上传到服务器本地上传到服务器本地，这种方法在现今商业项目中，几乎已经见不到了。因为服务器带宽，磁盘 IO 都是非常有限的。将文件上传和读取放在自己服务器上，并不是明智的选择。上传到云储存…...

编程日记 2025/1/16 6:51:04

破解合同管理之痛，开启智能化管理新模式

合同管理是采购管理中的一项重要环节，涉及合同洽谈、草拟、签订、生效、履行、失效全过程。随着企业业务规模的发展壮大，企业与各类供应商之间的合作往来更加频繁，需要签署和管理的合同文件也不断增多，如何提升合同管理效率成为企…...

编程日记 2025/1/16 6:46:57

Linux-day06

第14章进程管理（重点） 进程基本介绍程序运行起来就是一个进程 1.程序和进程的关系 2.在Linux中有两种方式执行，一种叫前台，一种后台 ps指令详解显示系统执行的进程 USER：进程执行用户 PID：进程号 …...

编程日记 2025/1/16 6:45:55

源码编译安装httpd 2.4，提供系统服务管理脚本并测试

总结需要安装的包 sudo yum groupinstall "Development Tools" -y #httpd的依赖包yum install tar -y #tar压缩包sudo yum install apr-devel apr-util-devel #APR库提供跨平台接口的库sudo yum install pcre pcre-devel # PCRE库和 pcre-config工具--提供PCRE库…...

编程日记 2025/1/16 6:43:52

Linux固定ip

进入etc/sysconfig/network-scripts目录 cd /etc/sysconfig/network-scripts 编辑ifcfg-ens33文件 vi ifcfg-ens33 将BOOTPROTO的值改为“static”，在文档最后添加需要的固定IP BOOTPROTO"static" IPADDR192.168.132.136点击按键“esc”，…...

编程日记 2025/1/16 6:38:46

Java 输入输出流(上)

目录 1.Java 输入输出流 2.Java File类 3.Java File类目录 1.创建目录 2.列出目录中的文件 4.Java File类文件 1.文件的创建与删除 2.运行可执行文件 5.Java 文件字节输入流(1) 6.Java 文件字节输入流(2) 1.使用输入流读取字节 2.关闭流 7.Java 文件字节输出流(1…...

编程日记 2025/1/16 6:36:44

mysql、oracle、sqlserver的区别

一、保存数据的持久性： MySQL：是在数据库更新或者重启，则会丢失数据。 Oracle：把提交的sql操作线写入了在线联机日志文件中，保持到了磁盘上，可以随时恢复。 SqlServer：2…...

编程日记 2025/1/16 6:34:42

Java+Maven+GDAL

下载已经编译好的压缩包，下载地址解压 jar 包 release-1930-x64-dev.zip\release-1930-x64\bin\gdal\java 目录下打成Maven依赖 mvn install:install-file -Dfilegdal-3.10.1.jar -DgroupIdorg.gdal -DartifactIdgdal -Dversion3.10.1 -Dpackagingjar -Dgener…...

编程日记 2025/1/16 6:33:41

初识算法和数据结构P1：保姆级图文详解

文章目录前言1、算法例子1.1、查字典（二分查找算法）1.2、整理扑克（插入排序算法）1.3、货币找零（贪心算法） 2、算法与数据结构2.1、算法定义2.2、数据结构定义2.3、数据结构与算法的关系2.4、独立于编程语言…...

编程日记 2025/1/16 6:30:37

【Go】Go Gorm 详解

1. 概念 Gorm 官网：https://gorm.io/zh_CN/docs/ Gorm：The fantastic ORM library for Golang aims to be developer friendly，这是官网的介绍，简单来说 Gorm 就是一款高性能的 Golang ORM 库，便于开发人员提高效率那…...

编程日记 2025/1/16 6:29:36

【IDEA版本升级JDK21报错方法引用无效找不到符号】

java: 方法引用无效找不到符号符号: 方法 getFirst() 位置: 接口 java.util.List 升级JDK21版本遇到问题，报错找不到符号但是点进去又能发现这个函数，证明能够找到这个方法，但是就是报错 java: 方法引用无效找不到符号符号: …...

编程日记 2025/1/16 6:28:32

Node.js 版本管理工具完全指南

Node.js 版本管理工具完全指南目录 1. nvm (Node Version Manager)2. n (Node Package Manager)3. fnm (Fast Node Manager)4. Volta5. 工具对比 1. nvm (Node Version Manager) 1.1 安装指南 macOS/Linux # 使用 curl 安装 curl -o- https://raw.githubusercontent.com…...

编程日记 2025/1/16 6:27:28

JavaSE学习心得（多线程与网络编程篇）

多线程-网络编程前言多线程&JUC 多线程三种实现方式第一种实现方式第二种实现方式第三种实现方式常见成员方法买票引发的安全问题同步代码块同步方法 Lock锁生产者和消费者常见方法等待唤醒机制练习抢红包抽奖多线程统计并求最…...

编程日记 2025/1/16 6:26:24

平均精确率均值（mAP）

mAP（mean Average Precision，平均精确率均值） 并不是传统意义上的“精度”（Accuracy），而是一种专门用于评估目标检测、图像分割或信息检索等任务的性能指标。它更全面地反映了模型在不同类别和不同置信度阈…...

编程日记 2025/1/16 6:25:22

springboot 百货中心供应链管理系统小程序

一、前言随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，百货中心供应链管理系统被用户普遍使用，为方…...

编程新知 2025/11/7 14:02:25

大话软工笔记—需求分析概述

需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...

编程新知 2025/11/7 14:08:13

【机器视觉】单目测距——运动结构恢复

ps：图是随便找的，为了凑个封面前言在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛&#xf…...

编程新知 2025/11/10 9:34:02

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/10/28 1:35:57

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...

编程新知 2025/11/8 4:08:36

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异，它们的数据同步要求既要保持数据的准确性和一致性，又要处理好性能问题。以下是一些主要的技术要点： 数据结构差异数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言在数据驱动的背景下，知识图谱凭借其高效的信息组织能力，正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合，探讨知识图谱开发的实现细节，帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

图表类系列各种样式PPT模版分享

图标图表系列PPT模版，柱状图PPT模版，线状图PPT模版，折线图PPT模版，饼状图PPT模版，雷达图PPT模版，树状图PPT模版图表类系列各种样式PPT模版分享：图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/11/7 11:43:54

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例，其中使用的是 Module Federation 和 npx-build-plus 实现了主应用（Shell）与子应用（Remote）的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/6/15 10:41:11

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同，结合所安装的tensorflow的目录结构修改from语句即可。原语句： from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后： from tensorflow.python.keras.lay…...

编程新知 2025/9/24 7:39:50

题目

html代码

index

login

register

css代码

base

index

login

register

效果展示

index

login

register

相关文章：