闲来无事，就根据知乎的首页，参考了一些资料模拟写了下，包含了动态的背景，以及登录和注册功能

登录这里使用的是spring security

注册是ajax发送的

具体代码很简单，一看就知道，包含了数据的检查等

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
 
 
 
 
 
 
 
body{padding: 0;margin: 0;background: #F7FAFC;} 
a{text-decoration: none;} 
.index-box{width:300px;height: auto;margin:0 auto;margin-top: 40px;} 
.logo{background:url(images/header/headerNew4.png) no-repeat;;width: 350px;height: 100px;margin:0 auto} 
.title{font-size: 18px;text-align: center;color: #707171;font-weight: bold;margin: 30px auto;} 
.index-body{text-align: center;} 
.nav-sliders{position: relative;display: inline-block;margin-bottom: 20px;} 
.nav-sliders>a{font-size: 20px;display: inline-block;width:60px ;font-family: "微软雅黑";color: #999;cursor: pointer;float: left;$width} 
.nav-sliders>a.active{color: #0f88eb;} 
.nav-sliders>span{position: absolute;height: 2px;background:#0f88eb;display:block;left: 5px;width: 50px;bottom:-8px;} 
.stage{position:absolute;left:0;top:0;width:100%;height:100%;background:#F7FAFC;} 
.login-box{width: 300px;} 
.wrap{border:1px solid #d5d5d5;border-radius: 5px;background: #fff;} 
.wrap>div{position: relative;overflow: hidden;} 
.wrap>div>input{width: 95%;border:none;padding:17px 2.5%;border-radius: 5px;} 
.wrap>div>label.error{position: absolute;color: #c33;top: 0;line-height: 50px;transform: translate(25px,0);transition: all 0.5s ease-out;-webkit-transform: translate(25px,0);-moz-transform: translate(25px,0);opacity: 0;visibility:hidden;cursor: text;} 
.wrap>div>label.move{transform: translate(0,0);transition: all 0.5s ease-out;-webkit-transform: translate(0,0);-moz-transform: translate(0,0);opacity: 1;visibility: visible;} 
.password{border-top: solid 1px #d5d5d5 ;} 
.code{right:115px ;} 
.name{right:5px ;} 
.loginName{right:5px ;} 
.loginPass{right:5px ;} 
.pass{right:5px ;} 
.passagain{right:5px ;} 
.button{height: 40px;background:#0f88eb;text-align: center;line-height: 40px;border-radius: 5px;margin-top: 25px;color: #fff;font-family: "微软雅黑";cursor: pointer;} 
.remember{text-align: left;margin-top: 20px;font-family: "微软雅黑";color: #666666;} 
.remember>a{float:right;cursor: pointer;color: #666666;} 
.other{text-align: left;margin-top: 20px;font-family: "微软雅黑";color: #666666;overflow: hidden;} 
.other>span{font-size: 14px;float: left;margin-top: 2px;cursor: pointer;} 
.other>div{float: left; transition: all 1s ease-in;-webkit-transition: all 0.3s ease-in;opacity: 0;transform: translateX(-20px);-webkit-transform: translateX(-18px);-moz-transform: translateX(-18px);visibility: hidden;} 
.other>div>a{margin-left: 20px;color: #666666;font-size: 15px;} 
.other>.hidden{ transition: all 1s ease-in;display: block;-webkit-transition: all 0.3s ease-in;opacity: 1;transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);visibility: visible;} 
.download{border:solid 1px #0f88eb;height: 40px;line-height: 40px;border-radius: 5px;color:#0f88eb ;font-family: "微软雅黑";margin-top: 50px;cursor: pointer;position: relative;} 
.download>.close{display: none;} 
.download .pic{display:none;position: absolute;background: #fff;bottom: 78px;width: 310px;left: -10px;z-index: 5;padding: 40px 0;border-radius: 8px;box-shadow: 0 0 8px 0 rgba(0,0,0,.15);} 
.registered-box{width: 300px; display: none;} 
.text{font-size: 14px;margin-top: 20px;font-family: "微软雅黑";color: #666666;} 
.text>a{color: #0f88eb;} 
.verification-code{position: absolute;right:22px;top: 14px;font-family: "微软雅黑";font-size: 18px;cursor: pointer;} 
#register:hover{opacity: 0.7;} 
#login:hover{opacity: 0.7;} 
 
 
 
 
 
 
Speed4C开发平台 
 
 
 
登录 
注册 
 
 
 
 
 
 
 
社交账号登录 
 
扣扣 
微信 
微博 
 
 
 
${sessionScope.SPRING_SECURITY_LAST_EXCEPTION.message} 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

以上所述是小编给大家介绍的JavaWeb开发之模仿知乎首页完整代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！