用div,form制作登录页面,尽可能做得漂亮。
练习使用下拉列表选择框,无序列表,有序列表,定义列表。
观察常用网页的HTML元素,在实际的应用场景中,用已学的标签模仿制作。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>教务系统</title> </head> <body> <hr> <div id="container" style="width: 400px"> <div id="header" style="background-color: aquamarine"><h2 align="center" style="margin-bottom: 0;">登录</h2></div> <div id="content" style="background-color: #EEEEEE;height: 150px;width: 400px;float: left;"> <form action=""> <select> <option>校内入口</option> <option>校外入口</option> </select><br> 账号:<input type="text" name="账号"placeholder="请输入学号"><br> 密码:<input type="password" name="密码"placeholder="请输入密码"> <br> <input type="radio"name="role"value="stu">学生 <input type="checkbox"name="vehicle"value="tea">教师<br> <input type="button" value="登录"> <input type="button" value="取消"> <input type="button" value="刷新"> </form> <div id="container" style="width: 400px"> <div id="header" style="background-color: aquamarine"><h2 align="center" style="margin-bottom: 0;"></h2></div> <div id="content" style="background-color: #EEEEEE;height: 150px;width: 400px;float: left;"> <form action=""> <ul> <li>交通指南</li> <li>人才招聘</li> <li>合作院校</li> <li>信息公开</li> </ul> <dl> <dt>版权所有:广州商学院 地址:广州市黄浦区九龙大道206号</dt> </div> <div id="footer" style="background-color: #FFA500;clear: both;text-align: center;">版权 © duym</div> </div> <hr> <P>友情链接</P> <a href="http://www.gzcc.cn/">广州商学院<br> <img src="http://www.gzcc.cn/2016/images/banner.png" width="258" height="39" alt="gzcc.cn"/></a> </body> </html>