web基础,用html元素制作web页面
用div,form制作登录页面,尽可能做得漂亮。
练习使用下拉列表选择框,无序列表,有序列表,定义列表。
观察常用网页的HTML元素,在实际的应用场景中,用已学的标签模仿制作。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>广州商学院</title> </head> <body> <h1>欢迎您的到来!</h1> <br> <div id="container" style="width: 400px"> <div id="header" style="background-color: antiquewhite" ><h2 align="center" style="margin-bottom: 0">登录</h2></div> <div id="content" style="background-color:aqua";height: 150px;width: 500px;float: left;> 用户名:<input type="text"name="username"placeholder="请输入用户名"><br> 密码: <input type="text"name="password"placeholder="请输入密码"><br> <input type="radio"name="教师">教师 <input type="radio"name="学生">学生<br> <input type="button"value="确定"> <input type="button"value="重置"><br> </div> <div id="footer" style="background-color: antiquewhite;clear:both;text-align: center;">版权_zsy</div> </div> <h5>------------------------------------------------------</h5> <div id="container"style="width: 400px"> <div id="header" style="background-color: aqua"><h2 align="center"style="margin-bottom: auto" >相关栏目/Relater sections</div> <div id="content"style="background-color: antiquewhite;height:150px;width:400px;float:left"> <from> <select> <option>疑问</option> <option>提问</option> </select> </from> <ul> <li>教师常用表格</li> <li>学生常用表格</li> <li>教学管理表格</li> <li>教学管理文件</li> <li>参考资料</li> </ul> </div> </div> <div id="container"style="width:400px"> <div id="header" style="background-color: crimson"><h2 align="center"style="margin-bottom: auto" >办事指南</h2></div> <div id="content"style="background-color: peachpuff;height: 200px;width: 400px;float: left"> <ol> <li>教学处会议组织流程示意图</li> <li>教师工作量审核流程示意图</li> <li>教学处印章管理示意图</li> </ol> <dl> <dt>学生会</dt> <dd>外联部</dd> <dt>团委</dt> <dd>组织部</dd> </dl> </div> <div id="footer" style="background-color: crimson"><h2 align="center"style="margin-bottom: auto">版权_zsy</h2></div> </div> <p> <a href="http://www.gzcc.cn/">进入广州商学院<img src="http://www.gzcc.cn/2016/images/banner.png" height=50,width=200></a> </p> </body> </html>

浙公网安备 33010602011771号