HTML5设计注册/登录界面

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

学习目标

掌握 HTML5入门知识
掌握 CSS入门知识

学习内容

掌握 HTML5基本语法
掌握CSS基本语法
HTML5网页设计
掌握块级标签
掌握行内标签
表单的使用方法
iput常用属性

学习时间

周一至周五早上 7 点—晚上9点
周六上午 9 点-晚上9点
周日下午 3 点-下午 6 点

学习产出

技术笔记1 篇
CSDN 技术博客 1 篇
使用HTML设计一个基本登录界面
使用CSS对登录界面进行格式设计

HTML代码

这里是对登录界面的元素进行初步的设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
<div>
    <form action="#" method="post">
        <h2>请注册</h2>
        <span name="yes">已有账号</span>
        <a href="#">登录</a>
        <br>
        <br>
        用户名<input type="text" placeholder="请输入用户名" name="user">
        <br>
        <br>
        手机号
            <select style="width: 50px;height: 40px">
                <option value="+86">+86</option>
                <option value="+12">+12</option>
                <option value="+港澳台">+港澳台</option>
            </select>
            <input type="tel" placeholder="请输入手机号" name="tele">
        <br>
        <br>
        密&emsp;码<input type="password" placeholder="请设置登录密码" name="pwd">
        <br>
        <br>
        验证码<input type="text" placeholder="请输入验证码" class="yz">
        <button class="ipt"></button>
        <br>
        <br>
        <input type="checkbox" style="vertical-align: middle">
        <span>阅读并接受协议</span>
        <br>
        <br>
        <center><button type="submit">注册</button></center>
    </form>
</div>
</body>
</html>

因为我们注册或者登录时是需要提交信息给后台的所以需要用到表单form标签
span标签是一个基本的文本标签
如果需要登录是要点登录进行页面跳转的所以我们需要使用a标签进行网址跳转
input标签也就是需要用户进行自行输入信息并且可以通过type属性进行指定输入文本框的类型比如我们输入密码时需要进行屏蔽因而可以设置password属性在输入密码期间可以不显示具体文本达到隐私隐藏效果
设置按钮需要用到button标签其实也可以用input标签然后设置属性为button也可以达到同样的效果
还需要注意的是form标签处的method属性它有两个不同值。设置post值时提交时网址处不会显示表单内个人信息而get提交提交时网址处会显示在设置时有name属性的值。所以我们需要使用post才可以有效防止用户隐私被泄露

CSS代码

对界面进行格式的设置

<link rel="stylesheet" href="../CSS/样式文件/样式1.css">
<style>
        div{
            /*居中*/
            margin: auto;
            /*可以通过内边距设置*/
            width: 460px;
            height: 520px;
            border: grey solid 2px;
            border-radius: 5px;
            /*将用户选择时的格式取消*/
            user-select: none;
        }
        form{
            width: 420px;
            height: 520px;
            position: relative;
            left: 20px;
        }
        span{
            color: grey;
        }
        input{
            border-radius: 5px;
            border: lightgrey 1px solid;
            font-size: 7px;
            height: 40px;
            width: 348px;
            /*先设定一个值在通过页面检查按住width一直加减上下箭头直到边框突然回缩*/
        }
        input[name="tele"]{
            border-radius: 5px;
            border: lightgrey 1px solid;
            font-size: 7px;
            height: 40px;
            width: 288px;
        }
        input[type="checkbox"]{
            border-radius: 5px;
            border: lightgrey 1px solid;
            height: 15px;
            width: 15px;
        }
        button[type="submit"]{
            border: lightgrey 1px solid;
            border-radius: 5px;
            height: 50px;
            width: 350px;
            background-color: #65bdff;
            text-align: center;
            /*设置字距*/
            letter-spacing: 2px;
            /*移入按钮后变成小手形式*/
            cursor: pointer;
        }

        .yz{
            border: lightgrey 1px solid;
            /*百分比是以宽度为基础计算的用px可以使框圆的匀称*/
            border-radius: 5px;
            font-size: 7px;
            height: 40px;
            width: 241px;
        }
        a{
            text-decoration: none;
        }
        a:hover{
            /*设置下划线*/
            text-decoration: underline;
        }
        .ipt{
            width: 104px;
            height: 44px;
            background: url("images/验证码.jpg") no-repeat center/104px 44px;
            /*设置按钮与前面验证码框居中对齐否则没有文字的按钮会与前面的文本对齐*/
            vertical-align: middle;
        }
    </style>

这里我自己有一个样式文件是用来重置浏览器自带的样式界面的以免造成不同浏览器最终设计结果出现混乱大家可以参考ResetCSSCSS Tools: Reset CSS这是一个公共的样式重置模板大家自行复制存储到css文件中然后将文件路径写入link标签中的href属性内就可以正常使用
这里涉及到多种CSS选择器大家可以自行学习然后对我的这段代码才能有理解比如有 [ ] 是属性选择器前面加上了 . 是类选择器什么都不加直接写标签是标签选择器这里只说到我这里面使用的属性选择器具体其他使用方法大家自行学习