代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>婚庆首页</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="top">
<img src="img/logo.jpg">
</div>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">会员</a></li>
<li><a href="#">活动</a></li>
<li><a href="#">直播</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">注册</a></li>
</ul>
</div>
<div class="banner">
<div class="con">
<div style="font-size: 5px;" class="left">
上一张
</div>
<div style="font-size: 5px;" class="right">
下一张
</div>
</div>
<div class="balls">
<div class="ball"title="0"></div>
<div class="ball"title="1"></div>
<div class="ball"title="2"></div>
<div class="ball"title="3"></div>
</div>
<div class="boxs">
<div class="box">
<img id="img" src="img/banner_1.jpg">
</div>
<div class="box">
<img id="img" src="img/banner_2.jpg">
</div>
<div class="box">
<img id="img" src="img/banner_3.jpg">
</div>
<div class="box">
<img id="img" src="img/banner_4.jpg">
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
alert("banner控制按钮不稳定，会影响自动播放，如自动播放失效请刷新网页")
$(function(){
x=0
$(".right").click(function(){
x=x-1343;
if(x<-4029){x=0;}
$(".boxs").css({"margin-left":x+"px"})
})
$(".left").click(function(){
x=x+1343;
if(x>0){x=-4029;}
$(".boxs").css({"margin-left":x+"px"})
})
$(".ball").click(function(){
n=$(this).attr("title")
x=-1343*n
$(".boxs").css({"margin-left":x+"px"})
})
})
var number = 1;
function fun(){
number ++ ;
if(number > 4){
number = 1;
}
var img = document.getElementById("img");
img.src = "img/banner_"+number+".jpg";
}
setInterval(fun,1500);
</script>
</header>
<section>
<div class="content">
<h2 class="step">注册步骤：</h2>
<h3>您的账号信息：</h3>
<form>
<table>
<tbody>
<tr>
<td class="left">注册方式：</td>
<td>
<input type="radio" name="tel"> E-mail注册
<input type="radio" name="tel"> 手机号码注册
</td>
</tr>
<tr>
<td class="left">注册邮箱：</td>
<td>
<input type="text" class="tt">
</td>
</tr>
<tr>
<td class="left">注册手机：</td>
<td>
<input type="text" class="tt">
</td>
</tr>
<tr>
<td class="left">登录密码：</td>
<td>
<input type="text" class="tt">
</td>
</tr>
<tr>
<td class="left">昵称：</td>
<td>
<input type="text" class="tt">
</td>
</tr>
</tbody>
</table>
<h3>您的个人信息：</h3>
<table>
<tbody>
<tr>
<td class="left">性别：</td>
<td>
<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
</td>
</tr>
<tr>
<td class="left">学历：</td>
<td>
<select>
<option>-请选择-</option>
<option>中职/高中</option>
<option>专科/本科</option>
<option>硕士研究生</option>
<option>博士研究生</option>
</select>
</td>
</tr>
<tr>
<td class="left">所在城市：</td>
<td>
<select>
<option>-请选择-</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</td>
</tr>
<tr>
<td class="left">兴趣爱好：</td>
<td>
<input type="checkbox"> 足球
<input type="checkbox"> 蓝球
<input type="checkbox"> 游泳
<input type="checkbox"> 唱歌
<input type="checkbox"> 跑步
<input type="checkbox"> 瑜伽
</td>
</tr>
<tr>
<td class="left">自我介绍：</td>
<td>
<textarea cols="60" rows="8">听我说谢谢你，因为有你，温暖我心里。</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="完成注册" class="but">
</td>
</tr>
</tbody>
</table>
</form>
</div>
</section>
<footer>
<div class="h4"><h5>    </h4></div>
<div class="h5"><h5>Copyright 2006-2016 QIANNIANZHILIANcom, All rights reserved.</h5></div>
<div class="h6"><h6>2001-2018，版权所有 千年之恋 85CP备13385453</h6></div>
<input type="text" class="tu">
</footer>
</body>
</html>
效果如下：
扫一扫
88
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
