模仿知乎首页代码

最新推荐文章于 2022-07-06 23:14:02 发布

web小菜鸟ing

最新推荐文章于 2022-07-06 23:14:02 发布

阅读量5.9k

点赞数 5

分类专栏： Java Web原创教程文章标签：知乎首页 web HTML5 css5

本文链接：https://blog.csdn.net/wuhawang/article/details/53125898

版权

本文介绍了作者如何参照知乎首页，利用HTML5和CSS5技术进行页面模拟，包括动态背景的实现以及登录、注册功能的构建。登录部分采用Spring Security，注册功能通过Ajax异步发送，同时进行了数据验证。

摘要由CSDN通过智能技术生成

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

登录这里使用的是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+"/";
%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery/jquery.js"></script>
	<style>
		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;co