Chú ý: Công ty Thái AiTi đã thay đổi thương hiệu mới là Công ty Thabidu
Các dịch Website chuyển đến: Anbiweb.com - Dịch vụ Phim Ảnh chuyển đến www.zumi.media

Thủ thuật code thay đổi màu sắc iPhone 6 Plus sử dụng cho Web Shop

    Bài ngày hôm nay, ThaiAiTi muốn chia sẻ bạn đọc thêm 1 thủ thuật khá hay và hữu ích dành cho các Website bán hàng. Được sử dụng HTML và CSS nên tốc độ load rất nhanh và không ảnh hưởng đến Template có sẵn. 


    Bạn đang muốn giới thiệu nhiều sản phẩm cho khách hàng xem thì đây là 1 lựa chọn tối ưu nhất. Bạn có thể xem demo trực tiếp ngay bên dưới


    Cách thực hiện khá đơn giản, bạn chỉ cần chèn đoạn code sau vào nơi cần hiển thị:
    <div class='chuyenmauiphonethaiaiti'><div class='hinhdaidieniphonethaiaiti'><img id='hinhdaidieniphonethaiaiti-trang' src='http://images.apple.com/v/iphone/compare/b/images/6plus_silver_large.jpg'></img><img id='hinhdaidieniphonethaiaiti-vang' src='http://images.apple.com/v/iphone/compare/b/images/6plus_gold_large.jpg'></img><img id='hinhdaidieniphonethaiaiti-xam' src='http://images.apple.com/v/iphone/compare/b/images/6plus_spacegray_large.jpg'></img></div><div class='buttonmauiohonethaiaiti'><a class='buttonmauiohonethaiaiti-trang' href='#hinhdaidieniphonethaiaiti-trang'></a><a class='buttonmauiohonethaiaiti-vang' href='#hinhdaidieniphonethaiaiti-vang'></a><a class='buttonmauiohonethaiaiti-xam' href='#hinhdaidieniphonethaiaiti-xam'></a></div></div>
    <style>.chuyenmauiphonethaiaiti {float: left;width: 210px;height: 500px;overflow: hidden;}.hinhdaidieniphonethaiaiti {float: left;width: 100%;height: 415px;overflow: hidden;}.hinhdaidieniphonethaiaiti img {float: left;width: 100%;height: 100%;overflow: hidden;}.buttonmauiohonethaiaiti {float: left;width: 210px;height: 50px;text-align: center;margin-top: 15px;}.buttonmauiohonethaiaiti a {border-radius: 50px;border: 1px solid #ccc;overflow: hidden;padding: 5px 13px;margin-right: 10px;}a.buttonmauiohonethaiaiti-trang {background: #eee;}a.buttonmauiohonethaiaiti-vang {background: #ff0;}a.buttonmauiohonethaiaiti-xam {background: #999;}</style>
    Chúc bạn thực hiện thành công. Mọi thắc mắc vui lòng để lại comment phía dưới và đừng quên nhấn Like và chia sẻ để Tác Giả có thể chia sẻ nhiều thủ thuật hữu ích khác.

Bình luận & Góp ý

0 nhận xét:

Đăng nhận xét