写一个 带圆角的输入框位置上下左右居中
时间: 2023-05-15 15:06:56 浏览: 68
首先,使用 CSS 设置圆角:
```css
input {
border-radius: 5px;
}
```
然后设置位置居中:
```css
input {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
结合使用,可以得到如下代码:
```css
input {
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
相关问题
写一个登录页面带样式
### 回答1:
的html代码
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #f2f2f2;
}
#loginForm {
background-color: #fff;
padding: 15px;
width: 300px;
margin: 0 auto;
border: 1px solid #e3e3e3;
}
#loginForm input {
font-size: 12px;
padding: 5px;
width: 280px;
margin-bottom: 10px;
}
#loginForm input[type="submit"] {
font-size: 14px;
padding: 5px;
width: 280px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="loginForm">
<form action="">
<label for="username">用户名:</label>
<input type="text" name="username" id="username">
<br>
<label for="password">密码:</label>
<input type="password" name="password" id="password">
<br>
<input type="submit" value="登录">
</form>
</div>
</body>
</html>
### 回答2:
登录页面是一个常见的网页设计,通常用于用户登录到一个网站或应用程序中。下面是一个简单的登录页面示例,其中包含了基本的样式:
```html
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
.container {
width: 400px;
margin: 100px auto;
background-color: #ffffff;
border-radius: 5px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #333333;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.form-group input[type="text"],
.form-group input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 3px;
}
.form-group input[type="submit"] {
background-color: #4CAF50;
color: #ffffff;
border: none;
padding: 10px;
border-radius: 3px;
cursor: pointer;
width: 100%;
}
.form-group input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>用户登录</h2>
<form>
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="请输入用户名" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="请输入密码" required>
</div>
<div class="form-group">
<input type="submit" value="登录">
</div>
</form>
</div>
</body>
</html>
```
这个登录页面使用HTML和CSS编写。HTML部分包括一个容器div,内部包含一个标题和一个表单,其中包括用户名输入框、密码输入框和登录按钮。
CSS部分定义了页面的样式,包括背景颜色、边距、边框、圆角、阴影、字体样式和颜色等。
### 回答3:
登录页面是网站或应用程序中常见的一种页面,用于用户输入用户名和密码进行身份验证。一般来说,登录页面应具备以下几个要素:输入框、按钮、Logo和背景样式。
首先,要设计一个简洁而美观的背景样式。可以选择渐变的背景,使用两种或多种颜色混合,形成温暖或冷静的效果。或者使用一张图片作为背景,注意要选择不会干扰用户输入的图片,同时要保证图片的清晰度以及适配不同屏幕的能力。
接下来,要设计一个居中的登录框。可以使用一个白色或其他浅色作为背景,突出输入控件。用户名和密码输入框以及相应的标签应放置在框内的合适位置上。
为了增加用户的使用感受,可以为输入框添加阴影、圆角或边框样式。在默认情况下,输入框应该保持空白,突出输入的焦点。在输入错误时,可以通过修改输入框的颜色或添加错误信息来指示用户。
为了引导用户的注意力,可以在登录页面上添加一个Logo。Logo应该位于登录框的顶部中央位置,代表网站或应用程序的标识。Logo可以是文字、图标或组合,要根据实际情况选择合适的样式。
最后,添加登录按钮。按钮应该位于输入框的下方,显示明确的“登录”或其他相应的文字。按钮的样式可以使用与输入框相似的风格,带有阴影和圆角等效果。当按钮被点击时,应给予用户明确的反馈,例如改变按钮的颜色或添加加载动画。
总结起来,设计一个登录页面带有样式需要注意背景样式、输入框样式、Logo以及登录按钮的样式。这样可以为用户提供一个美观、简洁和易于使用的登录页面。
前端代码 写一个登录的页面。用户名密码输入框居中对齐,布局合理。包括记住密码勾选框,登录按钮
以下是一个简单的登录页面的前端代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.form {
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
label {
margin-bottom: 10px;
}
input[type="text"], input[type="password"] {
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
width: 100%;
}
input[type="checkbox"] {
margin-right: 5px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
button:hover {
background-color: #3E8E41;
}
</style>
</head>
<body>
<div class="container">
<form class="form">
<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>
<label>
<input type="checkbox" name="remember"> Remember me
</label>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
```
上述代码使用了 Flexbox 布局,将输入框居中对齐。登录框设置了背景色、圆角和阴影,样式简洁美观。记住密码勾选框使用了 label 包裹 input 元素,点击 label 也可以选中或取消选中输入框。登录按钮使用了鼠标悬停效果,增强了用户交互体验。