设计一个登录表单 宽度300像素 外边距默认为0 和浏览器计算外边距
时间: 2024-03-15 22:44:01 浏览: 16
好的,以下是一个简单的登录表单的 HTML 和 CSS 代码:
```html
<form class="login-form">
<label for="username">用户名</label>
<input type="text" id="username" name="username" required>
<label for="password">密码</label>
<input type="password" id="password" name="password" required>
<button type="submit">登录</button>
</form>
```
```css
.login-form {
width: 300px;
margin: 0 auto;
}
.login-form label {
display: block;
margin-bottom: 8px;
}
.login-form input {
display: block;
width: 100%;
padding: 8px;
margin-bottom: 16px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
.login-form button {
display: block;
width: 100%;
padding: 8px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.login-form button:hover {
background-color: #0069d9;
}
```
这个表单的宽度为 300 像素,外边距为默认值。它会水平居中在其父元素内。登录表单包含用户名和密码输入框,以及一个提交按钮。输入框和按钮都有简单的样式,使其看起来更加美观。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)