梧州宝石html注册页面

耀世
2021-12-06 / 0 评论 / 18 阅读 / 正在检测是否收录...

效果图如下:

001.png

简单的单页注册页面 课堂上的练习
刚学css时做的 无功能 只是一个UI而已
感兴趣的直接复制下方代码拿走即可
大神请绕道 互相学习共同进步
<!doctype html>
<!--星逸博客-->
<html>
<head>
    <meta charset="utf-8" />
    <title>梧州宝石 - 注册界面</title>
    <!--css样式内容开始-->
    <style type="text/css">

    /*标题文本样式*/
    .title1
    {
    font-size:35px;
    color:#b8860b;
    font-weight:bold;
    margin-left:135px;
    }

    .title2
    {
    font-size:25px;
    color:#000000;    
    }
    
    /*文本样式*/
    .text1
    {
    color:red;
    font-size:12px;
    font-weight:bold;
    }

    .text2
    {
    font-size:13px;
    }

    .text3
    {
    font-size:15px;
    color:red;
    }

    /*文本框样式*/
    input[type=text], [type=password]
    {
      width: 25%;
      padding: 12px;
      border: 1px solid #ccc;
      resize: vertical;
     /*border-radius: 4px;文本框圆角*/
    }

    /*去除超链接下划线*/
    a
    {
    text-decoration:none;
    }

    /*按钮控件*/
    input[type=submit]
    {
    background-color: #daa520;
    border: none;
    color: white;
    padding: 14px 22px;
    text-decoration: none;
    cursor: pointer;
    font-weight:bold;
    font-size:14px;
    margin-left:50px;
    }
    
    </style>
</head>
<body>
    <div>
        <p>
            <span class="title1">梧州宝石</span>
            <span class="title2"> | 用户注册</span>
            <br />
            <hr width="80%" size="3" color="#cccccc" />
        </p>
    </div>
    <div align="center">
        <p>
            <span class="text1">&nbsp;&nbsp;*</span><span class="text2">会员名:</span>
            <input type="text" name="wb1">
        </p>
        <p>
            <span class="text1">*</span><span class="text2">登录密码:</span>
            <input type="password" name="wb2">
        </p>

        <p>
            <span class="text1">*</span><span class="text2">密码确认:</span>
            <input type="password" name="wb3">
        </p>

        <p>
            <span class="text1">*</span><span class="text2">手机号码:</span>
            <input type="text" name="wb4">
        </p>

        <p>
            <span class="text1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*</span><span class="text2">邮箱:</span>
            <input type="text" name="wb5">
        </p>

        <p>
            <input type="checkbox" name="chck" style="margin-left:145px;">
            <span class="text2">创建网站的同时,我统一遵守:
                <a href="#"><span class="text3">《梧州宝石条款》</span></a> 及 
                <a href="#"><span class="text3">《隐私声明》</span></a>
            </span>
        </p>

        <p>
            <input type="submit" name="subt" value="同意并注册">
        </p>
    </div>
</body>
</html>
0

评论 (0)

取消