标签:head value tle sele body 观察 type ges 登录
1.用div,form制作登录页面,尽可能做得漂亮。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎使用城市供水信息服务平台</title> </head> <body class="center"> <h1>城市供水云服务平台</h1><br> <div id="container" style="width:400px " > <div id="header" style="background-color: blue;"><h2 align="center" style="margin-bottom:0;">用户登录</h2></div> <div id="content" style="background-color:#EEEEEE;height:180px;width:400px;float:left;text-align:center;"> <form> <br>用户名:<input type="text" name="firstname" placeholder="请输入用户"><br> <br>密码:<input type="password" name="pwd"><br> <br><input type="radio" name="role" value="yh">城市用户 <input type="radio" name="role" value="fk">访客<br> <br><input type="button" value="登录"> </form> </div> <div id="footer" style="background-color:blue;clear:both;text-align:center;">版权 ? suxihong</div> </div> </body> </html>
2.练习使用下拉列表选择框,无序列表,有序列表,定义列表。
<div id="container" style="width:400px " > <div id="header" style="background-color: blue;"><h2 align="center" style="margin-bottom:0;">城市供水查询</h2></div> <div id="content" style="background-color:#EEEEEE;height:180px;width:400px;float:left;text-align:center;"> <form> <select> <option>广东</option> <option>浙江</option> </select> </form> <br><dl style="text-align:left"> <dt>热门城市</dt> </dl> <ul style="text-align:left"> <li>广州</li> <li>杭州</li> </ul> <ol style="text-align:left"> <li>天河区</li> <li>越秀区</li> </ol> </div> <div id="footer" style="background-color:blue;clear:both;text-align:center;">版权 ? suxihong</div> </div>
3.观察常用网页的HTML元素,在实际的应用场景中,用已学的标签模仿制作。
标签:head value tle sele body 观察 type ges 登录
原文地址:http://www.cnblogs.com/suxihong/p/7663076.html