Trang chủ Blog | Các câu hỏi thường gặp | Yahoo! Việt Nam

      Bài mới nhất

      Sửa Đóng
      Bài viết Tìm bài viết:
      Trích dẫn Báo cáo

      Thiết kế Module Profile ấn tượng !

      Thư mục: Design Blog Plus |
      Quan trọng
      Đăng ngày: 11:30 11-12-2008


      1> Code cho Module Profile :

      Đầu tiên là Code cho Mod này :

      Code:
      #profile_highlight .rc {background:transparent url(Link ảnh Trên) no-repeat left bottom;height:X px}
      #profile_highlight .rc_ft {background:transparent url(Link Ảnh Dưới) no-repeat left top;height: Y px}
      #profile_highlight .rc_bd {background:transparent url(Link ảnh Giữa) repeat-y  top;}
      #profile_highlight .rc_bd div.rc_bc, #profile_highlight .rc_ft div, #profile_highlight .rc div,#profile_highlight .rc_bd  .rc_bc .bd {background:transparent;}

      Như các bạn đã thấy những phần mình in đậm và đổi màu :

      • Các đọan Link ảnh trên, dưới và ở giữa các bạn phải thay ảnh đúng vị trí vào cho phù hợp nhé.
      • Còn Height: ở đây, muốn hiện chiều cao của ảnh 100% bạn phải thay X px, Y px bằng đúng kích thước chiều cao của ảnh .
      Muốn xem chiều cao của ảnh, chỉ việc Right Click vào ảnh chọn Properties, chuyển sang thẻ Sumary, nhìn vào dòng Height là có thể thấy được ảnh cao bao nhiêu.

      2> Ảnh :

      Ở đây, mình chia sẻ một số cách làm ảnh như sau :

      Bước 1 :
      Đầu tiên bạn thiết kế một ảnh với kích thước 150 x 300 px.

      Bước 2 :
      Sau đó cắt ảnh đó ra làm 3 phần (Dùng Photoshop hoặc PhotoScape cũng được)

      • Phần đầu : Cắt với kích thuớc 150 x (50-60 px) .
      • Phần giữa : Phần này các bạn nên làm sao mà có thể lặp lại được, vì vậy chỉ nên cắt từ 150 x 5 px thôi.
      • Phần cuối : Cắt phần này tùy ý, đây là phần phía dưới cùng

      Bước 3 :
      Sau khi đã cắt xong ảnh, việc cuối cùng là up ảnh lên host, và thay link ảnh vào đọan Code đã cho.
      Cuối cùng là wăng code vào CSS thôi .

      Vậy là xong các bước để làm rồi nhé. Chúc các bạn thành công trong việc trang trí cho Mod Profile của mình .
       
       
      Ví dụ mẫu:
       

      #profile_highlight .rc {background:transparent url(http://thietkeblog.webng.com/profile/top2.png) no-repeat left bottom;height:72px;}#profile_highlight .rc_ft {background:transparent url(http://thietkeblog.webng.com/profile/bottom2.png) no-repeat left top;height:73px;} #profile_highlight .rc_bd {background:transparent url(http://thietkeblog.webng.com/profile/center2.png) repeat-x top;height:auto;} #profile_highlight .rc_bd div.rc_bc, #profile_highlight .rc_ft div, #profile_highlight .rc div,#profile_highlight .rc_bd .rc_bc .bd {background:transparent;}

      ………………………………………………………………………………………………...………………

      #profile_highlight .rc {background:transparent no-repeat left bottom;height:0px;}#profile_highlight .rc_ft {background:transparent url(http://thietkeblog.webng.com/profile/bottom3.png) no-repeat left top;height:33px;} #profile_highlight .rc_bd {background:transparent url(http://thietkeblog.webng.com/profile/center3.png) repeat-x top;height:308px;} #profile_highlight .rc_bd div.rc_bc, #profile_highlight .rc_ft div, #profile_highlight .rc div,#profile_highlight .rc_bd .rc_bc .bd {background:transparent;}

       
      Bản quyền bài viết thuộc về W.Dephia's blog
      Trích dẫn (0)
      Tìm tag: module, profile, style, antuong, plus, blog
      Tổng cộng 68 lời bình
      sau (50) sau (50)
      Lời bình mới

      Bài viết về bạn hoặc có tag tên bạn:

      • Chưa có bài nào có liên quan.

      Người đăng ký yêu thích blog này cũng đồng thời thích:

      • Chưa có blog yêu thích nào có liên quan.