CuDemVN.Wap.Sh
GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ
Hướng dẫn tạo giao diện hồ sơ cá nhân theo phong cách Facebook bằng CSS và HTML
 |  RoSino18k  
18-03-2016
|
Mạng xã hội facebook đã không còn xa lạ gì với các bạn trẻ Việt Nam. Ngoài khả năng kết nối bạn bè bởi sự tiện dụng trong chat chít trò chuyện, điều mà hấp dẫn khách ghé lại facebook còn ở giao diện và phong cách thiết kế rất riêng, rất chuyên nghiệp nữa. Hồ sơ dưới đây chắc các bạn thường thấy trên trang facebook trang cá nhân của mình đúng không? Bạn cũng cảm thấy đẹp và có cảm giác chuyên nghiệp như mình chứ.
Hôm nay mình sẽ share cho các bạn code hồ sơ cá nhân facebook bằng HTML và CSS. Các bạn có thể thêm vào trang cá nhân của diễn đàn mình ví dụ như trong /users/profile.php các bạn hãy thêm vào chỗ thích hợp và vừa mắt nhất cho diễn đàn của bạn. Code ở demo này rất đẹp và phù hợp với sở thích luôn rồi
Bắt đầu tạo hồ sơ cá nhân phong cách Facebook ngay nào!
- Đầu tiên là code CSS:
#container{
margin:0 auto;
width:600px;
}
#container-content{
border:solid 1px #cccccc;
padding:20px;
width:558px;
color:#cccccc;
}
#info_box{
padding:60px 50px 0px 10px;
border:solid 1px #dedede;
width:538px;
background-color:#fcfcfc;
margin-top:200px;
}
#profile_img{
background-color: #FFFFFF;
border: 1px solid #DEDEDE;
margin-left: 10px;
margin-top: -100px;
position: absolute;
width: 86px;
height: 86px;
float:left;
}
.avatar_img{
padding:3px;
}
#cover_container{
overflow: auto;
width: 600px;
}
#info-box{
margin-left:115px;
margin-top: -50px;
position: absolute;
}
#info-name{
float:left;
overflow:hidden;
word-wrap: break-word;
width:150px;
}
#info-content{
margin-left:170px;
width:290px;
}
#info-photos{
text-align:center;
font-size:11px;
padding:5px;
float:left;
width:80px;
border:solid 1px #eeeeee;
-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;
}
#info-friends{
text-align:center;
font-size:11px;
padding:5px;
margin-left:100px;
border:solid 1px #eeeeee;
width:80px;
-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;
}- Tiếp đến là đoạn code HTML hiển thị:
<div id="container">
<div id='cover_container' style="background:url('cover.jpg');">
<div id='info_box'>
<div id="profile_img"><img src='Image Link' class='avatar_img'/></div>
<div id="info-box">
<div id="info-name">Name</div> // User's Name
<div id="info-content">
<div style="float:right">
<div><img src='cameraa.png' title='Change Cover Picture'/></div>
</div>
<div id="info-photos">
<div>Photos</div>
<div>17</div> // Number of Photos
</div>
<div id="info-friends">
<div>Friends</div>
<div>270</div> // Number of friends
</div>
// Content on the Page
<div id="container-content">
Put your Content Here.
</div>
Lưu ý Ảnh bìa các bạn nên chọn với kích thước chiều rộng là 600px, cao 250-300px hoặc cũng có thể dùng thuộc tính width và height của tag img để sửa nhé!
Bạn có thể tải về script full ảnh nền và avatar như code trên tại
profile-facebook.zip
và thiết kế theo ý thích nhé! Chúc các bạn thành công!
Nguồn: tuts.wtfdiary.com
↓ Tập tin Đính kèm ↓
profile-facebook.zip (60.84KB)
Lượt xem: 673 
Đánh giá: 4.5/ 5, 673 bình chọn
| - Chia sẻ: |   |
Link:
Còn “nhiều” Lắm!