最近开始学习web前端，前端主要包括html、css、javascript，前端入门相对来说不是太难，当然想要学得很精通还是有一定难度的，至少对于刚刚接触这方面知识的我来说，还是比较掉头发的（开个小玩笑啦），下面是我做的一个小案例，比较简单和常见的登录页面，不足之处，希望各位大佬指点指点！
首先让我们来看看页面效果：
1.初始页面
2.点击肤***r>
3.点击更多肤***r>
4.选择改变肤***r>
5.点击头像：
6.选择改变头像：
7.点击注册：
8.输入错误时：
9.输入正确时：
10.注册时选择头像：
11.点击登录：
12.输入账号：
13.全部效果：
当当当~~，重头戏来了，让我们来品一品代码吧：
- html 部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<div class="a1">
<p class="c1">肤色</p>
<p class="c2">登录</p>
<p class="c3">注册</p>
<p class="c4"></p>
<p class="c10">头像</p>
</div><div class="a2">
<ul type="none" class="b1">
<li><img src="img/01b6171bbcc648152c29c9e65bc3272c.jpeg"/></li>
<li><img src="img/06e451385e2f98ffce8d068ad6eb28f0.jpeg"/></li>
<li><img src="img/0d318058a6cce711c66990902a74d224.jpeg"/></li>
<li><img src="img/8700bda0c35f15debb18aa6c6f1fde83.jpeg"/></li>
<li><img src="img/bc86df028aa8a3f7889fadaa210dadf2.jpeg"/></li>
<li><img src="img/f9f66668defb0f5db5aeef1736f72039.jpeg"/></li>
<li><img src="img/654b04ab2b8a4125096dce1c0c318c60.jpeg"/></li>
<li><img src="img/9a705fdd0311367e40a51bddd282e922.jpeg"/></li>
</ul>
<ul type="none" class="bb1">
<li><img src="img/6d51647120d9e32dab56b2f21b3367ba.jpeg"/></li>
<li><img src="img/78ed149ea24e297214aacab64d436880.jpeg"/></li>
<li><img src="img/1b21b30143822499a7c2e7086546a91b.png"/></li>
<li><img src="img/8b665991021f43a9bf79d3831661b1bc.jpg"/></li>
<li><img src="img/3a4fe07b9e3a904169c0dfe2ed08fa36.jpg"/></li>
<li><img src="img/907c1d33c81b4a6f76a3ddd8050f746c.jpeg"/></li>
<li><img src="img/28281bed2e55336685a1194befd8ab0b.jpg"/></li>
<li><img src="img/89f90de94475bd9842641447dd50a90a.jpeg"/></li>
</ul>
<div class="b2">
<p>肤色</p>
</div>
<a>x</a>
<div class="bb2">
<p>更多肤色</p>
</div>
</div> <div class="a3">
<div class="b3">
<p>登录</p>
</div>
<div class="b4">
<form method="post">
<input value="手机/身份证号/邮件" type="text"/>
</form>
</div>
<div class="b5">
<form method="post">
<input type="text" value="密码"/>
</form>
</div>
<div class="b6">
<form method="post">
<input type="checkbox" value="记住密码"/>
<p>记住密码</p>
</form>
</div>
<div class="b7">
<form method="post">
<input type="submit" value="登 录"/>
</form>
</div>
<div class="b8">
<a href="">微信登录</a>
<a href="">QQ登录</a>
</div>
<div class="b9"></div>
<a class="c5">x</a>
</div><div class="a4">
<div class="b10">
<p>注册</p>
</div>
<div class="b11">
<form method="post">
<input type="text" value="请输入账号"/><br />
</form>
</div>
<div class="b12">
<form method="post">
<input type="text" value="请输入密码5~10位" maxlength="10" /><br />
</form>
<div class="c6">
<p class="d1"></p>
<p class="d2"></p>
</div>
</div>
<div class="b13">
<form method="post">
<input type="text" value="再次输入密码" maxlength="10" />
</form>
<div class="c7">
<p class="d3"></p>
<p class="d4"></p>
</div>
</div>
<div class="b14">
<form method="post">
<input type="text" value="请输入邮件"/>
</form>
</div>
<div class="b15">
<form method="post">
<input type="submit" value="注 册"/>
</form>
</div>
<div class="b16">
</div>
<a>x</a>
<div class="b17">
<p>头像</p>
</div>
</div><div class="a5">
<ul type="none" class="c8">
<li><img src="img/aa298c7dcd1615cb1c920a2285fce3a03.jpg"/></li>
<li><img src="img/16c3a7d00953916604f843715ef5d2f1.jpg"/></li>
<li><img src="img/26fe2fb3a238372e7aa1d159fdec1eff.jpg"/></li>
<li><img src="img/2f6cadfd5e3994da03e7025f79b4434f.jpg"/></li>
<li><img src="img/eff2631d482bb2a9ec0d38f25824b0e9.jpg"/></li>
<li><img src="img/f47c94d16e199c9ee1dbbcbe2176a957.jpg"/></li>
</ul>
<div class="c9">
<p>x</p>
</div>
</div>- css 部分：
<style type="text/css" class="a"> body{
width: 1280px;
margin: 0px;
padding: 0px;
background-image: url(img/01b6171bbcc648152c29c9e65bc3272c.jpeg);
}
.a1{
width: 1280px;
height: 56px;
background: rgba(0,0,0,0.2);
position: relative;
bottom: 14px;
}
.a1 p{
width: 40px;
height: 30px;
font-size: 14px;
color: pink;
text-align: center;
line-height: 30px;
}
.a1 .c4{
width: 50px;
height: 50px;
background-color: blue;
position: relative;
left: 610px;
bottom: 128px;
border-radius: 50%;
background-image: url(img/aa298c7dcd1615cb1c920a2285fce3a03.jpg);
}
.a2{
width: 300px;
height: 480px;
position: absolute;
top: 106px;
left: 70px;
background: rgba(0,0,0,0.5);
border-radius: 7px;
display: none;
}
.a2 img{
width: 125px;
height: 100px;
margin-left: 5px;
margin-bottom: 5px;
float: left;
}
.a2 a{
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid white;
float: left;
font-size: 18px;
color: white;
text-align: center;
line-height: 15px;
position: absolute;
left: 268px;
top: 10px;
}
.a3{
width: 300px;
height: 480px;
position: absolute;
left: 885px;
top: 105px;
background: rgba(0,0,0,0.5);
border-radius: 7px;
display: none;
}
.a4{
width: 300px;
height: 480px;
position: absolute;
top: 106px;
left: 475px;
background: rgba(0,0,0,0.5);
border-radius: 7px;
display: none;
}
.a4 a{
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid white;
float: left;
font-size: 18px;
color: white;
text-align: center;
line-height: 15px;
position: absolute;
left: 268px;
top: 10px;
}
.a5{
width: 400px;
height: 50px;
position: absolute;
left: 455px;
top: 55px;
display: none;
}
</style> <style type="text/css" class="b"> .b1{
position: relative;
right: 22px;
top: 40px;
display: block;
}
.bb1{
width: 260px;
height: 28px;
position: absolute;
right: 22px;
bottom: 380px;
display: none;
float: left;
}
.b2{
width: 300px;
height: 40px;
position: absolute;
top: 7px;
}
.b2 p{
font-size: 24px;
position: absolute;
top: -15px;
left: 125px;
color: #CCCCCC;
}
.bb2 p{
font-size: 13px;
color: #CCCCCC;
position: absolute;
left: 25px;
top: 23px;
}
.b3{
width: 300px;
height: 30px;
position: relative;
top: 10px;
}
.b3 p{
font-size: 24px;
position: absolute;
top: -15px;
left: 125px;
color: #CCCCCC;
}
.b4{
width: 300px;
height: 40px;
position: relative;
top: 40px;
}
.b4 input{
position: absolute;
bottom: 5px;
}
.b5 input{
position: absolute;
top: 115px;
}
.b4 input,.b5 input{
width: 180px;
height: 36px;
border: 1px solid rgba(0,0,0,0.2);
color: #CCCCCC;
font-size: 12px;
position: absolute;
left: 60px;
background: rgba(0,0,0,0.2);
}
.b6 input{
position: absolute;
top: 168px;
left: 58px;
}
.b6 p{
font-size: 11px;
position: absolute;
top: 159px;
left: 78px;
color: white;
}
.b7 input{
width: 175px;
height: 35px;
position: absolute;
left: 64px;
top: 208px;
font-size: 18px;
background-color: #4591f5;
border: 1px solid #4591f5;
color: white;
}
.b8{
width: 230px;
height: 65px;
border: 1px solid rgba(0,0,0,0.2);
border-top: 1px dashed #CCCCCC;
border-bottom: 1px dashed #CCCCCC;
position: absolute;
left: 35px;
top: 267px;
text-align: center;
line-height: 65px;
}
.b8 a{
font-size: 15px;
padding: 25px;
text-decoration: none;
color: #CCCCCC;
}
.b9{
width: 230px;
height: 100px;
position: absolute;
left: 36px;
top: 355px;
background-image: url(img/6e30cebda34491547182abe352b2d9f5.jpg);
}
.b10 p{
position: absolute;
top: -5px;
left: 125px;
font-size: 24px;
color: #CCCCCC;
}
.b11{
position: absolute;
top: 68px;
}
.b12{
position: absolute;
top: 116px;
}
.b13{
position: absolute;
top: 163px;
}
.b14{
position: absolute;
top: 210px;
}
.b11,.b12,.b13,.b14{
width: 300px;
height: 36px;
}
.b11 input,.b12 input,.b13 input,.b14 input{
width: 180px;
height: 36px;
border: 1px solid rgba(0,0,0,0.2);
color:#CCCCCC;
font-size: 12px;
position: absolute;
left: 60px;
margin-bottom: 1px;
background:rgba(0,0,0,0.2);
}
.b15 input{
width: 175px;
height: 35px;
position: absolute;
left: 65px;
top: 275px;
font-size: 18px;
background-color: #4591f5;
border: 1px solid #4591f5;
color: white;
}
.b16{
width: 140px;
height: 140px;
position: absolute;
left: 80px;
top: 335px;
background-image: url(img/无标题4.png);
}
.b17 p{
font-size: 13px;
color: #CCCCCC;
position: absolute;
left: 25px;
top: 23px;
}
</style> <style type="text/css" class="c"> .c1{
position: relative;
left: 515px;
top: 12px;
}
.c2{
position: relative;
left: 715px;
bottom: 32px;
}
.c3{
position: relative;
left: 670px;
bottom: 76px;
}
.c5{
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid white;
float: left;
font-size: 18px;
color: white;
text-align: center;
line-height: 15px;
position: absolute;
left: 268px;
top: 10px;
}
.c6{
position: absolute;
left: 255px;
top: 8px;
display: none;
}
.c7{
position: absolute;
left: 255px;
top: 8px;
display: none;
}
.c6,.c7{
width: 22px;
height: 22px;
background-color: white;
border-radius: 50%;
}
.c8 img{
width: 50px;
height: 50px;
position: relative;
right: 45px;
bottom: 16px;
border-radius: 50%;
float: left;
margin-left: 7px;
}
.c9{
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid white;
float: left;
font-size: 18px;
color: white;
position: absolute;
left: 343px;
bottom: 35px;
}
.c9 p{
position: absolute;
left: 6px;
bottom: -17px;
}
.c10{
position: relative;
left: 560px;
bottom: 184px;
}
</style><style type="text/css" class="d"> .d1,.d3{
background-image: url(img/无标题5.png);
}
.d2,.d4{
background-image: url(img/无标题6.png);
}
.d1,.d2,.d3,.d4{
width: 15px;
height: 15px;
position: absolute;
bottom: -12px;
left: 3px;
display: none;
}
</style>- js 部分：
<script>
var back = document.querySelector('.a1'); back.onmouseover = function(){
back.style.backgroundColor = 'rgba(0,0,0,0.4)';
}
back.onmouseout = function(){
back.style.backgroundColor = 'rgba(0,0,0,0.2)';
}
</script><script>
var p = document.querySelector('.a1').querySelectorAll('p');
for(var i=0;i<p.length;i++){
p[i].onmouseover = function(){
this.style.backgroundColor = 'pink';
this.style.color = 'rgba(0,0,0,0.4)';
this.style.cursor = 'pointer';
}
p[i].onmouseout = function(){
this.style.backgroundColor = '';
this.style.color = 'pink';
this.style.cursor = 'default';
}
}
</script><script>
var p2 = document.querySelector('.c2');
var into = document.querySelector('.a3');
var a = document.querySelector('.c5');
var flag1 = 0; p2.onclick = function(){
if(flag1 === 0){
into.style.display = 'block';
flag1 = 1;
}
}
a.onclick = function(){
if(flag1 === 1){
into.style.display = 'none';
flag1 = 0;
}
}
a.onmouseover = function(){
this.style.cursor = 'pointer';
}
a.onmouseout = function(){
this.style.cursor = 'default';
}
</script><script>
var p = document.querySelector('.c1');
var img = document.querySelector('.a2').querySelectorAll('img');
var a2 = document.querySelector('.a2');
var a = document.querySelector('.a2').querySelector('a');
var body = document.querySelector('body');
var ye = document.querySelector('.bb2').querySelector('p');
var b1 = document.querySelector('.b1');
var bb1 = document.querySelector('.bb1');
var flag = 0;
var c = 0; p.onclick = function(){
if(flag === 0){
a2.style.display = 'block';
flag = 1;
}
}
a.onclick = function(){
if(flag === 1){
a2.style.display = 'none';
flag = 0;
}
}
a.onmouseover = function(){
this.style.cursor = 'pointer';
}
a.onmouseout = function(){
this.style.cursor = 'default';
}
for(var i=0; i < img.length; i++){
img[i].onclick = function(){
body.style.backgroundImage = 'url('+ this.src +')';
}
img[i].onmouseover = function(){
this.style.cursor = 'pointer';
}
img[i].onmouseout = function(){
this.style.cursor = 'default';
}
}
ye.onmouseover = function(){
this.style.cursor = 'pointer';
this.style.textDecoration = 'block';
}
ye.onmouseout = function(){
this.style.cursor = 'default';
this.style.textDecoration = 'none';
}
ye.onclick = function(){
if(c === 0){
bb1.style.display = 'block';
b1.style.display = 'none';
c = 1;
}
else{
b1.style.display = 'block';
bb1.style.display = 'none';
c = 0;
}
}
</script><script>
var text = document.querySelector('.b4').querySelector('input');
var pwd = document.querySelector('.b5').querySelector('input'); text.onfocus = function(){
if(text.value === '手机/身份证号/邮件'){
this.value = '';
text.style.color = '#FFFFFF';
}
}
text.onblur = function(){
if(text.value === ''){
this.value = '手机/身份证号/邮件';
text.style.color = '#CCCCCC';
}
}
pwd.onfocus = function(){
if(pwd.value === '密码'){
this.value = '';
pwd.type = 'password';
pwd.style.color = '#FFFFFF';
}
}
pwd.onblur = function(){
if(pwd.value === ''){
this.value = '密码';
pwd.type = 'text';
pwd.style.color = '#CCCCCC';
}
}
</script><script>
var b11 = document.querySelector('.b11').querySelector('input');
var b12 = document.querySelector('.b12').querySelector('input');
var b13 = document.querySelector('.b13').querySelector('input');
var b14 = document.querySelector('.b14').querySelector('input');
var c6 = document.querySelector('.c6');
var d1 = document.querySelector('.d1');
var d2 = document.querySelector('.d2');
var c7 = document.querySelector('.c7');
var d3 = document.querySelector('.d3');
var d4 = document.querySelector('.d4'); b11.onfocus = function(){
if(b11.value === '请输入账号'){
this.value = '';
this.style.color = '#FFFFFF';
}
}
b11.onblur = function(){
if(b11.value === ''){
this.value = '请输入账号';
this.style.color = '#cccccc';
}
}
b12.onfocus = function(){
if(b12.value === '请输入密码5~10位'){
this.value = '';
this.style.color = '#FFFFFF';
this.type = 'password';
c6.style.display = 'none';
d1.style.display = 'none';
d2.style.display = 'none';
}
}
b12.onblur = function(){
if(b12.value.length < 5){
c6.style.display = 'block';
d1.style.display = 'none';
d2.style.display = 'block';
}
else{
c6.style.display = 'block';
d1.style.display = 'block';
d2.style.display = 'none';
}
if(b12.value === ''){
this.value = '请输入密码5~10位';
this.style.color = '#cccccc';
this.type = 'text';
}
}
b13.onfocus = function(){
if(b13.value === '再次输入密码'){
this.value = '';
this.style.color = '#FFFFFF';
this.type = 'password';
c7.style.display = 'none';
d3.style.display = 'none';
d4.style.display = 'none';
}
}
b13.onblur = function(){
if(b13.value === ''){
this.value = '再次输入密码';
this.style.color = '#cccccc';
this.type = 'text';
}
if(b13.value != b12.value ){
c7.style.display = 'block';
d3.style.display = 'none';
d4.style.display = 'block';
}
else{
c7.style.display = 'block';
d3.style.display = 'block';
d4.style.display = 'none';
}
}
b14.onfocus = function(){
if(b14.value === '请输入邮件'){
this.value = '';
this.style.color = '#FFFFFF';
}
}
b14.onblur = function(){
if(b14.value === ''){
this.value = '请输入邮件';
this.style.color = '#cccccc';
}
}
</script><script>
var c3 = document.querySelector('.c3');
var to = document.querySelector('.a4');
var a = document.querySelector('.a4').querySelector('a');
var flag2 = 0; c3.onclick = function(){
if(flag2 === 0){
to.style.display = 'block';
flag2 = 1;
}
}
a.onclick = function(){
if(flag2 === 1){
to.style.display = 'none';
flag2 = 0;
}
}
a.onmouseover = function(){
this.style.cursor = 'pointer';
}
a.onmouseout = function(){
this.style.cursor = 'default';
}
</script> <script>
var backimg = document.querySelector('.c8').querySelectorAll('img');
var c4 = document.querySelector('.a1').querySelector('.c4');
var c10 = document.querySelector('.a1').querySelector('.c10');
var b17 = document.querySelector('.b17').querySelector('p');
var c9 = document.querySelector('.c9').querySelector('p');
var a5 = document.querySelector('.a5'); c4.onclick = function(){
a5.style.display = 'block';
}
c10.onclick = function(){
a5.style.display = 'block';
}
b17.onclick = function(){
a5.style.display = 'block';
}
c9.onclick = function(){
a5.style.display = 'none';
}
b17.onmouseover = function(){
this.style.cursor = 'pointer';
}
b17.onmouseout = function(){
this.style.cursor = 'default';
}
c9.onmouseover = function(){
this.style.cursor = 'pointer';
}
c9.onmouseout = function(){
this.style.cursor = 'default';
}
for(var i = 0;i<backimg.length;i++){
backimg[i].onclick = function(){
c4.style.backgroundImage = 'url('+ this.src +')'
}
backimg[i].onmouseover = function(){
this.style.cursor = 'pointer';
}
backimg[i].onmouseout = function(){
this.style.cursor = 'default';
}
}
</script>代码到此就全部结束啦，如果你还不过瘾的话，我这有小小的推荐：
C语言案例系列：
C语言小案例：学生管理系统1.0版
C语言小案例：登录界面
撕烂数据爆锤算法系列：
撕烂数据爆锤算法：单链表
撕烂数据爆锤算法：循环链表
感谢您的支持！
同是天涯码字猿
共勉 共勉 ~ ~
京公网安备 11010502036488号