前端页面

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量247 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45444336/article/details/107326359
版权 
主页
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>黑马旅游网</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<!--引入头部-->
    <div id="header"></div>
    <!-- banner start-->
    <section id="banner">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="images/banner_1.jpg" alt="">
                </div>
                <div class="item">
                    <img src="images/banner_2.jpg" alt="">
                </div>
                <div class="item">
                    <img src="images/banner_3.jpg" alt="">
                </div>
            </div>
            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			    <span class="sr-only">Previous</span>
			  </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
			  </a>
        </div>
    </section>
    <!-- banner end-->
    <!-- 旅游 start-->
    <section id="content">
         <!-- 黑马精选start-->
        <section class="hemai_jx">
            <div class="jx_top">
                <div class="jx_tit">
                    <img src="images/icon_5.jpg" alt="">
                    <span>黑马精选</span>
                </div>
                <!-- Nav tabs -->
                <ul class="jx_tabs" role="tablist">
                    <li role="presentation" class="active">
                        <span></span>
                        <a href="#popularity" aria-controls="popularity" role="tab" data-toggle="tab">人气旅游</a>
                    </li>
                    <li role="presentation">
                        <span></span>
                        <a href="#newest" aria-controls="newest" role="tab" data-toggle="tab">最新旅游</a>
                    </li>
                    <li role="presentation">
                        <span></span>
                        <a href="#theme" aria-controls="theme" role="tab" data-toggle="tab">主题旅游</a>
                    </li>
                </ul>
            </div>
            <div class="jx_content">
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="popularity">
                        <div class="row">
                            <div class="col-md-3">
                                <a href="javascript:;">
                                    <img src="images/jiangxuan_4.jpg" alt="">
                                    <div class="has_border">
                                        <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                        <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-3">
                                <a href="javascript:;">
                                    <img src="images/jiangxuan_4.jpg" alt="">
                                    <div class="has_border">
                                        <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                        <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-3">
                                <a href="javascript:;">
                                    <img src="images/jiangxuan_4.jpg" alt="">
                                    <div class="has_border">
                                        <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                        <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-3">
                                <a href="javascript:;">
                                    <img src="images/jiangxuan_4.jpg" alt="">
                                    <div class="has_border">
                                        <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                        <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="newest">
                        <div class="row">
                            <div class="col-md-3">
                                <a href="javascript:;">
                                    <img src="images/jiangxuan_1.jpg" alt="">
                                    <div class="has_border">
                                        <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                        <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-3">
                                <a href="javascript:;">
                                    <img src="images/jiangxuan_1.jpg" alt="">
                                    <div class="has_border">
                                        <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                        <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-3">
                                <a href="javascript:;">
                                    <img src="images/jiangxuan_1.jpg" alt="">
                                    <div class="has_border">
                                        <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                        <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-3">
                                <a href="javascript:;">
                                    <img src="images/jiangxuan_1.jpg" alt="">
                                    <div class="has_border">
                                        <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                        <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="theme">
                        <div class="row">
                            <div class="col-md-3">
                                <a href="javascript:;">
                                    <img src="images/jiangxuan_2.jpg" alt="">
                                    <div class="has_border">
                                        <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                        <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-3">
                                <a href="javascript:;">
                                    <img src="images/jiangxuan_2.jpg" alt="">
                                    <div class="has_border">
                                        <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                        <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-3">
                                <a href="javascript:;">
                                    <img src="images/jiangxuan_2.jpg" alt="">
                                    <div class="has_border">
                                        <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                        <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-3">
                                <a href="javascript:;">
                                    <img src="images/jiangxuan_2.jpg" alt="">
                                    <div class="has_border">
                                        <h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
                                        <div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 黑马精选end-->
        <!-- 国内游 start-->
        <section class="hemai_jx">
            <div class="jx_top">
                <div class="jx_tit">
                    <img src="images/icon_6.jpg" alt="">
                    <span>国内游</span>
                </div>
            </div>
            <div class="heima_gn">
                <div class="guonei_l">
                    <img src="images/guonei_1.jpg" alt="">
                </div>
                <div class="guone_r">
                    <div class="row">
                        <div class="col-md-4">
                            <a href="route_detail.html">
								<img src="images/jiangxuan_4.jpg" alt="">
								<div class="has_border">
									<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
									<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>									
								</div>
							</a>
                        </div>
                        <div class="col-md-4">
                            <a href="route_detail.html">
								<img src="images/jiangxuan_4.jpg" alt="">
								<div class="has_border">
									<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
									<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>									
								</div>
							</a>
                        </div>
                        <div class="col-md-4">
                            <a href="route_detail.html">
								<img src="images/jiangxuan_4.jpg" alt="">
								<div class="has_border">
									<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
									<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>									
								</div>
							</a>
                        </div>
                        <div class="col-md-4">
                            <a href="route_detail.html">
								<img src="images/jiangxuan_4.jpg" alt="">
								<div class="has_border">
									<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
									<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>									
								</div>
							</a>
                        </div>
                        <div class="col-md-4">
                            <a href="route_detail.html">
									<img src="images/jiangxuan_4.jpg" alt="">
								<div class="has_border">
									<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
									<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>									
								</div>
							</a>
                        </div>
                        <div class="col-md-4">
                            <a href="route_detail.html">
								<img src="images/jiangxuan_4.jpg" alt="">
								<div class="has_border">
									<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
									<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>									
								</div>
							</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 国内游 end-->
        <!-- 境外游 start-->
        <section class="hemai_jx">
            <div class="jx_top">
                <div class="jx_tit">
                    <img src="images/icon_7.jpg" alt="">
                    <span>境外游</span>
                </div>
            </div>
            <div class="heima_gn">
                <div class="guonei_l">
                    <img src="images/jiangwai_1.jpg" alt="">
                </div>
                <div class="guone_r">
                    <div class="row">
                        <div class="col-md-4">
                            <a href="route_detail.html">
								<img src="images/jiangxuan_4.jpg" alt="">
								<div class="has_border">
									<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
									<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>									
								</div>
							</a>
                        </div>
                        <div class="col-md-4">
                            <a href="route_detail.html">
								<img src="images/jiangxuan_4.jpg" alt="">
								<div class="has_border">
									<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
									<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>									
								</div>
							</a>
                        </div>
                        <div class="col-md-4">
                            <a href="route_detail.html">
								<img src="images/jiangxuan_4.jpg" alt="">
								<div class="has_border">
									<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
									<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>									
								</div>
							</a>
                        </div>
                        <div class="col-md-4">
                            <a href="route_detail.html">
								<img src="images/jiangxuan_4.jpg" alt="">
								<div class="has_border">
									<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
									<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>									
								</div>
							</a>
                        </div>
                        <div class="col-md-4">
                            <a href="route_detail.html">
									<img src="images/jiangxuan_4.jpg" alt="">
								<div class="has_border">
									<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
									<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>									
								</div>
							</a>
                        </div>
                        <div class="col-md-4">
                            <a href="route_detail.html">
								<img src="images/jiangxuan_4.jpg" alt="">
								<div class="has_border">
									<h3>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</h3>
									<div class="price">网付价<em>￥</em><strong>889</strong><em>起</em></div>									
								</div>
							</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 境外游 end-->
    </section>
    <!-- 旅游 end-->
   <!--导入底部-->
    <div id="footer"></div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!--导入布局js，共享header和footer-->
    <script type="text/javascript" src="js/include.js"></script>
    <script type="text/javascript">
        //提交异步请求获取黑马精选数据（人气、最新、主题）
        $.post(
            "/route/routeCareChoose",//Servlet地址
            //{action:"routeCareChoose"},
            function (resulteInfo) {
                if(resulteInfo.flag){
                    //正常获取数据
                    //获取人气列表
                    var popularityList = resulteInfo.data.popularity;//将查询出来的三个list全部以key和value的形式存入map,再将map封装到ResultInfo的data属性中
                    //拼接
                    var html="";
                    for(var i=0;i<popularityList.length;i++){//popularityList是一个List<Route>
                        var route = popularityList[i];
                        html+="<div class=\"col-md-3\">\n" +
                            "                                <a href=\"/route_detail.html?rid="+route.rid+"\">\n" +
                            "                                    <img src=\""+route.rimage+"\" alt=\"\">\n" +
                            "                                    <div class=\"has_border\">\n" +
                            "                                        <h3>"+route.rname+"</h3>\n" +
                            "                                        <div class=\"price\">网付价<em>￥</em><strong>"+route.price+"</strong><em>起</em></div>\n" +
                            "                                    </div>\n" +
                            "                                </a>\n" +
                            "                            </div>";
                    }
                    //更新
                    $("#popularity .row").html(html);

                    //获取最新
                    var newsList = resulteInfo.data.news;
                    //拼接
                    var html="";
                    for(var i=0;i<newsList.length;i++){//newsList是List<Route>
                        var route = newsList[i];
                        html+="<div class=\"col-md-3\">\n" +
                            "                                <a href=\"/route_detail.html?rid="+route.rid+"\">\n" +
                            "                                    <img src=\""+route.rimage+"\" alt=\"\">\n" +
                            "                                    <div class=\"has_border\">\n" +
                            "                                        <h3>"+route.rname+"</h3>\n" +
                            "                                        <div class=\"price\">网付价<em>￥</em><strong>"+route.price+"</strong><em>起</em></div>\n" +
                            "                                    </div>\n" +
                            "                                </a>\n" +
                            "                            </div>";
                    }
                    //更新
                    $("#newest .row").html(html);

                    //获取主题
                    var themesList = resulteInfo.data.themes;
                    //拼接
                    var html="";
                    for(var i=0;i<themesList.length;i++){//themesList是List<Route>
                        var route = themesList[i];
                        html+="<div class=\"col-md-3\">\n" +
                            "                                <a href=\"/route_detail.html?rid="+route.rid+"\">\n" +
                            "                                    <img src=\""+route.rimage+"\" alt=\"\">\n" +
                            "                                    <div class=\"has_border\">\n" +
                            "                                        <h3>"+route.rname+"</h3>\n" +
                            "                                        <div class=\"price\">网付价<em>￥</em><strong>"+route.price+"</strong><em>起</em></div>\n" +
                            "                                    </div>\n" +
                            "                                </a>\n" +
                            "                            </div>";
                    }
                    //更新
                    $("#theme .row").html(html);
                }else{
                    //发生异常
                    alert(resulteInfo.errorMsg);

                }
            },
            "json"
        );
    </script>
</body>
</html>




登录页面
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>黑马旅游网-登录</title>  
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
      <!--导入angularJS文件-->
    <script src="js/angular.min.js"></script>
	<!--导入jquery-->
	<script src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		//加载事件
		$(function () {
			//给登录按钮注册点击事件
			$("#login").click(function () {
				//用户名，密码不为空提交异步登录请求
				var username = $("#username").val();
				var password = $("#password").val();
				if( username && password){
					//提交异步登录请求

					$.post(
					    "/user/login",//servlet地址
						$("#loginForm").serialize(),//表单所有数据
						function (resultInfo) {
							if(resultInfo.flag){
							    //登录成功，跳转到首页
								location.href="index.html";
							}else{
							    //失败，显示消息
                                $("#errorMsg").text(resultInfo.errorMsg);
							}
                        },
						"json"
					);
				}else{
				    $("#errorMsg").text("请输入用户名或密码");
				}
            });
        });
	</script>
</head>

<body>
<!--引入头部-->
<div id="header"></div>
    <!-- 头部 end -->
    <section id="login_wrap">
        <div class="fullscreen-bg" style="background: url(images/login_bg.png);height: 532px;">
        	
        </div>
        <div class="login-box">
        	<div class="title">
        		<img src="images/login_logo.png" alt="">
        		<span>欢迎登录黑马旅游账户</span>
        	</div>
        	<div class="login_inner">
				
				<!--登录错误提示消息-->
        		<div id="errorMsg" class="alert alert-danger" ></div>
				<form id="loginForm" action="" method="post" accept-charset="utf-8">
        			<input type="hidden" name="action" value="login"/>
					<input id="username" name="username" type="text" placeholder="请输入账号" autocomplete="off">
        			<input id="password" name="password" type="password" placeholder="请输入密码" autocomplete="off">
        			<div class="verify">
					<input name="check" type="text" placeholder="请输入验证码" autocomplete="off">
					<span><img src="/check/checkCode" alt="" onclick="changeCheckCode(this)"></span>
					<script type="text/javascript">
						//图片点击事件
						function changeCheckCode(img) {
							img.src="/check/checkCode?"+new Date().getTime();
						}
					</script>
			</div>
			<div class="submit_btn">
        				<button type="button" id="login">登录</button>
        				<div class="auto_login">
        					<input type="checkbox" name="" class="checkbox">
        					<span>自动登录</span>
        				</div>        				
        			</div>        			       		
        		</form>
        		<div class="reg">没有账户？<a href="javascript:;">立即注册</a></div>
        	</div>
        </div>
    </section>
    <!--引入尾部-->
    <div id="footer"></div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.0.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!--导入布局js，共享header和footer-->
    <script type="text/javascript" src="js/include.js"></script>
</body>

</html>



注册页面
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>注册</title>
        <link rel="stylesheet" type="text/css" href="css/common.css">
        <link rel="stylesheet" href="css/register.css">
		<!--导入jquery-->
		<script src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
			//加载事件
			$(function () {
				//目的：校验用户名，通过之后提交异步请求进行用户信息注册

				//1.注册表单提交事件
				$("#registerForm").submit(function () {
					//2.校验用户名
					var username = $("#username").val();
                    //校验用户名，校验要求用户名字符长度6~18个字符，首字符必须为英文字母，其它字符范围为数字或英文字母或下划线
					var reg=/^[a-zA-Z]\w{5,17}$/;
					if(reg.test(username)){
					    //提交异步请求
						var url="/user/register";//UserServlet
						var data=$(this).serialize();//获取表单所有元素数据key1=value1&key2=value2
						var callback = function (resultInfo) {
							if(resultInfo.flag){
							    //注册成功,跳转register_ok.html
								location.href="register_ok.html";
							}else{
							    //发生异常
								$("#msg").text(resultInfo.errorMsg);
							}
                        };
						var type="json";
						$.post(url,data,callback,type);
					}else{
					    alert("用户名验证失败");
					}
                    return false;//不让表单提交
                });
            });
		</script>
    </head>
	<body>
	<!--引入头部-->
	<div id="header"></div>
        <!-- 头部 end -->
    	<div class="rg_layout">
    		<div class="rg_form clearfix">
    			<div class="rg_form_left">
    				<p>新用户注册</p>
    				<p>USER REGISTER</p>
    			</div>
    			<div class="rg_form_center">
					
					<!--注册表单-->
    				<form id="registerForm">
						<!--提交处理请求的标识符-->
						<input type="hidden" name="action" value="register">
    					<table style="margin-top: 25px;">
    						<tr>
    							<td class="td_left">
    								<label for="username">用户名</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="username" name="username" placeholder="请输入账号">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="password">密码</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="password" name="password" placeholder="请输入密码">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="email">Email</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="email" name="email" placeholder="请输入Email">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="name">姓名</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="name" name="name" placeholder="请输入真实姓名">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="telephone">手机号</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="sex">性别</label>
    							</td>
    							<td class="td_right gender">
    								<input type="radio" id="sex" name="sex" value="男" checked> 男
    								<input type="radio" name="sex" value="女"> 女
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="birthday">出生日期</label>
    							</td>
    							<td class="td_right">
    								<input type="date" id="birthday" name="birthday" placeholder="年/月/日">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="check">验证码</label>
    							</td>
    							<td class="td_right check">
    								<input type="text" id="check" name="check" class="check">
    								<img src="/check/checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
									<script type="text/javascript">
										//图片点击事件
										function changeCheckCode(img) {
											img.src="/check/checkCode?"+new Date().getTime();
                                        }
									</script>
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left"> 
    							</td>
    							<td class="td_right check"> 
    								<input type="submit" class="submit" value="注册">
									<span id="msg" style="color: red;"></span>
    							</td>
    						</tr>
    					</table>
    				</form>
    			</div>
    			<div class="rg_form_right">
    				<p>
    					已有账号？
    					<a href="#">立即登录</a>
    				</p>
    			</div>
    		</div>
    	</div>
        <!--引入尾部-->
    	<div id="footer"></div>
		<!--导入布局js，共享header和footer-->
		<script type="text/javascript" src="js/include.js"></script>
    	
    </body>
</html>
weixin_45444336
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端分页
FREE-FLY的博客
07-26 483
/**  * creat 2018/7/10 by xiaominzhang  * 项目列表展示  */ var wrapObj = {   changeTable:function(){} }; var task = "http://test.runhemei.com/task/"; var $projectTable = $('#projectTable'),$projectClass = $...
前端分页实现
King Saj
03-27 224
思路: 发送请求获取全部数据一维数组,然后将一维数组转换成二维数组,点击分页切换的时候,取当前页的索引即可. 案例使用:vue + element(Pagination 分页) 实现 第一种方法实现: <template> <div> <h1>前端分页实现</h1> <ul :class="$style.infinite_list" v-infinite-scroll="load" style="overflow:auto"&g..
国内旅游网站：position专项练习（网页设计与制作html+css+javascript)
weixin_62848089的博客
09-19 726
【代码】 国内旅游网站：position专项练习（网页设计与制作html+css+javascript)
html旅游网站设计与实现——绿色古典旅游景区 HTML+CSS+JavaScript
热门推荐
HTML网页设计
07-29 3万+
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的...
web前端页面
07-29
html css
前端页面合并列
weixin_38324739的博客
04-09 694
html代码 <div class="container" style="margin-top: 10px"> <div class="row"> <div > <table class="table center_table table-hover"> <thea...
web前端——第一个页面
xishaoguo的博客
02-25 8828
我们在电脑桌面上右键——新建——文本文档，名字随便起，将后缀名改成html以后就创建好了一个空白页面。双击就可以用浏览器打开。但是严格上来说，这并不能算是一个页面。因为，标准的页面要写成:&lt;html&gt;&lt;head&gt;&lt;title&gt;网页面名字&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/htm
电商前端页面
12-23
在电商领域，前端页面是至关重要的，因为它直接影响到用户的购物体验和网站的转化率。一个优秀的电商前端页面设计，不仅需要美观，还需要高效、易用和功能完备。下面，我们将详细探讨电商前端页面的设计原则、常见...
前端页面增删改实现
12-21
【前端页面增删改实现】是指在Web应用中，前端用户界面与后台数据库进行交互时，实现对数据的增加（Add）、删除（Delete）和修改（Modify）功能。这一过程通常涉及HTML表单、JavaScript验证、Ajax异步通信以及服务器...
好看的前端页面效果合集
04-07
本合集“好看的前端页面效果合集”聚焦于前端设计的艺术性和实用性，旨在为开发者提供一系列美观且引人入胜的页面效果示例。 前端页面效果不仅仅是关于颜色和布局，它涵盖了多个方面，包括但不限于： 1. **响应式...
index_前端页面_
10-01
【前端页面设计与实现】 前端页面是用户与网站或应用程序交互的首要界面，它决定了用户的首印象和使用体验。在本项目中，我们关注的是一个名为"index"的前端登陆页面，这通常是指网站的主入口或者登录入口。在这个...
前端页面酒店
03-08
在构建“前端页面酒店”项目时，我们关注的是如何为用户提供优质的在线预订和浏览酒店的体验。前端页面作为用户与应用程序交互的界面，其设计和功能实现至关重要。在这个专题中，我们将深入探讨前端开发在酒店行业的...
前端页面开发
qq_45859377的博客
04-22 7559
前言 因为现如今的开发大部分都是前后端分离的开发，而这篇文章将主要讲的是前后端接口的对接过程。 一、前端的搭建 1、模板的引入 我这次项目引用的模板为vue-element-admi，这是一个基于vue-element-admin的一套后台管理系统基础模板。我将在这个模板的基础上进行二次开发。 GitHub地址：https://github.com/PanJiaChen/vue-element-admin 项目在线预览：https://panjiachen.gitee.io/vue-element-admi
如何做出美观高大上的前端页面
pengxiang1998的博客
08-14 3万+
博主在参加比赛时曾经开发过一款app软件，由于安卓学的不是太好便采用了封装H5页面的方式，由于比赛限制，无法使用太多的他人编写的现有框架，故而只能自己来做，由于工程浩大，完成不易，为制作出较为高大上的前端界面，便使用PS来完成。 以下是制作步骤： 首先利用PS制作出页面（这种方法的难点即在于利用PS制作出一个好看的界面） 点击切片工具 将需要制作输入框，按钮，超链接的地方抠出：如图 点击文件...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1135
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 170
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 154
【代码】vue el-select的下拉树形结构。
vscode实现前端页面
04-24
VScode是一款功能强大的文本编辑器，它可以用于实现前端页面的开发。下面是使用VScode实现前端页面的步骤： 1. 创建HTML文件：在VScode中创建一个新的HTML文件，可以通过点击菜单栏的"文件"->"新建文件"，然后将文件保存为.html格式。 2. 编写HTML代码：在HTML文件中编写前端页面的代码，包括HTML标签、CSS样式和JavaScript脚本等。 3. 预览页面：在VScode中，可以通过点击右上角的"预览"按钮来预览页面效果。也可以使用插件如"Live Server"来实时预览页面。 4. 调试页面：VScode提供了强大的调试功能，可以帮助我们调试前端页面的JavaScript代码。可以通过设置断点、监视变量等方式进行调试。 5. 保存和导出页面：在完成页面的编写后，可以通过点击菜单栏的"文件"->"保存"来保存页面。如果需要导出页面，可以点击菜单栏的"文件"->"导出为HTML"来导出为独立的HTML文件。 这是使用VScode实现前端页面的基本步骤。通过VScode的丰富功能和插件支持，可以更高效地进行前端页面的开发和调试。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值