Web第一次作业
目录
题目
html代码
index
login
register
css代码
base
index
login
register
效果展示
index
login
register
题目
实现一个登录页面、实现一个注册页面;实现一个主页
- 登录页面:`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>
login
<!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 - 主页…...
CentOS 6.8 安装 Nginx
个人博客地址:CentOS 6.8 安装 Nginx | 一张假钞的真实世界 提前安装: # sudo yum install yum-utils 一般情况下这个工具系统已经安装。 创建文件/etc/yum.repos.d/nginx.repo,输入内容如下: [nginx-stable] namenginx stab…...
网络网络层ICMP协议
网络网络层ICMP协议 1. ICMP 协议介绍 ICMP(Internet Control Message Protocol)是 TCP/IP 协议簇中的网络层控制报文协议。用于在 IP 主机、路由器之间传递控制消息,提供可能有关通信问题的反馈信息。 以及用于网络诊断或调试(…...
当父级元素设置了flex 布局 ,两个子元素都设置了flex :1, 但是当子元素放不下的时候会溢出父元素怎么解决 (css 样式问题)
一、问题 遇到个样式问题,当父级元素设置了flex 布局 ,两个子元素都设置了flex :1, 但是当子元素放不下的时候会溢出父元素怎么解决 (拖拽浏览器 使页面变小) 二、解决方法 .father{min-height: 600px;width: 100%;display: flex…...
Vue.js组件开发-如何实现路由懒加载
在Vue.js应用中,路由懒加载是一种优化性能的技术,它允许在需要时才加载特定的路由组件,而不是在应用启动时加载所有组件。这样可以显著减少初始加载时间,提高用户体验。在Vue Router中,实现路由懒加载非常简单…...
灵活妙想学数学
灵活妙想学数学 题1:海星有几只? 一共有12只海洋生物,分别是5只脚的海星,8只脚的章鱼和10只脚的鱿鱼,这些海洋动物的脚一共有87只,每种生物至少有1只,问海星有几只? 解:…...
使用 Multer 上传图片到阿里云 OSS的两种方式
文件上传到哪里更好? 上传到服务器本地 上传到服务器本地,这种方法在现今商业项目中,几乎已经见不到了。因为服务器带宽,磁盘 IO 都是非常有限的。将文件上传和读取放在自己服务器上,并不是明智的选择。 上传到云储存…...
破解合同管理之痛,开启智能化管理新模式
合同管理是采购管理中的一项重要环节,涉及合同洽谈、草拟、签订、生效、履行、失效全过程。随着企业业务规模的发展壮大,企业与各类供应商之间的合作往来更加频繁,需要签署和管理的合同文件也不断增多,如何提升合同管理效率成为企…...
Linux-day06
第14章 进程管理(重点) 进程基本介绍 程序运行起来就是一个进程 1.程序和进程的关系 2.在Linux中有两种方式执行,一种叫前台,一种后台 ps指令详解 显示系统执行的进程 USER:进程执行用户 PID:进程号 …...
源码编译安装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库…...
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”,…...
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…...
mysql、oracle、sqlserver的区别
一、保存数据的持久性: MySQL:是在数据库更新或者重启,则会丢失数据。 Oracle:把提交的sql操作线写入了在线联机日志文件中,保持到了磁盘上,可以随时恢复。 SqlServer:2…...
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…...
初识算法和数据结构P1:保姆级图文详解
文章目录 前言1、算法例子1.1、查字典(二分查找算法)1.2、整理扑克(插入排序算法)1.3、货币找零(贪心算法) 2、算法与数据结构2.1、算法定义2.2、数据结构定义2.3、数据结构与算法的关系2.4、独立于编程语言…...
【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 库,便于开发人员提高效率 那…...
【IDEA版本升级JDK21报错方法引用无效 找不到符号】
java: 方法引用无效 找不到符号 符号: 方法 getFirst() 位置: 接口 java.util.List 升级JDK21版本遇到问题,报错找不到符号 但是点进去又能发现这个函数,证明能够找到这个方法,但是就是报错 java: 方法引用无效 找不到符号 符号: …...
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…...
JavaSE学习心得(多线程与网络编程篇)
多线程-网络编程 前言 多线程&JUC 多线程三种实现方式 第一种实现方式 第二种实现方式 第三种实现方式 常见成员方法 买票引发的安全问题 同步代码块 同步方法 Lock锁 生产者和消费者 常见方法 等待唤醒机制 练习 抢红包 抽奖 多线程统计并求最…...
平均精确率均值(mAP)
mAP(mean Average Precision,平均精确率均值) 并不是传统意义上的“精度”(Accuracy),而是一种专门用于评估目标检测、图像分割或信息检索等任务的性能指标。它更全面地反映了模型在不同类别和不同置信度阈…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
synchronized 学习
学习源: https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖,也要考虑性能问题(场景) 2.常见面试问题: sync出…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
JavaScript 中的 ES|QL:利用 Apache Arrow 工具
作者:来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗?了解下一期 Elasticsearch Engineer 培训的时间吧! Elasticsearch 拥有众多新功能,助你为自己…...
Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)
概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例,模拟20个网页的爬取,每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程:允许程序同时执行多个任务,提高IO密集型任务(如网络请求)的效率…...
Java入门学习详细版(一)
大家好,Java 学习是一个系统学习的过程,核心原则就是“理论 实践 坚持”,并且需循序渐进,不可过于着急,本篇文章推出的这份详细入门学习资料将带大家从零基础开始,逐步掌握 Java 的核心概念和编程技能。 …...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
虚拟电厂发展三大趋势:市场化、技术主导、车网互联
市场化:从政策驱动到多元盈利 政策全面赋能 2025年4月,国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》,首次明确虚拟电厂为“独立市场主体”,提出硬性目标:2027年全国调节能力≥2000万千瓦࿰…...
