Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.

tung

Latest topics


    [Code] Menu ảnh chạy dọc forum [ Rất hay ]

    Ruby
    Ruby
    User's Founder


    Bài viết : 460
    Ryo : 4839
    Cảm ơn : 3022
    Nam Date : 09/04/2012
    Tuổi : 25
    Đến từ : Việt Nam

    [Code] Menu ảnh chạy dọc forum [ Rất hay ] Empty [Code] Menu ảnh chạy dọc forum [ Rất hay ]

    Bài gửi by Ruby Mon Apr 30, 2012 8:16 pm

    [Code] Menu ảnh chạy dọc forum [ Rất hay ] 56510
    Code này giúp chúng ta có 1 thanh menu ảnh : các bạn có thể đặt ảnh thành viên hoặc ảnh của bạn ở trên đó ( kèm them đó là đường dẫn đến 1 topic nào đó ) hoặc có thể dùng làm quảng cáo ...
    Cách làm

    Cho code sau vào Footer begin
    Code:
    <div class="imglist">
    <a href="#"><img src="http://r20.imgfast.net/users/2015/12/67/35/avatars/1-51.jpg" alt="" /></a>
    <a href="#"><img src="http://r20.imgfast.net/users/2015/12/67/35/avatars/216-87.jpg" alt="" /></a>
    <a href="#"><img src="http://2img.net/i/fa/i/avatars/gallery/Dragon_ball/Dragon_ball_65.gif" alt="" /></a>
    <a href="#"><img src="http://r20.imgfast.net/users/2015/12/67/35/avatars/28-66.jpg" alt="" /></a>
    <a href="#"><img src="http://2img.net/i/fa/i/avatars/gallery/Musique_h/Music_h_28.jpg" alt="" /></a>
    </div>

    Bước tiếp theo cho đoạn sau vào Css :
    Code:
    .imglist{
    position: fixed;
    top: 30px;
    left: 0px; 

    .imglist img{
    height:25px;
    width:25px;
    margin:5px;
    display: block;
    transition:width 1.2s,height 1.2s,box-shadow 1.2s;
    -webkit-transition:width 1.2s,height 1.2s,box-shadow 1.2s;
    -moz-transition:width 1.2s,height 1.2s,box-shadow 1.2s;
    -o-transition:width 1.2s,height 1.2s,box-shadow 1.2s;
    }
    .imglist img:hover{
    height:125px;
    width:125px;
    box-shadow: 7px 9px 18px rgba(0, 0, 0, 0.63);
    -webkit-box-shadow: 7px 9px 18px rgba(0, 0, 0, 0.63);
    -moz-box-shadow: 7px 9px 18px rgba(0, 0, 0, 0.63);
    -o-box-shadow: 7px 9px 18px rgba(0, 0, 0, 0.63);
    }

    ở chỗ
    Code:
    <a href="#">

    Các bạn thay dấu # = Link đường dẫn đến nhá
    Có thể thêm nhiều link ảnh = cách thêm nhiều code sau
    Code:
    <a href="#"><img src="http://2img.net/i/fa/i/avatars/gallery/Musique_h/Music_h_28.jpg" alt="" /></a>

    Nguồn: CNTT-K3

      Hôm nay: Mon May 13, 2024 4:59 am