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>
Nguồn : ThaiAiTi
0 Nhận Xét
Hãy để lại bình luận của bạn