HTML--模仿学校信息门户页面
作业一
第一章:
实践作业1:自己独立设计并实现一个简单的登录页面(样式自定,可参考民大信息门户登录页面),页面中需包含以下组件:
文本框text
密码框password
复选框checkbox (可供用户选择记住密码)
提交按钮submit
重置按钮reset
图片 image
框架 frameset (浏览器窗口划分样式及比例自定)
另外自己设计一个超链接,鼠标单击时能跳转到计科学院主页。
源码:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title><欢迎登陆中南民族大学信息门户</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body{text-align:center }
body{line-height:2}
body {background:url("background.jpg"); background-repeat:repeat}
</style>
</head>
<form>
<div> <p align="center" > <font size = "7" >欢迎登陆中南民族大学信息门户</font></p> </div>
<br />
<br />
<br />
姓名:
<input style="width:150px;height:20px;background-color:orange" type="text" name="myName" />
<br />
<br />
密码:
<input style="width:150px;height:20px;background-color:orange;" type="password" name="pass" >
<br />
<br />
<input type="checkbox" name="radiobutton" value="radiobutton" checked> 记住密码?
<br />
<br />
<button type="button" style="width:120px;height:40px;background-color:yellow;">登陆</button>
<input type="reset" value="重置" style="width:120px;height:40px;background-color:yellow;">
<br />
<p>
<!--<img src="70d346c20a27b293.jpg" alt="hahahaahahahaha"/>-->
<br />
<a href ="http://www.scuec.edu.cn/jky/">中南民族大学计算机科学学院</a>
</p>
</form>
</body >
</html>
效果:
不知道为什么会出来一个分页效果,觉得不可思议~实在想不通,本来就是个小白~
下次想出来了再说~