2020-10-15
HTML登录
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.s1{
width: 870px;
height: 360px;
background:url(img/pop-bg.jpg) no-repeat;
padding-top: 190px;
padding-left: 10px;
float: left;
}
table{
float: right;
padding-right: 170px;
margin-top: -150px;
line-height:50px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="s1">
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 30px;">登录</td>
<td style="font-size: 30px;">注册</td>
</tr>
<tr>
<td colspan="2" >
<input type="" name="" id="" value="请输入手机号或者邮箱" style="width: 330px;height: 25px;"/>
</td>
</tr>
<tr>
<td colspan="2" ><input type="" name="" id="" value="请输入密码" style="width: 330px;height: 25px;"/></td>
</tr>
<tr>
<td><input type="" name="" id="" value="请输入验证码" style="width: 160px;height: 25px;"/></td>
<td><input type="button" name="" id="" value="获取验证码" style="width: 130px;height: 30px; background-color: whitesmoke;"/></td>
</tr>
<tr>
<td colspan="2" >
<input type="button" name="" id="" value="立即注册" style="width: 340px;height: 40px;background-color: aqua;"/>
</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="" />
我以阅读并同意 服务条款</td>
</tr>
</table>
</div>
</div>
</body>
</html>
图片点击大小切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.3.1.js" ></script>
<script type="text/javascript">
function my$(id) {
return document.getElementById(id);
var aObjs=my$("imagegallery").getElementsByTagName("a");
//循环遍历所有的a标签
for(var i=0;i<aObjs.length;i++){
//为每个a标签注册点击事件
aObjs[i].οnclick=function () {
//为id为image的标签的src赋值
my$("image").src=this.href;
//阻止超链接默认的跳转
return false;
}
}
}
</script>
<style type="text/css">
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
</head>
<body>
<ul id="imagegallery">
<li><a href="img/bxgz_big.jpeg" title="A">
<img src="img/bxgz.jpg" width="100" alt="1"/>
</a></li>
<li><a href="img/kn_big.jpeg" title="B">
<img src="img/kn.jpg" width="100" alt="2"/>
</a></li>
<li><a href="img/pdx_big.jpeg" title="C">
<img src="img/pdx.png" width="100" alt="3"/>
</a></li>
<li><a href="img/xx_big.jpeg" title="D">
<img src="img/xx.jpg" width="100" alt="4"/>
</a></li>
</ul>
</body>
</html>