HTML 会员注册及CSS部分介绍

Plume_NH

已于 2023-05-03 22:39:27 修改

阅读量2.4k

点赞数 5

文章标签： html 前端 javascript

于 2023-05-03 17:06:11 首次发布

本文链接：https://blog.csdn.net/m0_67947369/article/details/130474477

版权

会员注册界面代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员注册</title>
</head>

<body>

    <table align="center">
        <tr>
            <td>
                <h3>会员注册</h3>
            </td>
        </tr>
        <td>账号信息</td>
        <tr>
            <td>*用户名：</td>
            <td>
                <input type="text" placeholder="由字母组成，例如XHQ">
            </td>
        </tr>
        <tr>
            <td>*密码：</td>
            <td>
                <input type="password" placeholder="密码由字母开头，6~18位">
            </td>
        </tr>
        <tr>
            <td>*确认密码：</td>
            <td>
                <input type="password" placeholder="密码由字母开头，6~18位">
            </td>
        </tr>
        <tr>
            <td>*电子邮箱：</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>个人基本信息</td>
        </tr>
        <tr>
            <td>国家/地区：</td>
            <td>
                <select name="" id="">
                    <option value="">中国</option>
                    <option value="">美国</option>
                    <option value="">俄罗斯</option>
                    <option value="">法国</option>
                    <option value="">英国</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>*真实姓名：</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>*证件类型：</td>
            <td>
                <select name="" id="">
                    <option value="">中国居民身份证</option>
                    <option value="">护照</option>
                    <option value="">临时居民身份证</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>*证件号码：</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>*性别：</td>
            <td>
                <input type="radio" id="nan" name="sex" checked="checked"><label for="nan">男</label>
                <input type="radio" id="nv" name="sex"><label for="nv">女</label>
            </td>
        </tr>
        <tr>
            <td>*出生日期：</td>
            <td>
                <input type="date" name="" id="">
            </td>
        </tr>
        <tr>
            <td>*服务区域：</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>服务类别：</td>
            <td>
                <input type="checkbox" id="huanbao"><label for="huanbao">环保志愿者</label>
                <input type="checkbox" id="yiliao"><label for="yiliao">医疗志愿者</label>
                <input type="checkbox" id="wenhua"><label for="wenhua">文化志愿者</label><br>
                <input type="checkbox" id="shequ"><label for="shequ">社区志愿者</label>
                <input type="checkbox" id="jiaoyu"><label for="jiaoyu">教育志愿者</label>
                <input type="checkbox" id="fuping"><label for="fuping">扶贫志愿者</label>
            </td>
        </tr>
        <tr>
            <td><input type="submit" value="申请成为会员"></td>
        </tr>
    </table>
</body>

</html>

效果图：

下面是用css优化代码：

CSS有三种样式表分别为外部样式表内部样式表以及行内样式表

我这个代码使用的内部样式表内部样式表是放在head标签中的，如图

    <style>
        body {
            background-image: url(https://game.gtimg.cn/images/yxzj/coming/v2/skins//image/20230302/16777476024081.jpg);
            background-position: center;
            font-size: 25px;
        }
    </style>

url（）括号里面可以放自己图片当作背景，网址或者文件（文件需要注意路径）

根据自己的需求调整样式，我的仅仅调了文字大小和背景图，以及图片的位置（其他效果可以查阅资料，祝大家做出自己满意的效果图）