第十篇 编写一个简单的注册页面
一个简单的注册页面
今天的课程学习，我们来一波综合，将前面学到的东西，做一次小练习，我们自定义一个注册页面，不需要太华丽，能表达清楚意思就可以了。
<!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>
这是一个纯静态页面。
希望同学们举一反三。
