April 18, 2025

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.
Nguồn : ThaiAiTi

Đăng nhận xét

Emoticon
:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

Đăng nhận xét

    Biểu mẫu liên hệ

    Tên

    Email *

    Thông báo *

    Được tạo bởi Blogger.