Xin chào các bạn! Trong bài viết trước, chúng ta đã cùng nhau xây dựng thành công thành phần header. Trong bài viết này, chúng ta sẽ tiếp tục với thành phần tiếp theo của trang web, đó là Slider. Hãy cùng tìm hiểu xem thành phần Slider đó là gì và cách thức tối ưu hóa nó cho SEO.
Tạo thành phần Slider
Trước khi bắt đầu, hãy xác định rõ rằng thành phần Slider là phần hiển thị ảnh chạy chuyển động trên trang web. Vì chúng ta chưa học về phần làm theo sleep, nên chúng ta sẽ thay thế ảnh nền và chỉ sử dụng chữ để hiển thị thông tin. Để làm điều này, chúng ta cần tạo ra một phần tử <div> và gán class “slider” cho nó. Ngoài ra, chúng ta cũng cần tạo ra một phần tử <img> và thêm class “slider-image” cho nó. Bạn có thể sử dụng thẻ <a> để tạo các liên kết trong slider nếu cần thiết.
<div class="slider">
<img src="image1.jpg" alt="Image 1" class="slider-image">
<img src="image2.jpg" alt="Image 2" class="slider-image">
<img src="image3.jpg" alt="Image 3" class="slider-image">
</div>Căn chỉnh kích thước của slider
Để đảm bảo kích thước chiều cao của slider luôn bằng 50% kích thước chiều rộng của nó, chúng ta cần áp dụng một số thuộc tính CSS. Đầu tiên, chúng ta sẽ xác định kích thước chiều rộng của slider bằng 100% theo chiều ngang của trình duyệt. Điều này đảm bảo rằng slider sẽ luôn rộng hết chiều ngang của trình duyệt. Còn chiều cao của slider, chúng ta sẽ tính toán dựa trên tỷ lệ của chiều rộng. Ví dụ, nếu chiều rộng của slider là 800px, thì chiều cao của nó sẽ là 400px.
.slider {
width: 100%;
height: calc(50% * width);
}Lưu ý: Kỹ thuật tính kích thước chiều cao của ảnh nền theo tỷ lệ đã được giới thiệu ở các bài học trước, các bạn hãy xem lại để hiểu rõ hơn.
Căn giữa vị trí của slider
Tiếp theo, chúng ta sẽ căn giữa vị trí của slider để đảm bảo rằng nó luôn nằm ở giữa trang web. Có nhiều cách để làm điều này, nhưng trong bài viết này mình sẽ trình bày hai cách căn giữa được sử dụng phổ biến nhất.
Cách 1: Sử dụng thuộc tính CSS “margin”
Đầu tiên, chúng ta sẽ căn giữa vị trí của slider sử dụng thuộc tính CSS “margin”. Để làm điều này, chúng ta sẽ đặt giá trị “auto” cho thuộc tính “margin-left” và “margin-right”. Điều này giúp slider tự động dịch chuyển vào vị trí giữa theo chiều ngang.
.slider {
width: 100%;
height: calc(50% * width);
margin-left: auto;
margin-right: auto;
}Cách 2: Sử dụng thuộc tính CSS “flexbox”
Cách thứ hai để căn giữa vị trí của slider là sử dụng thuộc tính CSS “flexbox”. Để làm điều này, chúng ta sẽ đặt giá trị “display” của phần tử container là “flex” và sử dụng thuộc tính “justify-content” để căn giữa.
.slider {
width: 100%;
height: calc(50% * width);
display: flex;
justify-content: center;
}Kết luận
Trong bài viết này, chúng ta đã tìm hiểu cách tối ưu hóa từ khóa SEO cho thành phần Slider CSS. Chúng ta đã tìm hiểu cách tạo ra thành phần Slider, cách căn chỉnh kích thước và vị trí của nó để đảm bảo hiệu quả cao nhất. Hy vọng bài viết này đã giúp bạn hiểu rõ hơn và áp dụng vào công việc SEO của mình. Đừng quên ghé thăm website COMDY để cập nhật thêm các thông tin hữu ích!