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);

}

inputtype="text", inputtype="password" {

margin-bottom: 10px;

padding: 8px;

border: 1px solid #ddd;

border-radius: 3px;

}

inputtype="submit" {

background-color: #007bff;

color: white;

border: none;

padding: 10px 20px;

border-radius: 3px;

cursor: pointer;

margin-top: 10px;

}

inputtype="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>

相关推荐
wordbaby3 分钟前
为什么 Apifox 能调通,浏览器却报跨域?一次“CORS Error + 403”联调排坑实录
前端
2603_965896629 分钟前
JavaScript 原型与原型链
开发语言·前端·javascript
Amos_Web10 分钟前
通过 Rspack 源码学 Rust(四):用 `Option<T>` 表达“查询可能没有结果”
前端
朋友圈自动点赞工具15 分钟前
Ruby方法查找:对象不存方法
开发语言·前端·ruby·科技资讯
晓得迷路了20 分钟前
栗子前端技术周刊第 152 期 - Rspack 2.3、TypeScript 7.1 Beta、Bun 1.4.4...
前端·javascript·css
普通人631 分钟前
CSS-box-sizing-使用指南
开发语言·前端·css·1024程序员节
风骏时光牛马36 分钟前
AI开源工具一站式尝鲜体验
前端
IT_陈寒44 分钟前
Python项目实战经验分享:为什么你的多进程日志会丢失?
前端·人工智能·后端
柳杉1 小时前
让 AI 学会审美、建模和剪片:我收藏夹里的 14 个仓库
前端·ai编程·three.js
前端架构师-老李1 小时前
HTML与CSS基础第七课—HTML 中的a标签(跳转链接)
前端·css·html