web的学习和开发

news2024/12/23 19:32:24

这个使同步和异步的区别

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

我写的这个项目使百度贴吧,还没有写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.coloradmin.cn/o/1894560.html

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

相关文章

电气-伺服(4)CANopen

一、CAN Controller Area Network ,控制器局域网&#xff0c;80年的德国Bosch的一家公司研发可以测量仪器直接的实时数据交换而开发的一款串行通信协议。 CAN发展历史 二、CAN 的osi 模型 CAN特性&#xff1a; CAN 的数据帧 三、CANopen 什么是CANopen CANopen 的网络模型 …

Python28-7.1降维算法之LDA线性判别分析

线性判别分析&#xff08;Linear Discriminant Analysis, LDA&#xff09;是一种用于模式识别和机器学习的分类和降维技术。LDA通过找到能最大化类别间方差和最小化类别内方差的投影方向&#xff0c;实现样本的降维和分类。 LDA的基本思想 LDA的核心思想是通过线性变换将数据…

[数据库原理]事务

如有错误&#xff0c;欢迎指正&#xff01;&#xff01;&#xff01; 期末考了冲突可串行化

qt6 获取百度地图(一)

需求分析&#xff1a; 要获取一个地图&#xff0c; 需要ip 需要根据ip查询经纬度 根据经纬度查询地图 另外一条线是根据输入的地址 查询ip 根据查询到的ip查地图‘ 最后&#xff0c;要渲染地图 上面这这些动作&#xff0c;要进行http查询&#xff1a; 为此要有三个QNet…

科比老大职业生涯数据预测(基于随机森林模型)

1.实验背景 科比布莱恩特&#xff0c;作为NBA历史上最伟大的篮球运动员之一&#xff0c;他的职业生涯充满了无数精彩瞬间。 科比于1996年以13顺位的选秀身份进入联盟&#xff0c;一生都效力于洛杉矶湖人队。于2016年宣布退役&#xff0c;职业生涯获奖无数&#xff0c;5次NBA总…

暑假学习DevEco Studio第2天

学习目标&#xff1a; 掌握页面跳转 学习内容&#xff1a; 跳转页面 创建页面&#xff1a; 在“project”窗口。打开“entry>src>main>ets”,右击“pages”&#xff0c;选择“New>ArkTS File”,命名“Second”&#xff0c;点击回车键。 在页面的路由&#xff0…

8.ApplicationContext常见实现

ClassPathXmlApplicationContext 基于classpath下xml格式的配置文件来创建 <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/XMLSchema-i…

c++类模板及应用

文章目录 为什么要有函数模板一般实现举例类模板举例 继承中类模板的使用特殊情况 友元函数模板类和静态成员类模板实践 为什么要有函数模板 项目需求: 实现多个函数用来返回两个数的最大值&#xff0c;要求能支持char类型、int类型、double 一般实现举例 类模板举例 继承中类…

MySQL之备份与恢复(四)

备份与恢复 存储引擎和一致性 3.复制 从备库中备份最大的好处是可以不干扰主库&#xff0c;避免在主库上增加额外的负载。这是一个建立备库的好理由&#xff0c;即使不需要用它做负载均衡或高可用。如果钱是个问题&#xff0c;也可以把备份用的备库用于其他用户&#xff0c;…

Linux_进程池

目录 1、进程池基本逻辑 2、实现进程池框架 3、文件描述符的继承 4、分配任务给进程池 5、让进程池执行任务 6、回收子进程 7、进程池总结 结语 前言&#xff1a; 在Linux下&#xff0c;进程池表示把多个子进程用数据结构的方式进行统一管理&#xff0c;在任何时候…

代码随想录——无重叠区间(Leetcode435)

题目链接 贪心 排序 class Solution {public int eraseOverlapIntervals(int[][] intervals) {int res 0;if(intervals.length 1 || intervals.length 0){return res;}// 按左边界排序Arrays.sort(intervals, new Comparator<int[]>() {public int compare(int[] …

面试突击指南:Java基础面试题3

1.介绍下进程和线程的关系 进程:一个独立的正在执行的程序。 线程:一个进程的最基本的执行单位,执行路径。 多进程:在操作系统中,同时运行多个程序。 多进程的好处:可以充分利用CPU,提高CPU的使用率。 多线程:在同一个进程(应用程序)中同时执行多个线程。 多线程…

学习率调度器简明教程

学习率是神经网络训练中最重要的超参数之一&#xff0c;影响学习过程的速度和有效性。学习率过高会导致模型在最小值附近震荡&#xff0c;而学习率过低会导致训练过程非常缓慢甚至停滞。本文直观地介绍了学习率调度程序&#xff0c;它是用于在训练期间调整学习率的技术。 NSDT工…

解决SeaTunnel 2.3.4版本写入S3文件报错问题

在使用Apache SeaTunnel时&#xff0c;我遇到了一个写入S3文件的报错问题。通过深入调试和分析&#xff0c;找到了问题所在&#xff0c;并提出了相应的解决方案。 本文将详细介绍报错情况、参考资料、解决思路以及后续研究方向&#xff0c;希望对大家有帮助&#xff01; 一、…

江门雅图仕职业技术学校领导一行莅临泰迪智能科技参观调研

7月2日&#xff0c;江门雅图仕职业技术学校总校长肖胜阳、校长许昌、办公室主任任志娟等莅临广东泰迪智能科技股份有限公司产教融合实训中心参观调研。泰迪智能科技董事长张良均、副总经理施兴、产品中心总监周东平、校企合作经理吴桂锋进行热情接待&#xff0c;双方就学校专业…

Python用于处理 DNS 查询库之Dnspython 使用详解

概要 Dnspython 是一个开源的 Python 库,专门用于处理 DNS 查询。它被设计为既简单易用又功能强大,可以满足从简单到复杂的各种 DNS 相关需求。无论是进行基础的 DNS 查询还是进行高级的 DNS 服务器管理,dnspython 都能提供相应的功能。 这个库支持包括 A、AAAA、MX、TXT …

汉光联创HGLM2200N黑白激光多功能一体机加粉及常见问题处理

基本参数&#xff1a; 机器型号&#xff1a;HGLM2200N 产品名称&#xff1a;A4黑白激光多功能一体机 基础功能&#xff1a;打印、扫描、复印 打印速度&#xff1a;22页/分钟 纸张输入容量&#xff1a;150-249页 单面支持纸张尺寸&#xff1a;A4、A5、A6 产品尺寸&#x…

拓展欧几里得和裴蜀定理

裴蜀定理&#xff08;或贝祖定理&#xff09;说明了对任何整数a、b和它们的最大公约数d&#xff0c;关于未知数x和y的线性不定方程&#xff08;称为裴蜀等式&#xff09;&#xff1a;若a,b是整数,且gcd(a,b)d&#xff0c;那么对于任意的整数x,y,axby都一定是d的倍数&#xff0c…

pytorch中的contiguous()

官方文档&#xff1a;https://pytorch.org/docs/stable/generated/torch.Tensor.contiguous.html 其描述contiguous为&#xff1a; Returns a contiguous in memory tensor containing the same data as self tensor. If self tensor is already in the specified memory forma…

音乐发行平台无加密开源源码

适用于唱片公司&#xff0c;用于接收物料&#xff0c;下载物料功能&#xff1a;个人或机构认证&#xff0c;上传专辑和歌曲&#xff0c;版税结算环境要求php7.4Nginx 1、导入数据库 2、/inc/conn.php里填写数据库密码等后台路径/admin&#xff08;可自行修改任意入口名称&…