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>

相关推荐
Leyla13 分钟前
【代码重构】好的重构与坏的重构
前端
影子落人间16 分钟前
已解决npm ERR! request to https://registry.npm.taobao.org/@vant%2farea-data failed
前端·npm·node.js
世俗ˊ41 分钟前
CSS入门笔记
前端·css·笔记
子非鱼92141 分钟前
【前端】ES6:Set与Map
前端·javascript·es6
6230_1 小时前
git使用“保姆级”教程1——简介及配置项设置
前端·git·学习·html·web3·学习方法·改行学it
想退休的搬砖人1 小时前
vue选项式写法项目案例(购物车)
前端·javascript·vue.js
加勒比海涛1 小时前
HTML 揭秘:HTML 编码快速入门
前端·html
啥子花道1 小时前
Vue3.4 中 v-model 双向数据绑定新玩法详解
前端·javascript·vue.js
麒麟而非淇淋1 小时前
AJAX 入门 day3
前端·javascript·ajax
茶茶只知道学习2 小时前
通过鼠标移动来调整两个盒子的宽度(响应式)
前端·javascript·css