提供一点css 美化下这个登录界面
时间: 2023-07-26 09:13:24 浏览: 57
好的,以下是一个简单的 CSS 样式代码,可以美化登录界面:
```css
/* 设置页面背景颜色 */
body {
background-color: #f2f2f2;
}
/* 设置登录框样式 */
.login-box {
width: 400px;
margin: 100px auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px #ccc;
}
/* 设置输入框样式 */
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
background-color: #f2f2f2;
}
/* 设置登录按钮样式 */
button[type="submit"] {
width: 100%;
padding: 10px;
border: none;
border-radius: 3px;
background-color: #4CAF50;
color: #fff;
font-size: 16px;
}
/* 设置链接样式 */
a {
color: #4CAF50;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
```
使用方法:将上述代码放到你的 HTML 文件中的 `<style>` 标签中,然后在登录框的 HTML 代码中添加 `class="login-box"` 属性即可。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](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)
![](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)