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ị:
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>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.
<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>
0 nhận xét:
Đăng nhận xét