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>

相关推荐
酷爱码几秒前
CSS3实现的账号密码输入框提示效果
前端·javascript·css3
NoneCoder6 分钟前
React Context 与状态管理:用与不用
前端·react.js·面试
不爱吃饭爱吃菜6 分钟前
uniapp小程序开发,判断跳转页面是否需要登录方法封装
开发语言·前端·javascript·vue.js·uni-app
霸王蟹9 分钟前
React 泛型组件:用TS来打造灵活的组件。
前端·学习·react.js·typescript·前端框架
菥菥爱嘻嘻12 分钟前
React---day3
javascript·react.js·ecmascript
Dontla13 分钟前
React声明式编程(手动控制,大型项目,深度定制)与Vue响应式系统(自动优化,中小型项目,快速开发)区别
javascript·vue.js·react.js
阳光开朗大男孩 = ̄ω ̄=32 分钟前
【JavaScript】Ajax 侠客行:axios 轻功穿梭服务器间
前端·javascript·ajax
顽强d石头43 分钟前
微信小程序关于截图、录屏拦截
前端
新中地GIS开发老师1 小时前
25年GIS开发暑期实训营,15天Get三维可视化智慧城市开发项目
前端·人工智能·智慧城市·web·gis开发·webgis·地信
m0_376534071 小时前
flutter使用html_editor_enhanced: ^2.6.0后,编辑框无法获取焦点,无法操作
前端·flutter·html