web的学习和开发

作者：寸_铁 | 2024-07-03 10:50:16

踩

web的学习和开发

这个使同步和异步的区别

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

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

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

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

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

超链接在html中的标签是

先解释一下这个_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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/782876