CSS注册界面

最新推荐文章于 2025-02-19 23:29:27 发布

原创最新推荐文章于 2025-02-19 23:29:27 发布 · 302 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #前端 #css3 #python #html

本文将介绍如何利用CSS3的特性创建一个美观且交互性强的前端注册界面。我们将探讨如何运用HTML布局，CSS样式技巧，包括渐变、阴影、过渡效果，以及响应式设计，确保界面在不同设备上都能良好展示。同时，也会提及Python后台处理注册逻辑的相关知识点。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <style>
        input,select{padding: 0;margin: 0;}
        div{width: 380px;height: 425px;border: 1px solid black;border-radius: 10px;
        padding-left: 20px;margin: 20px auto;}
        p,.lab1{font-size: 10px;color: gray}
        a{text-decoration: none}
        a:hover{text-decoration:underline}
        .ipt1,.ipt2,.ipt3,.sel1,.btn1,.btn2{height: 40px;border-radius: 5px;border: 1px solid gray; margin-bottom: 10px;}
        input.ipt1{width: 300px}
        select.sel1{width: 60px;height: 40px}
        input.ipt2{width: 235px}
        input.ipt3{width: 200px;}
        input.btn1{width: 75px;height: 42px;background-image: url("../image/OIP-C.jpg"); background-size:75px 42px;
        /*垂直居中对齐*/
        vertical-align: middle;margin-bottom: 0;}
        #isAgree{vertical-align: middle;}
        input.btn2{width: 360px;margin-top: 20px;background-color: #89cbff;color: white}


    </style>
</head>
<body>
<div>
    <h2>请注册</h2>
    <p>已有账号？<a href="#">登录</a></p>
    <form action="#" method="post">
        <label for="user">用户名:</label>
        <input type="text" placeholder="请输入用户名" id="user" name="user" class="ipt1"><br>
        <label for="phone">手机号:</label>
        <select name="phone" id="phone" class="sel1">
            <option value="+86">86</option>
            <option value="+87">87</option>
            <option value="+88">88</option>
        </select>
        <input type="text" placeholder="请输入手机号" id="user1" name="user1" class="ipt2"><br>
        <label for="pwd">密&emsp;码:</label>
        <input type="password" placeholder="请输入密码" id="pwd" name="pwd" class="ipt1"><br>
        <label for="yzm">验证码:</label>
        <input type="text" placeholder="请输入验证码" id="yzm" name="yzm" class="ipt3">
        <input type="button" value="" class="btn1"><br>
        <input type="checkbox" value="isAgree" name="isAgree" id="isAgree">
        <label for="isAgree" class="lab1">阅读并接受协议</label><br>
        <input type="submit" value="注册" class="btn2">

    </form>
</div>
</body>
</html>