第十篇 编写一个简单的注册页面

一个简单的注册页面


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

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 id="div1">
    
    <h1>用户注册h1>
    
    <form action="#" method="post">
        
        <p>
            
            <span style="letter-spacing: 0.5em;">用户span>名:<input placeholder="请输入用户名" type="text"/>
            
        p>
        <p>
            
            <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/>
            
            <input name="gender" type="radio"/><input name="gender" type="radio"/>
        p>
        <p>
            
            <input type="submit" value="完成注册"/>
        p>
    form>
    
    <img id="img1" src="../img/39416b2dfdfec6beaa4361a9fbc86a93d8ad2cbb.jpg" alt="火影忍者的图片"/>

    
    <ol>
        
        <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'它的nameli>
    ol>
div>
body>
html>

这是一个纯静态页面。
希望同学们举一反三。


你可能感兴趣的:(HTML,CSS)