设计稿
整体上是一个大的div给长宽,背景,阴影设置好
第一行:
设置flex布局,里面的项目居中,均匀分布
代码如下:
.person-info {
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
border-radius: 2px;
background: #fff;
width: 300px;
font-size: 12px;
margin: 0 auto;
margin-top: 15px;
}
接下来的四个相似布局用ul
代码如下:
.person-info .detail {
border-top: 1px solid #f2f2f5;
border-bottom: 1px solid #d9d9d9;
padding: 0 16px;
}
.person-info .detail .item {
padding: 10px 5px 10px 23px;
border-top: 1px solid #f2f2f5;
}
.person-info .detail .item:first-child {
border: none;
background: url(./images/address.png) no-repeat 0 8px/20px 20px;
}
.person-info .detail .item:nth-child(2) {
background: url(./images/file.png) no-repeat 0 8px/20px 20px;
}
.person-info .detail .item:nth-child(3) {
background: url(./images/link.png) no-repeat 0 8px/20px 20px;
}
.person-info .detail .item:nth-child(4) {
background: url(./images/tag.png) no-repeat 0 8px/20px 20px;
}