html+css制作简单注册登录页面

编程入门行业动态更新时间:2024-10-11 05:20:42

html+css制作简单注册登录<a href=https://www.elefans.com/category/jswz/34/1771336.html style= 页面"/>

html+css制作简单注册登录页面

展示图：

设计逻辑：

moni.html

moni.css

注册登录功能：

展示图：

设计逻辑：

用户名

方框（请输入用户名）

密码

方框（请输入密码）

已注册，去登录

}

账号

方框（请输入用户名）

密码（请输入密码）

没有账号，去注册忘记密码

}

<body></body>这个标签是一个页面的所有

按照注册登录界面的颜色，我们可以这样写

前端页面要得到css的布局，就得在html页面里调用css文件

例如：我创建了 moni.html moni.css

<link href="/css/moni.css"  type="text/css" rel="stylesheet">

效果展示：

下一步：制作白色盒子

css中

.a{width: 340px;            background: white;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 5px;
}

写完这一步，然后再去运行，是没有东西的，但是并不是不存在

这么设计是因为他根据你写的内容而改变高度

如果要固定他的高度

在.a{ } 添加height=400

效果：

如果不加，我们可以根据内容的多少，设计多少白色的部分

继续接下去写

html中

根据设计逻辑，我们先写第一行文字（注册）

css中

效果

.b{ } 是针对注册两个字后面的白色部分进行布局

.c{width: 340px;        height: 60px;display: inline-block;color: black;font-size: 18px;text-align: center;line-height: 60px;cursor: pointer;       光标为手的形状，当光标指定这个div的时候，光标为手的形状
}

效果：

.e {margin: 20px 30px;  text-align: left;
}
.p{color: #4a4a4a;margin-top: 30px;margin-bottom: 6px;font-size: 15px;
}
.e input[type="text"], .e input[type="password"]{width: 100%;height: 40px;border-radius: 3px;border: 1px solid #adadad;padding: 0 10px;box-sizing: border-box;
}
.e input[type="submit"]{margin-top: 40px;width: 100%;height: 40px;border-radius: 5px;color: white;border: 1px solid #adadad;background: cyan;cursor: pointer;letter-spacing: 4px;margin-bottom: 40px;
}

效果：

e{} 的部分

.e {
margin: 20px 30px;
text-align: left; 文本写在左侧
}

border-radius: 3px;

设置边框的角弧度

hover的作用就是当鼠标停在某个地方的时候，哪里就会产生触发效果

例如我在注册这一块级里，我用鼠标指定这一区域时会变成蓝色

moni.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link href="/css/moni.css"  type="text/css" rel="stylesheet">
</head>
<body><div class="a"><div class="b"><div class="c">注册</div></div><div class="e"><p>账号</p><input type="text" placeholder="请输入用户名" name="username"/><p>密码</p><input type="password" placeholder="请输入密码"  name="password"/><br/><input type="submit" value="登录"/></div></div></body>
</html>

moni.css


body{background: #65cea7;
}
.a{width: 340px;background: white;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 5px;
}.b{width: 340px;height: 60px;background: white;
}
.b   div{width: 340px;height: 60px;display: inline-block;color: black;font-size: 18px;text-align: center;line-height: 60px;cursor: pointer;
}.e {margin: 20px 30px;text-align: left;
}
.p{color: #4a4a4a;margin-top: 30px;margin-bottom: 6px;font-size: 15px;
}
.e input[type="text"], .e input[type="password"]{width: 100%;height: 40px;border-radius: 3px;border: 1px solid #adadad;padding: 0 10px;box-sizing: border-box;
}
.e input[type="submit"]{margin-top: 40px;width: 100%;height: 40px;border-radius: 5px;color: white;border: 1px solid #adadad;background: cyan;cursor: pointer;letter-spacing: 4px;margin-bottom: 40px;
}
.b div:hover{background: cyan;
}