自己对着知乎注册页面也模仿出了一个！！

看了知乎的注册页后，就模仿着做了一个出来，不喜勿喷

body{

background: url('../img/sign_bg.db29b0fbd2f78dd8c1b7.png') no-repeat fixed;

background-size: cover;

background-color: rgb(184,229,248);

}

.container{

position: absolute;

top: 50%;

left: 50%;

margin: -250px 0 0 -215px;

width: 430px;

height: 500px;

border: 1px solid transparent;

background: #ffffff;

border-radius: 3px;

}

.title>h1{

margin: 20px;

padding: 0;

text-align: center;

color: rgb(0,132,255);

font-size: 4em;

font-family: 'myfont';

}

.title>h2{

margin: 0;

padding: 0;

text-align: center;

color: rgb(0,132,255);

font-weight: 400;

}

@font-face{

font-family: 'myfont';

src: url('../font/jyx.ttf');

}

.input-group{

position: relative;

width: 350px;

height: 48px;

line-height: 48px;

border-bottom: 1px solid rgba(0,0,0,0.1);

margin-bottom: 20px;

}

.form-control{

/* 将输入框的所有外边距设置为40像素 */

margin:40px;

}

.preffix{

width: 100px;

color:rgba(0,0,0,0.5);

}

.preffix::after{

position: relative;

padding-left: 20px;

content: '|';

color: rgba(0,0,0,0.3);

}

.input-group>div{

float: left;

}

.input-phone{

width: 250px;

height: 100%;

}

.input-group input[type="text"]{

width: 100%;

border: 0;

padding: 0 5px;

outline: none;

}

::placeholder{

color: #948e8e;

}

.tips{

position: absolute;

right: 0;

top: 0;

}

.btn{

margin-top: 20px;

width: 100%;

height: 36px;

border-radius: 5px;

color: #ffffff;

background:rgb(0,132,255) ;

border: 0;

}

.links{

padding: 20px 0;

font-size: 14px;

color: rgba(0,0,0,0.5);

}

.links,.readme{

float: left;

}

.links,.ser-no{

float: right;

}

.quit-login{

position: absolute;

left: 0;

right: 0;

bottom: 0;

height: 59px;

text-align: center;

line-height: 59px;

background: rgb(246,246,246);

border: 1px solid rgb(235,235,235);

}

color: rgba(0,0,0,0.3);

}

a:hover{

color: rgba(16, 34, 235, 0.904);

}

上面是css代码，下面的是html

<!DOCTYPE html>

<head>

</head>

<body>

<h2>注册知乎，发现更大的世界</h2>

</div>

</div>

<a href="" class="tips">获取短信验证码</a>

</div>

<a href="">接收语音验证码</a>

<a href="">注册即代表同意《知乎协议》《隐私政策》</a>

</div>

<a href="" id="co">注册机构号</a>

</div>

已有账号？<a href="">登录</a>

</div>

</body>

</html>

自己对着知乎注册页面也模仿出了一个！！相关推荐

jsf登录注册页面_您将在下一个项目中使用JSF吗？
jsf登录注册页面上周有一篇很棒的stackoverflow博客文章,主题是" Javascript框架的残酷生命周期" . 这篇文章是关于Javascript UI框架(ang ...
输入手机号获取验证码的注册页面，说出测试过程
考察的点有两个,一个是对手机号格式和验证码格式的验证,一个是对验证码获取功能的验证. 基本原理:验证码1分钟内只能发一次,有效期10分钟.验证码是后台Java代码生成的,然后验证码生成时间和此验证码会 ...
使用html，css，javascript进行注册页面的实现
注册页面的实现功能实现一个用户注册页面实现表单校验功能效果图实现步骤 1) 创建Resign.html注册页面核心代码:  <div id=" ...
HTML+CSS制作知乎登录页面
HTML+CSS制作知乎登录页面由于没有用上js相关的技术,所以无法做出相应的功能,,只能做出知乎登录页面的用密码登录的界面,不能切换到免密码登录.相关界面的图片如下: 网页上的原图: 我做的: ...
java验证注册页面_Java使用正则表达式对注册页面进行验证功能实现
本文给大家介绍java使用正则表达式对注册页面进行验证的代码,代码如下所示: package regex; import java.util.Scanner; import java.util.reg ...
使用flask-WTF,Flask-Login，sqlite3实现登录和注册（前端登录和注册页面）
文章目录 1.文件结构: 2.实现效果: 3.使用的可视化工具(工具DB Browser for sqlite下载): 4.参考过的文章(一部分代码来自这里): 5.主文件.main.py: 6.前端 ...
注册页面所涉及的知识
注册页面所涉及的知识 string pwd1 = txtPassWord1.Text; string pwd2 = txtPassWord2.Text; if (pwd1 != pwd ...
php nodejs 前台,NodeJS之前端注册页面
本文主要给大家介绍了NodeJS之前端注册页面的相关知识,文中通过示例代码介绍的非常详细,对大家学习具有一定的参考学习价值,希望能帮助到大家. app.js文件为://应用程序的启动入口文件 //加载 ...
python flask框架发布问答平台注册页面_Python|Flask框架实现QQ账号登录
本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 前期准备因为注册QQ互联需要已备案的网站,所以需要准备一个已备案的网站与域名. 首先访问QQ互联平台 ...
javaweb 登陆注册页面
视图的数据修改,表中也修改引用工具类用<%@ page import=""%> <%@ page import="java.util.Date&quo ...

自己对着知乎注册页面也模仿出了一个！！

自己对着知乎注册页面也模仿出了一个！！相关推荐

最新文章

热门文章