在網頁設計中，個人信息顯示是非常重要的一部分。CSS是一種用于網頁樣式設計的語言，可以利用其豐富的屬性來實現個人信息的顯示效果。

/*個人信息顯示的基本樣式設置*/
.personal-info{
width: 400px;
height: 200px;
border: 1px solid #ccc;
border-radius: 10px;
padding: 20px;
position: relative;
}
/*頭像設置*/
.personal-avatar{
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: -40px;
left: 50%;
margin-left: -40px;
}
.personal-avatar img{
width: 100%;
height: 100%;
}
/*個人信息設置*/
.personal-info h3{
margin: 0;
padding: 0;
text-align: center;
font-size: 20px;
margin-top: 60px;
}
.personal-info p{
margin: 0;
padding: 0;
text-align: center;
font-size: 16px;
margin-top: 10px;
}
/*聯系方式設置*/
.contact{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.contact p{
margin: 0;
padding: 0;
font-size: 14px;
line-height: 20px;
}
.contact p span{
display: inline-block;
width: 100px;
text-align: right;
}

以上代碼實現了個人信息的顯示效果，包括頭像、姓名和聯系方式等內容。其中，頭像部分設置了圓形效果，并使用絕對定位進行位置設置；個人信息和聯系方式設置了居中顯示，聯系方式的文本樣式也進行了調整，使得整個個人信息顯示更加美觀。