用div,form制作登录页面,尽可能做得漂亮。
练习使用下拉列表选择框,无序列表,有序列表,定义列表。
观察常用网页的HTML元素,在实际的应用场景中,用已学的标签模仿制作。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>管理信息系统</title></head><body><h1>欢迎访问!</h1><h3>GZCC</h3><P>跳转链接</P> ?<a href="http://www.gzcc.cn/">广州商学院 ?????<br> ?????<img src="http://www.gzcc.cn/2016/images/banner.png" width="500" height="39" alt="gzcc.cn"/></a><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: yellow;height: 150px;width: 400px;float: left;"> ???<form action=""> ???????用户名:<input type="" name="用户名" placeholder="请输入用户名"><br> ???????密 ?码:<input type="" name="密码" placeholder="请输入密码"><br> ???????<br> ???????<input type="radio"name="role" value="stu">学生 ???????<input type="radio" name="role" value="tea">教师 ???????<input type="radio" name="role" value="tea">游客<br> ???????????<input type="button" value="登录"> ???????????<input type="button" value="取消"> ???????????<input type="button" value="重置"> ???</form></div> ???<div id="footer" style="background-color: aquamarine;clear: both;text-align: center;">版权 ? duym</div></div><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="contant" style="background-color:yellow;height:220px;width:400px;float:left;"> ???????<form action=" "...></form> ??????<form> ???<select > ???????<option>学生</option> ???????<option>教师</option> ???????<option>游客</option> ???</select></form> ???????<ul> ???????????<li>学校简介</li> ???????????<li>大事件</li> ???????????<li>全景</li> ???????</ul> ???????<ol> ???????????<li>金融学院</li> ???????????<li>外国语学院</li> ???????????<li>旅游学院</li> ???????</ol> ?????????<div id="footer" style="background-color:aquamarine;clear:both;text-align:center;">版权? duym</div></body></html>
web基础,用html元素制作web页面
原文地址:http://www.cnblogs.com/blackboardf/p/7663020.html