css html 登录代码

CSS和HTML是现代Web开发中必不可少的技术。在很多网站中，登录功能是必备的，需要使用CSS和HTML开发相应的页面元素。下面我们将为大家介绍如何使用CSS和HTML编写登录页面的代码。

!DOCTYPE html>
    html>
    head>
    	title>
    登录页面/title>
    	style>
.container {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.input-group {
    margin-bottom: 20px;
}
.input-group label {
    display: block;
    text-align: left;
    margin-bottom: 5px;
}
.input-group input {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: none;
    font-size: 16px;
    background-color: #f2f2f2;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.btn {
    background-color: #4CAF50;
    color: white;
    padding: 15px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}
.btn:hover {
    background-color: #3e8e41;
}
.error {
    color: #f00;
    margin-bottom: 20px;
}
    	/style>
    /head>
    body>
    	div class="container">
    h1>
    登录页面/h1>
    form action="" method="post">
    div class="input-group">
    label for="username">
    用户名:/label>
    input type="text" id="username" name="username" placeholder="请输入用户名">
    /div>
    div class="input-group">
    label for="password">
    密码:/label>
    input type="password" id="password" name="password" placeholder="请输入密码">
    /div>
    div class="error">
    /div>
    button type="submit" class="btn">
    登录/button>
    /form>
    	/div>
    /body>
    /html>
    

上面的代码中，我们首先定义了一个.container类，使用flex布局来让页面垂直居中显示登录表单。接下来，我们定义了.input-group类，用于包含表单中的每个输入框和标签。使用label元素来关联输入框和标签，使得用户可以点击标签来聚焦到相应的输入框。

我们还定义了.btn类，用于显示登录按钮。这个按钮在鼠标悬停时会改变背景颜色，增加一点视觉效果。

代码中还包含一个.error类，在用户输入错误的用户名或密码时会显示相关提示信息。这个类只需要在表单后面添加一个空的div元素即可。

通过这些CSS和HTML代码，我们可以轻松地创建一个美观、易用的登录页面。希望这篇文章对正在学习Web开发的朋友有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！