网页下方设置联系人 CSS如何设置
时间: 2024-04-30 09:22:31 浏览: 17
下方联系人的CSS样式可以根据具体需求进行设定,以下是一些常用的样式代码:
1. 设置联系人容器的宽度和高度,并将其位置设置为固定的:
```css
.contact-container{
width: 100%;
height: 200px;
position: fixed;
bottom: 0;
background-color: #fff;
}
```
2. 将联系人列表设置为水平排列,每个联系人之间留出一定的间隔:
```css
.contact-list{
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
}
.contact-item{
margin: 0 10px;
}
```
3. 设置联系人头像的大小和边框样式:
```css
.contact-avatar{
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #ccc;
}
```
4. 设置联系人姓名和职位的样式:
```css
.contact-name{
font-size: 16px;
font-weight: bold;
margin-top: 5px;
}
.contact-job{
font-size: 12px;
color: #999;
}
```
5. 设置联系人的鼠标悬停效果:
```css
.contact-item:hover{
background-color: #f5f5f5;
cursor: pointer;
}
```
以上是一些常用的联系人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_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)