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已经成为工业领域…

PythonConda系列(亲测有效):【解决方案】Collecting package metadata (current_repodata.json): failed

【解决方案】Collecting package metadata (current_repodata.json&#xff09;: failed 问题描述解决方案小结参考文献 问题描述 在cmd下运行&#xff1a;conda install pylint -y&#xff0c;报错如下&#xff1a; C:\Users\apr> conda install --name apr pylint -y Co…

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;期…

telegram mini app和game实现登录功能

接上一篇文章&#xff0c;我们在创建好telegram机器人后&#xff0c;开始开发小游戏或者mini App&#xff0c;那就避免不了登录功能。 公开链接 bot设置教程:https://lengmo714.top/6e79860b.html 参考教程参考教程,telegram已经给我们提供非常多的api&#xff0c;我们在获取用…

package.json配置详解

package.json文件 执行 npm init 命令&#xff0c;会在当前目录生成一个 package.json 文件 这个文档是你需要知道的关于你的 package.json 文件中需要什么的所有信息。它必须是实际的 JSON&#xff0c;而不仅仅是一个 JavaScript 对象文字。 //package.json {//如果你打算发…

使用vue动态给同一个a标签添加内容 并给a标签设置hover,悬浮文字变色,结果鼠标悬浮有的字上面不变色

如果Vue的虚拟DOM更新机制导致样式更新不及时&#xff0c;你可以尝试以下几种方法来解决这个问题&#xff1a; 确保使用响应式数据&#xff1a; 确保你使用的数据是响应式的&#xff0c;并且任何对这些数据的更改都会触发视图的更新。在Vue中&#xff0c;你应该使用data对象中的…

多源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电…

LeetCode 69. x 的平方根

更多题解尽在 https://sugar.matrixlab.dev/algorithm 每日更新。 组队打卡&#xff0c;更多解法等你一起来参与哦&#xff01; LeetCode 69. x 的平方根 &#xff0c;难度简单。 暴力 解题思路&#xff1a;直接遍历平方 i&#xff0c; 判断 x 是否满足 i 2 ≤ x < ( i …

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压缩之后 截图

简单制作基础的Python镜像

拉取基础镜像 以Ubuntu24示例 docker pull ubuntu:24.04 启动 docker run -it -d --name ubuntu24 ubuntu:24.04 进入docker docker exec -it ubuntu24 /bin/bash 更新依赖 apt update apt full-upgrade 安装pip 会自动安装python3.11.7 apt install pip 支持中文…

55、Flink 中使用 Java Lambda 表达式详解

1&#xff09;概述 1.注意 Flink 支持对 Java API 的所有算子使用 Lambda 表达式&#xff0c;但是&#xff0c;当 Lambda 表达式使用 Java 泛型时&#xff0c;需要 显式 地声明类型信息。 2.示例和限制 示例&#xff1a; map() 函数使用 Lambda 表达式计算输入值的平方。 …

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

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

基于Hadoop平台的电信客服数据的处理与分析③项目开发:搭建基于Hadoop的全分布式集群---任务10:Hive安装部署

任务描述 任务内容为安装并配置在Hadoop集群中使用Hive。 任务指导 Hive是一个基于Hadoop的数据仓库框架&#xff0c;在实际使用时需要将元数据存储在数据库中 具体安装步骤如下&#xff1a; 1. 安装MySQL数据库&#xff08;已安装&#xff09; 2. 解压缩Hive的压缩包 3…