前端小案例:登录页面

最近开始学习web前端,前端主要包括html、css、javascript,前端入门相对来说不是太难,当然想要学得很精通还是有一定难度的,至少对于刚刚接触这方面知识的我来说,还是比较掉头发的(开个小玩笑啦),下面是我做的一个小案例,比较简单和常见的登录页面,不足之处,希望各位大佬指点指点!

首先让我们来看看页面效果:
1.初始页面
前端小案例:登录页面_第1张图片
2.点击肤色:
前端小案例:登录页面_第2张图片
3.点击更多肤色:
前端小案例:登录页面_第3张图片
4.选择改变肤色:

5.点击头像:

6.选择改变头像:
前端小案例:登录页面_第4张图片
7.点击注册:
前端小案例:登录页面_第5张图片
8.输入错误时:
前端小案例:登录页面_第6张图片
9.输入正确时:
前端小案例:登录页面_第7张图片
10.注册时选择头像:

11.点击登录:

12.输入账号:

13.全部效果:

当当当~~,重头戏来了,让我们来品一品代码吧:

  1. html 部分:


 
  "utf-8">
  
 
 
 

  
"a1">

"c1">肤色

"c2">登录

"c3">注册

"c4">

"c10">头像

"a2">
    "none" class="b1">
  • "img/01b6171bbcc648152c29c9e65bc3272c.jpeg"/>
  • "img/06e451385e2f98ffce8d068ad6eb28f0.jpeg"/>
  • "img/0d318058a6cce711c66990902a74d224.jpeg"/>
  • "img/8700bda0c35f15debb18aa6c6f1fde83.jpeg"/>
  • "img/bc86df028aa8a3f7889fadaa210dadf2.jpeg"/>
  • "img/f9f66668defb0f5db5aeef1736f72039.jpeg"/>
  • "img/654b04ab2b8a4125096dce1c0c318c60.jpeg"/>
  • "img/9a705fdd0311367e40a51bddd282e922.jpeg"/>
    "none" class="bb1">
  • "img/6d51647120d9e32dab56b2f21b3367ba.jpeg"/>
  • "img/78ed149ea24e297214aacab64d436880.jpeg"/>
  • "img/1b21b30143822499a7c2e7086546a91b.png"/>
  • "img/8b665991021f43a9bf79d3831661b1bc.jpg"/>
  • "img/3a4fe07b9e3a904169c0dfe2ed08fa36.jpg"/>
  • "img/907c1d33c81b4a6f76a3ddd8050f746c.jpeg"/>
  • "img/28281bed2e55336685a1194befd8ab0b.jpg"/>
  • "img/89f90de94475bd9842641447dd50a90a.jpeg"/>
"b2">

肤色

x
"bb2">

更多肤色

"a3">
"b3">

登录

"b4">
"post"> "手机/身份证号/邮件" type="text"/>
"b5">
"post"> "text" value="密码"/>
"b6">
"post"> "checkbox" value="记住密码"/>

记住密码

"b7">
"post"> "submit" value="登 录"/>
"b9">
"c5">x
"a4">
"b10">

注册

"b11">
"post"> "text" value="请输入账号"/>
"b12">
"post"> "text" value="请输入密码5~10位" maxlength="10" />
"c6">

"d1">

"d2">

"b13">
"post"> "text" value="再次输入密码" maxlength="10" />
"c7">

"d3">

"d4">

"b14">
"post"> "text" value="请输入邮件"/>
"b15">
"post"> "submit" value="注 册"/>
"b16">
x
"b17">

头像

"a5">
    "none" class="c8">
  • "img/aa298c7dcd1615cb1c920a2285fce3a03.jpg"/>
  • "img/16c3a7d00953916604f843715ef5d2f1.jpg"/>
  • "img/26fe2fb3a238372e7aa1d159fdec1eff.jpg"/>
  • "img/2f6cadfd5e3994da03e7025f79b4434f.jpg"/>
  • "img/eff2631d482bb2a9ec0d38f25824b0e9.jpg"/>
  • "img/f47c94d16e199c9ee1dbbcbe2176a957.jpg"/>
"c9">

x

  1. css 部分:
  
  
  1. js 部分:
 
 

代码到此就全部结束啦,如果你还不过瘾的话,我这有小小的推荐:
C语言案例系列:
C语言小案例:学生管理系统1.0版
C语言小案例:登录界面
撕烂数据爆锤算法系列:
撕烂数据爆锤算法:单链表
撕烂数据爆锤算法:循环链表

感谢您的支持!
同是天涯码字猿
共勉 共勉 ~ ~

你可能感兴趣的:(前端,javascript,css,html)