CSS名片布局是在網頁中常用的一種設計布局，它能夠讓人們更好地展示個人信息，如姓名、聯系方式、個人網站等。下面我們就詳細介紹一下這種布局的實現方法。

HTML代碼：
<div class="card">
<div class="name">張三</div>
<div class="job">Web開發工程師</div>
<div class="contact">
<div class="phone">Tel: 185****1234</div>
<div class="email">Email: zhangsan@email.com</div>
<div class="website">Website: www.zhangsan.com</div>
</div>
</div>
CSS代碼：
.card {
width: 300px;
height: 150px;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 1px 1px 3px #ccc;
}
.name {
font-size: 24px;
font-weight: bold;
}
.job {
font-size: 16px;
color: #999;
margin-bottom: 10px;
}
.contact div {
line-height: 24px;
}
.phone:before {
content: "\f095";
font-family: FontAwesome;
margin-right: 5px;
}
.email:before {
content: "\f0e0";
font-family: FontAwesome;
margin-right: 5px;
}
.website:before {
content: "\f0ac";
font-family: FontAwesome;
margin-right: 5px;
}
.contact div:before {
display: inline-block;
width: 16px;
font-size: 16px;
text-align: center;
color: #999;
}

在這里，我們首先定義了一個class為card的div，它是整個名片布局的外框，設置了邊框、內邊距和陰影等樣式。然后，我們在這個div里面定義了三個子div，它們分別是名字、職業和聯系方式。在名字和職業的div中，我們設置了不同的字體大小和顏色，以突出顯示不同的信息。在聯系方式的div中，則包含了三個子div，它們分別是電話、電子郵件和個人網站。為了方便使用圖標來表示不同的聯系方式，我們使用了FontAwesome字體，同時加入了before偽類，并設置了不同的內容來顯示不同的圖標。

現在，使用CSS名片布局的網頁已經越來越普遍了，因為它能夠讓人們更好地展示自己的個人信息，同時也更加美觀和專業。