?利用了html和javascript技术,做了一个简单的界面
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="../img/1.jpg" height="220" width="1250">
<table>
<tr>
<td> <iframe src="picture1.html" height="300" width="410" name="a"></iframe></td>
<td><iframe src="piture2.html" height="300" width="410" name="b"></iframe> </td>
<td><iframe src="piture3.html" height="300" width="410" name="c"></iframe> </td><br/>
</tr>
<tr>
<td><a href="page1.html" target="a" >注册</a> </td>
<td><a href="page3.html" target="b">登陆</a> </td>
<td><a href="page4.html" target="c">用户</a> </td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var select=document.getElementsByTagName("input");
function onclick1(){
for (var i = 0; i < select.length; i++) {
select[i].checked=true;
}
}
function onclick2(){
for (var i = 0; i < select.length; i++) {
select[i].checked=false;
}
}
function onlick3(){
for (var i = 0; i < select.length; i++) {
if(select[i].checked==true){
select[i].checked=false;
}else{
select[i].checked=true;
}
}
}
var inputtext=document.getElementsByTagName("input")
function onclick4(){
for (var i = 0; i < inputtext.length; i++) {
inputtext[i].value=""
}
}
</script>
</head>
<body>
<h1 align="center" style="color: aqua">用户注册</h1>
<table align="center">
<tr>
<td>用户名字:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>用户密码:</td>
<td><input type="password"></td>
</tr>
<tr>
<td>出生日期</td>
<td><input type="text"></td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td><input type="checkbox" name="hobby">看电影
<input type="checkbox" name="hobby">玩游戏
<input type="checkbox" name="hobby">购物 </td>
</tr>
<tr>
<td><button onclick="onclick1()">全选</button>
<<button onclick="onclick2()">全不选</button>
<button onclick="onlick3()">反选</button></td>
</tr>
<tr>
<td>籍贯:</td>
<td>
<select>
<option>---请选择籍贯---</option>
<option>广东揭阳</option>
<option>广东广州</option>
<option>广东深圳</option>
<option>广东汕头</option>
</select>
</td>
</tr>
<tr>
<td><button>注册</button></td>
<td><button onclick="onclick4()">清空</button></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var inputtext=document.getElementsByTagName("input")
function onclick1(){
for (var i = 0; i < inputtext.length; i++) {
inputtext[i].value=""
}
}
</script>
</head>
<body>
<h1 align="center" style="color: blue">用户登录</h1>
<table align="center">
<tr>
<td>用户名字:</td>
<td><input type="text" ></td>
</tr>
<tr>
<td>用户密码:</td>
<td><input type="password"></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password"></td>
</tr>
<tr>
<td><button>登陆</button></td>
<td><button onclick="onclick1()">清除</button></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 align="center" style="color: aquamarine">用户界面</h1>
<table align="center">
<tr><td>姓名:小明</td></tr>
<tr><td>籍贯:广东广州</td></tr>
<tr><td>成绩:</td></tr>
<tr>
<td>
<table border="1" cellspacing="0">
<tr>
<td>科目</td>
<td>英语</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>成绩</td>
<td>90</td>
<td>88</td>
<td>100</td>
</tr>
<tr>
<td>评分</td>
<td>优</td>
<td>良</td>
<td>优</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="../img/2.png" width="400" height="300">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="../img/3.jpg" width="400" height="300">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="../img/4.jpg" width="400" height="300">
</body>
</html>
?
?
?
?
|