[ten]Hướng dẫn tạo giao diện hồ sơ cá nhân theo phong cách Facebook bằng CSS và HTML[/ten] [nd][p] 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ứ.[/p]
Hôm nay mình sẽ share cho các bạn [b]code hồ sơ cá nhân facebook[/b] 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
[img]http://cudemvn.wap.sh/images/xtgem/huong-dan-tao-giao-dien-ho-so-ca-nhan-theo-phong-cach-facebook-bang-css-va-html-1.jpg[/img]
[b] Bắt đầu tạo hồ sơ cá nhân phong cách Facebook ngay nào![/b]
- Đầu tiên là code CSS:
[code]#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;
}[/code]
- Tiếp đến là đoạn code HTML hiển thị:
[code]Name // User's Name
Photos
17
// Number of Photos
Friends
270
// Number of friends
// Content on the Page
Put your Content Here.
[/code]
[html]Lưu ý[/html] Ả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 [url=http://cudemvn.wap.sh/xtgem/huong-dan-tao-giao-dien-ho-so-ca-nhan-theo-phong-cach-facebook-bang-css-va-html/profile-facebook.zip]profile-facebook.zip[/url] và thiết kế theo ý thích nhé!
Chúc các bạn thành công!
[right][i] Nguồn: tuts.wtfdiary.com[/i][/right][/nd]
