自己對著知乎註冊頁面也模仿出了乙個!!

2021-08-25 02:28:58 字數 2501 閱讀 6586

看了知乎的 註冊頁後,就模仿著做了乙個出來, 不喜勿噴

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);

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

a:hover{

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

上面是css**,下面的是html

中國 +86

獲取簡訊驗證碼

接收語音驗證碼 註冊

註冊即代表同意《知乎協議》《隱私政策》

序號產生器構號

已有賬號?登入

vue註冊頁面

使用者註冊 left arrow click left dot 頁面的主體css樣式 login login head 新使用者註冊 p 手機號 class inp v model mobile right icon graphic 密碼框 placeholder 密碼 class inp v mo...

註冊頁面聯絡

收藏本站 a span span class action a href 登入 a a href 註冊 a a href 我的訂單 a a href vip 會員俱樂部 a a href 客戶服務 a span div div div class content div class box div ...

JS 製作註冊頁面

使用js製作註冊頁面,使用正規表示式驗證該資料是否符合要求 css頁面 body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd ulinput clear after box box h2 box form box form ul li box form ul li input b...