4-10问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*鼠标移上去或者获得焦点、在此处填写代码*/
/*符合验证的label、在此处填写代码*/
/*不符合验证的label、在此处填写代码*/
.cont{
margin: 100px;
position: relative;
}
input{
width: 140px;
height: 20px;
line-height: 20px;
text-indent: 36px;
transition: all .3s;
outline: 0;
border-radius: 5px;
}
span.title{
height: 30px;
line-height: 30px;
position: absolute;
left: 2px;
top: -2px;
transition: all .3s;
}
input:focus,input:hover{
text-indent: 2px;
}
input:focus + span,input:hover + span{
transform: translateX(-120%);
}
input:invalid {
border: 1px solid red;
}
input:invalid~label:after {
content: "邮箱错误！";
}
input:valid {
border: 1px solid green;
}
input:valid~label:after {
content: "输入正确！";
}
</style>
</head>
<body>
<div class="cont">
<input type="email" id="email" required><label for="email"></label>
<span class="title">邮箱</span>
</div>
</body>
</html>老师，为什么我的span里面的“邮箱”两个字不会动呢
0
收起
正在回答 回答被采纳积分+1
4回答
qq_一个人一個人_0
2018-08-27 18:47:38
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>为什么span不会滑动</title>
<style type="text/css">
/*鼠标移上去或者获得焦点、在此处填写代码*/
/*符合验证的label、在此处填写代码*/
/*不符合验证的label、在此处填写代码*/
.cont{
margin: 100px;
position: relative;
}
input{
width: 140px;
height: 20px;
line-height: 20px;
text-indent: 36px;
transition: all .3s;
outline: 0;
border-radius: 5px;
}
span{
height: 30px;
line-hei: ;ght: 30px;
position: absolute;
left: 2px;
transition: all .3s;
}
input:focus,input:hover{
text-indent: 2px;
}
input:focus + span,input:hover + span{
transform: translateX(-120%);
}
input:invalid {
border: 1px solid red;
}
input:invalid~label:after {
content: "邮箱错误！";
}
input:valid {
border: 1px solid green;
}
input:valid~label:after {
content: "输入正确！";
}
</style>
</head>
<body>
<div class="cont">
<input type="email" id="email" required>
<span class="title">邮箱</span>
<label for="email"></label>
</div>
</body>
</html>但是老师，您看我这样改好像也可以，就只是把HTML代码中的label那一句放到了最后面，我发现要让哪个在input里面向左滑动，就要把哪个放HTML结构的第二句，这个是和什么相关呢
妮可妮可妮_
2018-08-27 18:19:55
如果同学想要实现习题的效果,有些地方的需要修改,可以参考下面所示思路修改代码,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>为什么span不会滑动</title>
<style type="text/css">
/*鼠标移上去或者获得焦点、在此处填写代码*/
/*符合验证的label、在此处填写代码*/
/*不符合验证的label、在此处填写代码*/
.cont {
margin: 100px;
position: relative;
}
input {
width: 140px;
height: 20px;
line-height: 20px;
text-indent: 36px;
transition: all .3s;
outline: none;
border-radius: 5px;
}
label {
height: 24px;
line-height: 24px;
position: absolute;
left: 3px;
transition: all .3s;
}
input:focus,
input:hover {
text-indent: 2px;
}
input:focus+label,
input:hover+label {
transform: translateX(-120%);
}
input:invalid {
border: 1px solid red;
}
input:invalid~span:after {
content: "邮箱错误！";
}
input:valid {
border: 1px solid green;
}
input:valid~span:after {
content: "输入正确！";
}
</style>
</head>
<body>
<div class="cont">
<input type="email" id="email" placeholder="请输入邮箱" required>
<label for="email">邮箱</label>
<span></span>
</div>
</body>
</html>祝同学学习愉快~
qq_一个人一個人_0
2018-08-27 17:29:40
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>为什么span不会滑动</title>
<style type="text/css">
/*鼠标移上去或者获得焦点、在此处填写代码*/
/*符合验证的label、在此处填写代码*/
/*不符合验证的label、在此处填写代码*/
.cont{
margin: 100px;
position: relative;
}
input{
width: 140px;
height: 20px;
line-height: 20px;
text-indent: 36px;
transition: all .3s;
outline: 0;
border-radius: 5px;
}
span.title{
height: 30px;
line-height: 30px;
position: absolute;
left: 2px;
top: -2px;
transition: all .3s;
}
span.title:focus, span.title:hover{
text-indent: 2px;
}
input:focus,input:hover{
text-indent: 2px;
}
input:focus + span,input:hover + span{
transform: translateX(-120%);
}
input:invalid {
border: 1px solid red;
}
input:invalid~label:after {
content: "邮箱错误！";
}
input:valid {
border: 1px solid green;
}
input:valid~label:after {
content: "输入正确！";
}
</style>
</head>
<body>
<div class="cont">
<input type="email" id="email" required><label for="email"></label>
<span class="title">邮箱</span>
</div>
</body>
</html>老师，加了您说的代码还是没用啊
相似问题
登录后可查看更多问答，登录/注册
响应式开发与常用框架 2018
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星