<label>账号:<input type="text" name="username"></label><br>在css设置位置
时间: 2023-12-08 22:05:08 浏览: 26
<style>
label {
position: relative;
}
input[type="text"] {
position: absolute;
top: 0;
left: 100px; /* adjust the value based on your needs */
}
</style>
<label>账号:<input type="text" name="username"></label><br>
相关问题
<!DOCTYPE html> <html> <head> <title>登录页面</title> </head> <body> <h2>登录</h2> <form method="post" action="login.php"> <label>用户名:</label><input type="text" name="username" required><br> <label>密码:</label><input type="password" name="password" required><br> <input type="submit" value="登录"> </form> </body> </html> 美化css样式
好的,下面是一个使用CSS样式美化的登录页面:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form method="post" action="login.php">
<div class="user-box">
<input type="text" name="username" required>
<label>Username</label>
</div>
<div class="user-box">
<input type="password" name="password" required>
<label>Password</label>
</div>
<input type="submit" value="Login">
</form>
</div>
</body>
</html>
```
CSS代码:
```
body {
font-family: Arial, sans-serif;
}
.login-box {
width: 300px;
background: #fff;
color: #333;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-shadow: 0 3px 10px rgba(0,0,0,.5);
padding: 30px;
border-radius: 10px;
}
.login-box h2 {
margin: 0 0 30px;
padding: 0;
color: #333;
text-align: center;
}
.login-box .user-box {
position: relative;
}
.login-box .user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #333;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #333;
outline: none;
background: transparent;
}
.login-box .user-box label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #333;
pointer-events: none;
transition: .5s;
}
.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
top: -20px;
left: 0;
color: #ff9900;
font-size: 12px;
}
.login-box input[type="submit"] {
background: #ff9900;
border: none;
color: #fff;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
}
.login-box input[type="submit"]:hover {
background: #333;
}
```
请注意,此处只是一个简单的样式示例,实际应用中可以根据需求进行自定义样式的设置。
给这段代码配一个bootstrap 风格的css 样式。 <!DOCTYPE html> <html> <head> <title>用户登录</title> <link rel="stylesheet" type="text/css" href="login.css"> </head> <body> <h1>用户登录</h1> <form action="登录.HTML" method="post"> <label style="display: inline-block;" for="username">用户名:</label> <input style="display: inline;"type="text" id="username" name="username"><br><br> <label style="display: inline-block;" for="password">密 码:</label> <input style="display: inline;"type="password" id="password" name="password"><br><br> <label style="display: inline-block;" for="remember">记住我:</label> <input style="display: inline;"type="checkbox" id="remember" name="remember"><br><br> <input type="submit" value="登录"> </form> </body> </html>
可以使用以下代码来配一个bootstrap 风格的css 样式:
<!DOCTYPE html>
<html>
<head>
<title>用户登录</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>用户登录</h1>
<form action="登录.HTML" method="post">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" class="form-control" id="username" name="username">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<div class="checkbox">
<label><input type="checkbox" id="remember" name="remember">记住我</label>
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
</div>
</body>
</html>
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
美化界面<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册</title> </head> <body> 注册 <form action="/Register" method="post"> <label for="username">用户名:</label> <input type="text" name="username" id="username" required>
<label for="password">密码:</label> <input type="password" name="password" id="password" required>
<input type="submit" value="注册"> 已注册,去登录 </form> </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<html> <head> <meta charset="UTF-8"> <title>星星国际影城-用户登录界面</title> <script src="js/login.js"></script> </head> <body> xx国际影城 <form action="#" method="post"> <label>用户名:</label> <input type="text" placeholder="请输入用户名" name="userName" value=""/> <label>密 码:</label> <input type="password" placeholder="请输入密码" name="password" value=""/> 登录 </form> 还不是我们的会员?立即注册 </body> </html>。在每行代码后面加上解释
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)