web的学习和开发

这个使同步和异步的区别

今天主要就是学了一些前端,搞了一些前端的页面,之后准备学一下后端。

我写的这个项目使百度贴吧,还没有写er图。

  先看一下主界面是什么样子的。

这个是主界面,将来后面的主要功能点基本上全部是放在这个上面,如热推信息,还一些很火的贴吧信息全部写在这个上面。

上面这个注册是一个超链接,当我点击这个超链接的时候就会转跳到注册界面。

超链接在html中的标签是

 <a href="注册.html" target="_blank">注册</a>

先解释一下这个_blank就是重新创建一个页面然后转跳到这个页面。然后这个"注册.html"就是新创建的注册的界面

跳转到注册界面是这样的

这个注册还没有搞正则表达式,也没有搞前后端交互。感觉前后端交互现在还不是很清楚,希望之后可以早点吧这个前后端的交互搞明白。

这个搞了我比较久就是这个“用科技让复杂的世界变简单”,刚开始我以为这两端文字两个div和在一起的,后面当时在原来的界面使用这个画面放缩的时候发现这两行是一个div。一致想不明白怎么实现让一大一小的文字一起进行放缩,后面才知道那个大一点其实就是h3一个标题的标签,那个较小的文字是p换行的文字,然后对这两段文字进行css修饰(将这两端文字染色呈白色,然后将这个文字,将这两段文字的间距进行加宽)。

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册界面</title><style>body {margin: 0;display: flex;height: 100vh;background-image: url('./reg_bg_min.jpg');background-size: cover;background-position: center;background-repeat: no-repeat;background-attachment: fixed; /* 让背景固定,不随页面滚动 */}.container {position: relative;width: 100%;margin: 0 auto;}.mod-new-reg-logo {position: relative;}.mod-new-reg-logo h3{position: absolute;top: 170px;left: 12%;color: white;z-index: 101;margin: 0; /* 去除默认的 margin */font-size: 35px; /* 增加字体大小 */}.mod-new-reg-logo p {position: absolute;top: 215px;left: 12%;color: white;z-index: 101;margin: 0; /* 去除默认的 margin */font-size: 19px; /* 增加字体大小 */line-height: 2; /* 设置行间距为字体大小的1.5倍,可以根据需要调整 */}/* 下面就是登录注册的表格形式,说句实话我没想到,背景直接就是表格 */table {position: absolute;top: 15%; /* 使表格顶部位于父元素的50%位置 */left: 70%; /* 使表格左侧位于父元素的50%位置 */background-color: rgba(255, 255, 255, 0.8); /* 使用 RGBA 值设置背景色,最后一个参数为透明度 */border-collapse: collapse;width: 270px;box-shadow: 0 0 10px rgba(0,0,0,0.1);border-radius: 30px; /* 设置边框的圆角半径为10px */}th, td {padding: 10px;text-align: left;}th {background-color: #f2f2f2;}input[type="text"], input[type="password"], input[type="email"] {width: calc(100% - 20px); /* 让输入框宽度占据表格的剩余空间 */padding: 8px;margin: 5px;border: 1px solid #ccc;border-radius: 3px;box-sizing: border-box;}input[type="submit"] {background-color: #4CAF50;color: white;border: none;padding: 10px 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;border-radius: 5px;cursor: pointer;}input[type="submit"]:hover {background-color: #45a049;}#lableRegister{background-color: rgba(255, 255, 255, 0.7); /* 使用 RGBA 值设置背景色,最后一个参数为透明度 */}</style>
</head>
<body><div class="container"><div class="mod-new-reg-logo"><h3>用科技</h3><p>让复杂的世界更简单</p></div><table><tr><th colspan="2" ><h2 id = "lableRegister">用户注册</h2></th></tr><tr><td><label for="username">用户名:</label></td><td><input type="text" id="username" name="username" required></td></tr><tr><td><label for="email">邮箱:</label></td><td><input type="email" id="email" name="email" required></td></tr><tr><td><label for="password">密码:</label></td><td><input type="password" id="password" name="password" required></td></tr><tr><td><label for="confirm-password">确认密码:</label></td><td><input type="password" id="confirm-password" name="confirm-password" required></td></tr><tr><td colspan="2" style="text-align:center;"><input type="submit" value="注册"></td></tr></table></div>
</body>
</html>

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

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

相关文章

推动能源绿色低碳发展,风机巡检进入国产超高清+AI时代

全球绿色低碳能源数字转型发展正在进入一个重要窗口期。风电作为一种清洁能源&#xff0c;在碳中和过程中扮演重要角色&#xff0c;但风电场运维却是一件十足的“苦差事”。 传统的风机叶片人工巡检方式主要依靠巡检人员利用高倍望远镜检查、高空绕行下降目测检查(蜘蛛人)、叶…

STM32——Modbus协议

一、Modbus协议简介&#xff1a; 1.modbus介绍&#xff1a; Modbus是一种串行通信协议&#xff0c;是Modicon公司&#xff08;现在的施耐德电气 Schneider Electric&#xff09;于1979年为使用可编程逻辑控制器&#xff08;PLC&#xff09;通信而发表。Modbus已经成为工业领域…

PDF压缩工具选哪个?6款免费PDF压缩工具分享

PDF文件已经成为一种常见的文档格式。然而&#xff0c;PDF文件的体积有时可能非常庞大&#xff0c;尤其是在包含大量图像或复杂格式的情况下。选择一个高效的PDF压缩工具就显得尤为重要。小编今天给大家整理了2024年6款市面上反响不错的PDF压缩文件工具。轻松帮助你找到最适合自…

漆包线行业生产管理革新:万界星空科技MES系统解决方案

一、引言 在科技日新月异的今天&#xff0c;万界星空科技凭借其在智能制造领域的深厚积累&#xff0c;为漆包线行业量身打造了一套先进的生产管理执行系统&#xff08;MES&#xff09;解决方案。随着市场竞争的加剧&#xff0c;漆包线作为电气设备的核心材料&#xff0c;其生产…

React+TS前台项目实战(二十四)-- 绘制组件Qrcode封装

文章目录 前言Qrcode组件1. 功能分析2. 代码详细注释3. 使用方式4. 效果展示(pc端 / 移动端) 总结 前言 今天要封装的Qrcode 组件&#xff0c;是通过传入的信息&#xff0c;绘制在二维码上&#xff0c;可用于很多场景&#xff0c;如区块链项目中的区块显示交易地址时就可以用到…

无人值守停车场管理系统具备哪些功能?无人值守收费停车场系统多少钱

随着城市化进程的加快&#xff0c;停车难已成为制约城市发展的一个突出问题。在传统停车场管理中&#xff0c;人工收费、车辆登记等环节不仅效率低下&#xff0c;而且容易出错。无人值守停车系统的出现&#xff0c;无人值守停车场系统以其高效、智能的特点&#xff0c;通过集成…

Meta 3D Gen:文生 3D 模型

是由 Meta 公布的一个利用 Meta AssetGen&#xff08;模型生成&#xff09;和 TextureGen&#xff08;贴图材质生成&#xff09;的组合 AI 系统&#xff0c;可以在分分钟内生成高质量 3D 模型和高分辨率贴图纹理。 视频演示的效果非常好&#xff0c;目前只有论文&#xff0c;期…

多源BFS——AcWing 173. 矩阵距离

多源BFS 定义 多源BFS&#xff08;多源广度优先搜索&#xff09;是一种图遍历算法&#xff0c;它是标准BFS&#xff08;广度优先搜索&#xff09;的扩展&#xff0c;主要用于解决具有多个起始节点的最短路径问题。在多源BFS中&#xff0c;不是从单一源点开始搜索整个图&#…

怎么把webp格式转换成jpg?5个图片格式转换方法全面解析(2024最新)

webp 图片常用于网站&#xff0c;可显著改善页面的浏览和加载体验。然而&#xff0c;许多设备&#xff08;如苹果手机设备、安卓手机等&#xff09;不支持webp文件。在这些设备上查看webp文件时&#xff0c;最佳做法是将其转换为其他常见格式&#xff0c;如jpg或 png。Windows电…

2024上海大学生程序设计竞赛I-六元组计数原根知识详解

以前基本没有了解原根相关的一块内容&#xff0c;最近正好碰到了这个题&#xff0c;于是写一篇博客记录一下。 这道题的总体思路就是比较明显&#xff0c;就是先算出 a p x a^px apx对于每个 x x x的解的个数&#xff0c;然后NTT算一下即可。 先来讲一下怎么求欧拉函数 ϕ ( …

前端FCP指标优化

优化前 第三方依赖按需引入之后&#xff0c;打包的总体积减小到初始值的55%&#xff0c;但是依然存在很大的js文件&#xff0c;需要继续优化 chunk-vendors.js进行分包之后 截图 compression-webpack-plugin压缩之后 截图

大学新生人工智能学习路线规划

1. 引言 七月来临&#xff0c;各省高考分数已揭榜完成。而高考的完结并不意味着学习的结束&#xff0c;而是新旅程的开始。对于有志于踏入IT领域的高考少年们&#xff0c;这个假期是开启探索IT世界的绝佳时机。作为该领域的前行者和经验前辈&#xff0c;我愿意为准新生们提供一…

剪映 v5.5 Pro Vip解锁版:使用指南与注意事项

摘要&#xff1a;本文介绍了剪映Pro VIP解锁版的使用方法&#xff0c;包括安装、测试和使用VIP素材的步骤&#xff0c;以及如何避免误报和保持解锁状态的建议。 正文&#xff1a; 剪映Pro是一款广受欢迎的视频编辑软件&#xff0c;提供了丰富的视频编辑功能和大量高质量的素材…

发送微信消息和文件

参考&#xff1a;https://www.bilibili.com/video/BV1S84y1m7xd 安装&#xff1a; pip install PyOfficeRobotimport PyOfficeRobotPyOfficeRobot.chat.send_message(who"文件传输助手", message"你好&#xff0c;我是PyOfficeRobot&#xff0c;有什么可以帮助…

RabbitMQ中java实现队列和交换机的声明

java实现队列和交换机的声明 在之前我们都是基于RabbitMQ控制台来创建队列、交换机。但是在实际开发时&#xff0c;队列和交换机是程序员定义的&#xff0c;将来项目上线&#xff0c;又要交给运维去创建。那么程序员就需要把程序中运行的所有队列和交换机都写下来&#xff0c;…

用MySQL+node+vue做一个学生信息管理系统(一):配置项目

先用npm init -y生成配置文件 在项目下新建src文件夹&#xff0c;app.js文件。src目录用来放静态资源文件&#xff0c;app.js是服务器文件&#xff0c;index.js是vue的入口文件 使用npm install express下载express框架 在app.js文件夹开启node服务&#xff0c;监听的端口为…

Go语言--运算符

算术运算符 关系运算符 不能写0<a<10&#xff0c;要判断必须0<a&&a<10。因为int和bool不兼容 逻辑运算符 位运算符 赋值运算符 其他 运算符的优先级

国家海岸线变化评估:新英格兰和中大西洋沿岸海岸线的历史变化

National Assessment of Shoreline Change: Historical Shoreline Change along the New England and Mid-Atlantic Coasts 国家海岸线变化评估&#xff1a;新英格兰和中大西洋沿岸海岸线的历史变化 摘要 海滩侵蚀是美国许多公海沿岸的一个长期问题。随着沿岸人口的不断增加…

永辉超市购物卡有什么用?

感觉现在在超市买东西&#xff0c;还不如网购 这不&#xff0c;端午的时候&#xff0c;朋友送的永辉卡&#xff0c;一直没时间去用&#xff0c;我总担心过期 但是去了超市后&#xff0c;又不知道买什么&#xff0c;最后空手而归 还好收卡云可以回收永辉卡&#xff0c;两张三…

《C++20设计模式》适配器模式经验分享

文章目录 一、前言二、对于接口的讨论三、实现1、对象适配器1.1 UML类图1.2 实现 2、类适配器 四、最后 一、前言 从适配器模式开始就是类的组合聚合&#xff0c;类与类之间结构性的问题了。 适配器模式解决的问题&#xff1a; 适配器模式能够在不破坏现有系统结构的情况下&a…