帮我写一个美观的css代码包括按钮文本框,标签
时间: 2023-04-06 16:01:10 浏览: 73
好的,我可以回答这个问题。以下是一个简单的 CSS 代码,包括按钮、文本框和标签的样式:
/* 按钮样式 */
button {
background-color: #4CAF50; /* 设置背景色 */
border: none; /* 去掉边框 */
color: white; /* 设置文字颜色 */
padding: 15px 32px; /* 设置内边距 */
text-align: center; /* 文字居中 */
text-decoration: none; /* 去掉下划线 */
display: inline-block; /* 设置为行内块元素 */
font-size: 16px; /* 设置字体大小 */
margin: 4px 2px; /* 设置外边距 */
cursor: pointer; /* 鼠标悬停时显示手型 */
}
/* 文本框样式 */
input[type=text], select {
width: 100%; /* 设置宽度为100% */
padding: 12px 20px; /* 设置内边距 */
margin: 8px 0; /* 设置外边距 */
display: inline-block; /* 设置为行内块元素 */
border: 1px solid #ccc; /* 设置边框 */
border-radius: 4px; /* 设置圆角 */
box-sizing: border-box; /* 设置盒模型为border-box */
}
/* 标签样式 */
label {
display: inline-block; /* 设置为行内块元素 */
margin-bottom: 5px; /* 设置下边距 */
}
希望这个 CSS 代码对您有所帮助!
相关推荐
![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)
![](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)