Pair of Vintage Old School Fru

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ữ
* Trang chủ >> WapMaster
Tìm Kiếm Thảo Luận
↓↓

Hướng dẫn tạo giao diện hồ sơ cá nhân theo phong cách Facebook bằng CSS và HTML

Admin* 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

Hướng dẫn tạo giao diện hồ sơ cá nhân theo phong cách Facebook bằng CSS và HTML
[Tải ảnh]


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 ↓
↑↑ Lượt xem: 328
score
Đánh giá: 4.5/ 5, 328 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-328]