一个简单的注册页面

今天的课程学习，我们来一波综合，将前面学到的东西，做一次小练习，我们自定义一个注册页面，不需要太华丽，能表达清楚意思就可以了。

<!DOCTYPE html>
<html>
<head lang="en">
    <!--支持中文字符集-->
    <meta charset="UTF-8">
    <!--标题-->
    <title>注册</title>
    <!--使用内联样式-->
    <style>
        #div1{
            /*给出宽度、边框、居中*/
            width: 1440px;
            border: 1px solid #dedede;
            margin: auto;
            /*设置一个相对定位，是为了下面的图片做绝对定位*/
            position: relative;
        }
        form{
            /*让表单里的所有子元素都距离左侧20px*/
            margin:0 0 0 20px;
        }
        h1{
            /*为了统一格式，它也距离左侧20px*/
            margin: 0 0 0 20px;
        }
        #img1{
            /*设置图片的宽度，绝对定位和 层次为负数，让其他元素压在它上面*/
            width: 540px;
            position: absolute;
            z-index: -1;
            right: 0;
            top: 0;
        }
        .zz{
            /*演示一下 class类选择器  这里颜色表红色，字体变成18px*/
            color:red;
            font-size: 18px;
        }
    </style>
</head>
<body>
<!--最外层套一个div做最高级父亲(管理)-->
<div id="div1">
    <!--h1元素，放置一个标题一样，让别人更加清楚-->
    <h1>用户注册</h1>
    <!--提交数据，需要用到form表单，action代表传到哪里去，method是类型 get或者post-->
    <form action="#" method="post">
        <!--用p标签做跨行效果-->
        <p>
            <!--用户名，input text 文本-->
            <span style="letter-spacing: 0.5em;">用户</span>名：<input placeholder="请输入用户名" type="text"/>
            <!--placeholder 是input里面的属性，效果很明显，就是没有数据的时候出现提示，输入数据提示就会消失-->
        </p>
        <p>
            <!--密码，password 密码格式-->
            <span style="letter-spacing: 2em;">密</span>码：<input placeholder="请输入密码" type="password"/>
        </p>
        <p>
            <!--手机号码也是文本，可见的-->
            手机号码：<input placeholder="请输入11位有效数字" type="text"/>
        </p>
        <p>
            你喜欢什么：<br/>
            <!--复选框，可多选-->
            电影<input type="checkbox"/>
            电视剧<input type="checkbox"/>
            动漫<input type="checkbox"/>
        </p>
        <p>
            性别：<br/>
            <!--radio单选，name值必须一致才能被归为一类 单选-->
            男 <input name="gender" type="radio"/>
            女 <input name="gender" type="radio"/>
        </p>
        <p>
            <!--表单提交按钮 submit 获取表单数据提交-->
            <input type="submit" value="完成注册"/>
        </p>
    </form>
    <!--这里我们给一张图片，玩一下-->
    <img id="img1" src="../img/39416b2dfdfec6beaa4361a9fbc86a93d8ad2cbb.jpg" alt="火影忍者的图片"/>

    <!--下面老师用一个 ol标签来说明一些过程-->
    <ol>
        <!--这里给出class类选择器，大家就能知道它的意思了，它可以多个一起用一个class，而id只能一个用-->
        <li class="zz">三个文本出来后，因为字数不一样，所以导致它们都不对齐，<br/>老师用一个span标签来包含，然后用css
        给出样式 letter-spacing，<br/>它是设置内容的间距，老师用的是em单位，1em几乎是一个汉字那么大</li>
        <li class="zz">老师用的img引用的图片，是在网上找的，它这张图片的宽高是2048*1280<br/>
        图片太大，就会溢出最外层的div 1440px的，这样就会出现滚动条，就不好看了嘛<br/>
        我们就来设置它的宽，因为宽和高是有一个比例的，我们设置了一个宽，它会自动调整图片的高<br/>
        比如，它是10*10，高宽都是10，我设置了宽为5，那么高也变成5，反之一样</li>
        <li class="zz">当我们点击提交，浏览器地址会后面会出现一个 “#”<br/>
        是因为我们提交了表单，表单换了地址，而“#”的意思就是本页面，不会切换，只是刷新一下<br/>
        如果同学将form表单的action换成其他的，比如百度地址，新浪地址等，或者本地其他页面地址<br/>
        效果会很明显，会跳过去的。</li>
        <li>还要注意，表单提交后，后台获取表单数据，是用的 name <br/>
        就比如性别那里，后台要想知道你选的是男或者女，就要去获取‘gender‘它的name</li>
    </ol>
</div>
</body>
</html>

这是一个纯静态页面。

希望同学们举一反三。