因先前一直在备考雅思，前不久刚刚告一段落，最近终于有时间把短学期内的工程内容捡起来完善。因为时隔已久不少技术性的内容遗忘情况还是挺重的。
近期主要优化完善了登录/注册页面的代码，添加了背景图片和一些细节上的改动，增加了返回主界面的按钮，修复了登录、注册两个功能块有时不能跳转的BUG，更改了使用的CSS样式并解决了有时样式不能正常显示等问题
下面附上代码
<login.jsp>
<head>
<base href="<%=basePath%>">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>注册与登录</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Themify Icons-->
<link rel="stylesheet" href="css/themify-icons.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/loginstyle.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="gtco-loader"></div>
<divid="page">
<divclass="page-inner">
<nav class="gtco-nav" role="navigation">
<div class="gtco-container">
<div class="row">
<div class="col-sm-4 col-xs-12">
<div id="gtco-logo"><a href="<%=basePath%>go/tohome">返回主页</a></div>
</div>
<div class="col-xs-8 text-right menu-1">
</div>
</div>
</div>
</nav>
<header id="gtco-header" class="gtco-cover" role="banner" style="background-image: url(images/loginpage.jpg)">
<div class="overlay"></div>
<div class="gtco-container">
<div class="row">
<div class="col-md-12 col-md-offset-0 text-left">
<div class="row row-mt-15em">
<div class="col-md-7 mt-text animate-box" data-animate-effect="fadeInUp">
<span class="intro-text-small"><h2>欢迎注册会员</h2></span>
<h1>成为会员享受多重服务</h1>
</div>
<div class="col-md-4 col-md-push-1 animate-box" data-animate-effect="fadeInRight">
<div class="form-wrap">
<div class="tab">
<ul class="tab-menu">
<li class="active gtco-first"><a href="#" data-tab="signup">注册</a></li>
<li class="gtco-second"><a href="#" data-tab="login">登录</a></li>
</ul>
<div class="tab-content">
<div class="tab-content-inner active" data-content="signup">
<form id="Login" action="<%=basePath%>go/register" autocomplete="on" method="post">
<div class="row form-group">
<div class="col-md-12">
<label for="username">用户名</label>
<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名" required="required"/>
<font color="red">${unameError }</font>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label for="password">密码</label>
<input type="password" class="form-control" name="pwd" id="pwd" placeholder="请输入密码" required="required"/>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<input type="submit" class="btn btn-primary" value="注册">
</div>
</div>
</form>
</div>
<div class="tab-content-inner" data-content="login" id="login">
<form action="<%=basePath%>go/login" autocomplete="on" method="post">
<div class="row form-group">
<div class="col-md-12">
<label for="username">用户名</label>
<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名" required="required"/>
<font color="red">${unameErr }</font>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label for="password">密码</label>
<input type="password" class="form-control" name="pwd" id="pwd" placeholder="请输入密码" required="required"/>
<font color="red">${pwdErr }</font>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<input type="submit" class="btn btn-primary" value="登录" >
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- countTo -->
<script src="js/jquery.countTo.js"></script>
<!-- Magnific Popup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<!-- Main -->
<script src="js/main.js"></script>
</body>
14万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
