体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

老师，有两个问题，请帮忙解答以下，谢谢。

来源：5-2 作业题

aleeeeex

2018-11-07 09:39:36

1.为什么我注册界面的验证码和验证码的输入框没有对齐？

2.为什么验证码输入框底下的提示信息超出了.verifyCode这个div?

以下是代码

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>幕淘网</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<!--顶部-->
<div class="top">
<!--顶部的左边-->
<div class="topLeft">
<p class="login">亲，请登录</p>
<p class="register">免费注册</p>
<p class="phone">手机逛幕淘</p>
</div>
    <!--弹出层遮罩-->
    <div id="layer-mask" class="layer-mask"></div>
    <!--弹出层窗体-->
    <div id="layer-top" class="layer-top">
     <!--弹出层窗体的关闭按钮-->
     <div class="layer-close">×</div>
     <!--弹出层窗体的内容-->
     <div  ld="layer-content" class="layer-content">
     <div class="layer-title">
     <div class="login-btn">登录</div>
         <div class="register-btn">注册</div>
         <div class="clear"></div>
     </div>
     <!-- 登录界面内容 -->
     <div class="layer-main">
     <div class="login-main">
     <div class="item">
     <input id="username" class="input" type="text" name="username" placeholder="  请输入登录邮箱或手机号">
     <p class="error-msg"></p>
     </div>
     <div class="item">
     <input id="password" class="input" type="password" name="password" placeholder="  6-16位密码，区分大小写，不能使用空格">
     <p class="error-msg2"></p>
     </div>
     <div class="item">
     <input type="checkbox" name="checkbox" class="checkbox">
     <span>下次自动登录</span>
     <a href="#">忘记密码</a>
     </div>
     <div class="item">
     <input class="submit" type="submit" name="submit" value="登录">
     </div>
     <div class="item icon">
         <img src="images/icon/QQ.png">
     <img src="images/icon/xinlang.png">
     <img src="images/icon/weixin.png">
     </div>
     </div>
     <!-- 注册界面内容 -->
     <div class="register-main">
     <div class="item2">
     <input id="username2" type="text" name="username2" placeholder="  请输入注册邮箱或手机号">
     <p class="error-msg3"></p>
     </div>
     <div class="item2 verifyCode">
     <input id="vcode" type="text" name="vcode" placeholder="  请输入验证码">
     <img src="images/verify.png" alt="">
     <p class="error-msg4"></p>
     </div>
     <div class="item2">
     <input class="submit2" type="submit" value="注册">
     </div>
     <div class="icon">
         <img src="images/icon/QQ.png">
     <img src="images/icon/xinlang.png">
     <img src="images/icon/weixin.png">
     </div>
     </div>
     </div>
<!--顶部的右边-->
<div class="topRight">
<ul>
<li>我的慕淘<img src="images/icon/21.png"></li>
<li>收藏夹<img src="images/icon/21.png"></li>
<li>商品分类<img src="images/icon/21.png"></li>
<li>卖家中心<img src="images/icon/21.png"></li>
<li>联系客服<img src="images/icon/21.png"></li>
</ul>
</div>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<!--插入js文件-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="js.js"></script>
</body>
</html>

css:

*{
	padding: 0;
	margin:0;
}
li{
	text-decoration: none;
	list-style: none;
}
a{
	text-decoration: none;
	color:grey;
}
body{
	width: 1000px;
	margin:0 auto;
	
}

.top{
	width: 100%;
	border-bottom: 1px solid grey;
	font-size: 12px;
	color:grey;
	overflow: hidden;
}
.topLeft{
	float: left;
}
.login,.register,.phone{
	float: left;
	margin-left: 20px;
	padding: 12px 0px;
	line-height: 20px;
	cursor: pointer;
}
.login{
	color:red;
}
.topRight{
	float:right;
}
.topRight li{
float: left;
margin-right: 10px;
padding: 12px 0px;
line-height: 20px;
cursor: pointer;
}
.topRight li img{
	width: 10px;
	height:10px;
	margin-left: 5px;
}
/*弹出层遮罩*/
.layer-mask{
	z-index: 99999;
	position: fixed;
	top: 0;
	left: 0;
	width:100%;
	height: 100%;
	background-color: #000;
	opacity: 0.5;
	display: none;
}
/*弹出层窗体*/
.layer-top{
	z-index: 100000;
	position:fixed;
	left: 0;
	right:0;
	top:0;
	bottom: 0;
	margin:auto;
	width: 400px;
	height: 350px;
	background-color: #fff;
	display: none;
}
.layer-close{
	float: right;
	width:20px;
	height: 20px;
	border: 2px solid #fff;
	background: #eee;
	line-height: 20px;
	text-align: center;
	position: absolute;
	border-radius: 50%;
	top:-10px;
	right: -10px;
}
.layer-close:hover{
	cursor: pointer;
	color:#fff;
	background: #ccc; 
}
/*编写弹出层的登录和注册的css样式*/
.login-btn,.register-btn{
	width:40px;
	height:40px;
	float: left;
	text-align: center;
	line-height: 40px;;
	cursor:pointer;
	font-size: 16px;
	padding-top:20px;
	padding-left: 30px;
}

.clear{
	clear: both;
}
.login-btn:hover{
	color:red;
}
.register-btn:hover{
    color:red;
}
/*编写弹出层的登录内容样式*/
.login-main{
	/*display: none;*/
}
.item{
	margin:20px auto;
	width:350px;
}
#username,#password{
	width: 350px;
	height: 30px;
	border: 1px solid #ccc;
	border-radius: 2px;
}
.item a{
	margin-left: 208px;
}
 .submit{
	background: #e40;
	width:250px;
	height:30px;
	border-radius: 5px;
	color:#fff;
	margin-left:43px;
	cursor: pointer;
}
.icon{
	text-align: center;
}
.icon img{
	cursor: pointer;
	background:grey;
	margin: 10px;
	border-radius: 50%;
}
/*编写弹出层注册内容样式*/
.register-main{
	display: none;
}
.item2{
	margin: 20px auto;
	width: 350px;
}
#username2{
	width: 350px;
	height: 30px;
	border: 1px solid #ccc;
	border-radius: 2px;
}
#vcode{
	width:200px;
	height: 30px;
	border:1px solid #ccc;
	border-radius:2px;
}
.verifyCode img{
	width: 100px;
	height: 30px;
	margin-left: 44px;
}
.verifyCode{
	height: 30px;
}
 .submit2{
	background: #e40;
	width:250px;
	height:30px;
	border-radius: 5px;
	color:#fff;
	margin-left:43px;
	cursor: pointer;
}


/*.layer-login{
	margin:0 auto;
	width:300px;
	height: 50px;
	text-align:left;
	line-height: 50px;
	font-size: 18px;
}
.layer-login span{
	display:inline-block;
	margin-right: 20px;
}
.layer-login span:hover{
	border: 2px solid red;
	cursor: pointer;
	color:red;
}*/

jquery:

$(function(){
	//点击亲，请登录链接事件
	$('.login').click(function(){
	//点击登录把遮罩层以及登录窗体通过.show方法显示
    	$('#layer-mask').show();
    	$('#layer-top').show();
    	//调用登录界面显示函数
    	loginShow();
    	//点击弹出层上登录字样调用登录界面显示函数
    	$('.login-btn').click(function(){
    		loginShow();
    	});
    	//点击弹出层上注册字样调用注册界面显示函数
    	$('.register-btn').click(function(){
    		registerShow();
   		 });
    	//点击提交按钮判断用户输入是否已正确
    	$('.submit').click(function(){
    		var username=$('#username').val();
    		var password=$('#password').val();
    		if (username.length===11) {
    			return ture;
    		}
    		else{
    			$('.error-msg').html('请输入正确的手机号或邮箱账号');
    			$('.error-msg').css({color:"red"});
    		}
    		if(password.length==6){
    			return ture;
    		}
    		else{
    			$('.error-msg2').html('请输入正确的密码');
    			$('.error-msg2').css({color:"red"});
    		}
    	});
    		//点击注册按钮判断用户注册的账号和密码是否正确并作出提示
		$('.submit2').click(function(){
    		var username2=$('#username2').val();
    		var vcode=$('#vcode').val();
			//判断用户注册的账号和密码是否正确并作出提示
			if (username2.length===11) {
				return ture;
			}
			else{
				$('.error-msg3').html('请输入正确的手机号或邮箱账号');
				$('.error-msg3').css({color:"red"});
			}
			if (vcode==='GYyd') {
				return ture;
			}
			else{
				$('.error-msg4').html('请输入正确的验证码');
				$('.error-msg4').css({color:'red'});
			}
    	});
    	
    //点击关闭按钮，把遮罩层以及登录窗体隐藏
    $('.layer-close').click(function(){
    	$('#layer-mask').hide();
    	$('#layer-top').hide();
    	$('.error-msg2').html(' ');
    	$('.error-msg').html(' ');
    	$('#username').val('');
        $('#password').val('');
        $('.error-msg3').html(' ');
    	$('.error-msg4').html(' ');
    	$('#username2').val('');
        $('#vcode').val('');

    });

	});
    //点击免费注册链接事件
    $('.register').click(function(){
    	//点击登录把遮罩层以及登录窗体显示
    	$('#layer-mask').show();
    	$('#layer-top').show();
    	//调用注册界面显示函数
    	registerShow();
    	//点击弹出层上登录字样调用登录界面显示函数
    	$('.login-btn').click(function(){
    	loginShow();
    });
    	//点击弹出层上注册字样调用注册界面显示函数
    	$('.register-btn').click(function(){
    	registerShow();
    });
    	//点击关闭按钮，把遮罩层以及登录窗体隐藏
    	$('.layer-close').click(function(){
    	$('#layer-mask').hide();
    	$('#layer-top').hide();
    });
    })



    //定义弹出登录界面的函数
	function loginShow(){
        //然后把登录界面内容显示，把注册界面隐藏
        $('.login-main').show();
        $('.register-main').hide();
        $('.login-btn').css({'color':'red'});
        $('.register-btn').css({'color':'grey'})
	}
	//定义将弹出注册界面的函数
	function registerShow(){
        //把注册界面内容显示，把登录界面隐藏
        $('.login-main').hide();
        $('.register-main').show();
        $('.login-btn').css({'color':'grey'});
        $('.register-btn').css({'color':'red'});
	}

});


写回答

1回答

好帮手慕夭夭

2018-11-07

已采纳

你好同学 :

1.因为图片默认顶部与它的盒子对齐 ,如下:

http://img.mukewang.com/climg/5be255290001e7a506080132.jpg

所以验证码图片可以设置如下属性 ,使其垂直居中对齐 :

http://img.mukewang.com/climg/5be254950001647010070620.jpg

2.验证码输入框底下的提示信息超出了.verifyCode是因为verifyCode设置了固定高度 ,所以建议去掉如下高度 :

http://img.mukewang.com/climg/5be255d20001fb5102700111.jpg

完善一下吧 , 祝学习愉快 ,望采纳



0
hleeeeex
h 谢谢老师。
h018-11-07
共1条回复

0 学习 · 36712 问题

查看课程

相似问题

老师，烦请解答一下。谢谢

回答 1

请老师解答

回答 1

老师，服装鞋包中男装女装那里如何实现高度自适应？

回答 2

老师 帮忙看看

回答 4

老师又有问题了!

回答 3

打开慕课网App查看更多内容