使用CSS样式规则来控制列表、表格和表单的显示效果,光标悬停在表格上时,所在行应会改变背景色,光标悬停在按钮上时,按钮应有凹陷效果。
时间: 2024-02-15 17:05:36 浏览: 23
好的,针对您的问题,我可以给您提供一些CSS样式规则来实现您的需求:
1. 控制列表的显示效果
```
ul {
list-style: none; /* 去掉列表默认样式 */
padding: 0;
margin: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #ccc; /* 添加底部边框 */
}
```
2. 控制表格的显示效果
```
table {
border-collapse: collapse; /* 合并表格边框 */
width: 100%;
}
th, td {
border: 1px solid #ccc; /* 添加表格边框 */
padding: 10px;
}
tr:hover {
background-color: #f5f5f5; /* 鼠标悬停时背景色改变 */
}
```
3. 控制表单的显示效果
```
input[type="text"], input[type="password"], select {
padding: 10px;
border: 1px solid #ccc; /* 添加输入框边框 */
}
input[type="submit"], button {
padding: 10px;
border: none;
background-color: #ccc;
cursor: pointer;
&:hover {
box-shadow: inset 0 0 5px rgba(0,0,0,0.5); /* 鼠标悬停时凹陷效果 */
}
}
```
希望以上样式规则能够帮助您实现需要的效果。
相关推荐
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)