用HTML CSS Javascript 实现一个简单的登录框

最新推荐文章于 2024-10-11 10:05:29 发布

Star_Salamander

最新推荐文章于 2024-10-11 10:05:29 发布

阅读量679

点赞数 1

分类专栏： HTML 文章标签： css html js javascript

本文链接：https://blog.csdn.net/Star_Salamander/article/details/115588109

版权

这篇博客介绍如何利用HTML、CSS和JavaScript实现一个基本的登录框。内容包括设置登录框样式，如居中、圆角和阴影，以及添加账号、密码输入框和登录按钮的CSS样式。通过JavaScript实现获取用户输入的功能，提供了完整的HTML和CSS代码示例。

摘要由CSDN通过智能技术生成

用HTML CSS Javascript 实现一个简单的登录框

最终实现的效果
-
首先就是定义一个
元素来放账号和密码框，给他来个居中和圆角和阴影

<div class="mainLoginBox"></div>

它的css:

.mainLoginBox{
   
	margin: 0 auto; /*水平居中div*/
    position: relative;
    top:150px;/*让他向下一点*/
    height: 400px;/*定义它的宽和高*/
    width:500px;
    border-radius: 15px;/*圆角*/
    background-color: #ffffff;
    box-shadow: 0px 0px 48px 2px #858585;/*阴影*/
    text-align: center;
}

接着就是里面的和了

<!--只有一个input--!>
<input class="input" id="account" /><!--在后面加一道杠封闭元素--!>
<!--然后可以在它的前面加上一个p元素--!>
<p class="firstFlag">账号:</p><input class="input" id="account" />
<!--password也同理--!>
<p class="secondFlag">密码:</p><input class="input" id="password" type="password" />
<!--下面就是添加button了--!>
<button class="buttons" id="login" onclick