html-css练习题 (注册表单)
生活随笔
收集整理的這篇文章主要介紹了
html-css练习题 (注册表单)
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
代碼賞析：
| ? | <!DOCTYPE html> |
| ? | <html lang="en"> |
| ? | <head> |
| ? | <meta charset="UTF-8"> |
| ? | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| ? | <meta http-equiv="X-UA-Compatible" content="ie=edge"> |
| ? | <title>Document</title> |
| ? | <style> |
| ? | body{ |
| ? | background:#18c1ff; |
| ? | } |
| ? | .box{ |
| ? | width:500px; |
| ? | height:550px; |
| ? | background: #f9f9f9; |
| ? | margin:50px auto; |
| ? | overflow:hidden; |
| ? | } |
| ? | ? |
| ? | .box h2{ |
| ? | width:430px; |
| ? | font-size:24px; |
| ? | line-height: 50px; |
| ? | color:#fd8653; |
| ? | font-weight:normal; |
| ? | margin:10px auto 20px; |
| ? | border-bottom:1px solid #d5d5d5; |
| ? | ? |
| ? | } |
| ? | .form{ |
| ? | width:430px; |
| ? | overflow:hidden; |
| ? | margin:15px 0 25px 25px; |
| ? | } |
| ? | ? |
| ? | .form label{ |
| ? | float:left; |
| ? | width:100px; |
| ? | height:38px; |
| ? | line-height: 38px; |
| ? | text-align: right; |
| ? | font-size:14px; |
| ? | } |
| ? | ? |
| ? | .form input{ |
| ? | width:300px; |
| ? | height:30px; |
| ? | border:1px solid red; |
| ? | outline:none; |
| ? | text-indent:10px; |
| ? | float:left; |
| ? | font-size:14px; |
| ? | } |
| ? | ? |
| ? | .form textarea{ |
| ? | width:300px; |
| ? | height:60px; |
| ? | border:1px solid blue; |
| ? | outline:none; |
| ? | } |
| ? | ? |
| ? | .form .check{ |
| ? | width:15px; |
| ? | height:15px; |
| ? | border:1px solid #ccc; |
| ? | margin-left:100px; |
| ? | } |
| ? | ? |
| ? | .form .xieyi{ |
| ? | float:left; |
| ? | color:#333; |
| ? | font-size:14px; |
| ? | margin-left:10px; |
| ? | ? |
| ? | } |
| ? | ? |
| ? | .zhuce{ |
| ? | width:330px; |
| ? | height:38px; |
| ? | background:#00ccff; |
| ? | border:0px; |
| ? | font-size:18px; |
| ? | color:#fff; |
| ? | margin-left:100px; |
| ? | } |
| ? | ? |
| ? | </style> |
| ? | </head> |
| ? | <body> |
| ? | <!-- 1.搭建框架界面 --> |
| ? | <div class="box"> |
| ? | <h2>注冊(cè)表單</h2> |
| ? | <form action=""> |
| ? | <div class="form"> |
| ? | <label for="">用戶名：</label> |
| ? | <input type="text"> |
| ? | </div> |
| ? | <div class="form"> |
| ? | <label for="">密碼：</label> |
| ? | <input type="password"> |
| ? | </div> |
| ? | <div class="form"> |
| ? | <label for="">確認(rèn)密碼：</label> |
| ? | <input type="password"> |
| ? | </div> |
| ? | <div class="form"> |
| ? | <label for="">郵箱：</label> |
| ? | <input type="text"> |
| ? | </div> |
| ? | <div class="form"> |
| ? | <label for="">個(gè)人簡介：</label> |
| ? | <textarea name="" id=""></textarea> |
| ? | </div> |
| ? | <div class="form"> |
| ? | <input type="checkbox" class="check"> |
| ? | <span class="xieyi">同意用戶協(xié)議</span> |
| ? | </div> |
| ? | <input type="submit" value="注冊(cè)" class="zhuce"> |
| ? | ? |
| ? | </form> |
| ? | ? |
| ? | </div> |
| ? | ? |
| ? | </body> |
| ? | </html> |
總結(jié)
以上是生活随笔為你收集整理的html-css练习题 (注册表单)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python中遇到循环import即ci
- 下一篇： 微信小程序中带参数返回上一页的方法总结（