微信扫一扫打赏支持

html5--3.22 综合实例03

html5--3.22 综合实例03

学习要点

  • 通过一个综合实例来回顾学过的内容
  1. 这一章的内容比较多，不必强求一下子全记住，多做一些练习，用得多了自然就可以记住了
  2. 可以自己找一些实例练练手，比如各网站的注册表，调查表之类的，自己仿照着做做练习
  3. 综合实例要用到一些我们即将要将的CSS知识，暂时了解即可，等学过了CSS可以回过头来自己再完善这个案例

 

实例

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         form{width: 400px;background: #9370D8;padding: 10px;margin-top: 150px;margin-left: 300px;}
 8         button{background: #808080;padding: 8px;border-radius: 5px;}
 9         button:hover{padding: 10px;background: #2F4F4F;border-radius: 5px;}
10         input{padding: 8px;background: #F8F8F8}
11         input:focus{padding: 8px;background: #FFC0CB}
12     </style>
13 </head>
14 <body>
15     <form action="L3_01.html" method="get">
16     <fieldset>
17     <legend>注册用户</legend>
18         <p><label for="name">账号：</label><input type="text" name="name" id="name" required="" placeholder="账号"></p>
19         <p><label for="password">密码：</label><input type="password" name="password" id="password"  placeholder="密码"></p>
20         <p><label for="tel">电话号码：</label><input type="tel" name="tel" id="tel"  placeholder="电话号码"></p>
21         <p><label for="email">电子邮箱：</label><input type="email" name="email" id="email"  placeholder="电子邮箱"></p>
22         <!-- <input type="submit" value="确定"> -->
23         <button>注册用户</button>
24     </fieldset>
25         
26     </form>
27 </body>
28 </html>
View Code

 

posted @ 2017-12-04 10:25  范仁义  阅读(213)  评论(0)  编辑  收藏  举报