CSS实现登录样式

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Login Form</title>

<style>

body {

font-family: Arial, sans-serif;

padding: 20px;

}

form {

display: flex;

flex-direction: column;

width: 200px;

margin: 0 auto;

padding: 20px;

border: 1px solid #ccc;

border-radius: 5px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

}

input[type="text"], input[type="password"] {

margin-bottom: 10px;

padding: 8px;

border: 1px solid #ddd;

border-radius: 3px;

}

input[type="submit"] {

background-color: #007bff;

color: white;

border: none;

padding: 10px 20px;

border-radius: 3px;

cursor: pointer;

margin-top: 10px;

}

input[type="submit"]:hover {

background-color: #0056b3;

}

</style>

</head>

<body>

<form action="/submit-your-login-form" method="post">

<label for="username">Username:</label>

<input type="text" id="username" name="username" required>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>

<input type="submit" value="Login">

</form>

</body>

</html>

相关推荐
WindrunnerMax7 分钟前
基于 Markdown-It 的无序列表折叠插件
前端·javascript·github
剑神一笑9 分钟前
CSS Loading 动画生成器
前端·css
神三元16 分钟前
最近半年,我做了个 AI-Native 的 Agent 从零到进阶教程
前端·javascript·面试
XiYang-DING31 分钟前
jQuery
前端·javascript·jquery
Morwit31 分钟前
【力扣hot100】 221. 最大正方形
前端·算法·leetcode
明月_清风42 分钟前
关于node 模块化的现状与未来
前端·node.js
老王以为1 小时前
从源码到架构:React useActionState 深度剖析
前端·javascript·react.js
前端超有趣1 小时前
详解JavaScript中encodeURIComponent和decodeURIComponent的使用(附实战场景)
前端·javascript
XinZong1 小时前
业余抱团搞副业:基于OpenClaw做了一款AI社交虾聊,产品做完了,求运营思路
javascript
萧曵 丶1 小时前
Vue3组件通信全方案
前端·javascript·vue.js·typescript·vue3