.login-btn, .register-btn { /* 按钮的样式 */ }补全,最基础样式
时间: 2024-02-23 07:00:53 浏览: 24
以下是最基础的登录按钮和注册按钮的样式:
```css
.login-btn,
.register-btn {
display: inline-block;
padding: 10px 20px;
border: 1px solid #ccc;
background-color: #fff;
color: #333;
text-align: center;
text-decoration: none;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
```
在上面的样式中,`.login-btn` 和 `.register-btn` 都被设置为 `display: inline-block;`,使其能够在同一行显示。同时,还设置了一些常见的按钮样式,如边框、背景色、字体颜色、字体大小等。可以根据实际需要进行调整。
相关问题
.login-btn, .register-btn { display: inline-block; padding: 10px 20px; border: 1px solid #ccc; background-color: #fff; color: #333; text-align: center; text-decoration: none; cursor: pointer; font-size: 16px; font-weight: bold; }改成分开的两个
可以将 `.login-btn` 和 `.register-btn` 分别设置样式,如下:
```css
.login-btn {
display: inline-block;
padding: 10px 20px;
border: 1px solid #ccc;
background-color: #fff;
color: #333;
text-align: center;
text-decoration: none;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
.register-btn {
display: inline-block;
padding: 10px 20px;
border: 1px solid #ccc;
background-color: #fff;
color: #333;
text-align: center;
text-decoration: none;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
```
在上面的样式中,`.login-btn` 和 `.register-btn` 分别设置了相同的样式,这两个样式在属性上是一样的。只是通过分别设置 `.login-btn` 和 `.register-btn` 来实现不同的样式细节,可以根据实际需要进行调整。
<form action="/login" method="post"> <div class="login_box"> <input type="text" name="username" id="username" required> <label for="username">用户名</label> </div> <div class="login_box"> <input type="password" name="password" id="password" required> <label for="password">密码</label> </div> <button type="submit" id="login-btn">登录</button> </form> <a href="register.html"> 注册 <span></span> <span></span> <span></span> <span></span>优化代码,让form表单里的button和注册按钮样式一样
要使表单中的登录按钮样式与注册按钮样式相同,您可以使用与注册按钮相同的HTML结构和CSS样式。以下是经过优化的代码示例:
```html
<form action="/login" method="post">
<div class="login_box">
<input type="text" name="username" id="username" required>
<label for="username">用户名</label>
</div>
<div class="login_box">
<input type="password" name="password" id="password" required>
<label for="password">密码</label>
</div>
<a href="register.html" class="register-btn">
注册
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<button type="submit" id="login-btn" class="register-btn">登录</button>
</form>
```
在CSS样式表中,您可以为`.register-btn`类添加与注册按钮相同的样式:
```css
.register-btn {
/* 添加与注册按钮相同的样式 */
}
```
通过将登录按钮的`<button>`元素添加到注册按钮的`<a>`元素之后,并为两者都添加相同的`.register-btn`类,可以使它们具有相同的样式。
请根据您的具体需求和样式要求,修改和添加适当的CSS样式来实现所需的效果。