Hướng dẫn điều hướng trong html
Trong bài này, chúng ta sẽ cùng xây dựng một thanh điều hướng Show
Trước khi bắt đầu, hãy để mình giả định là bạn đến từ series bài viết về CSS mà mình đang thực hiện. Và như vậy thì tính tới thời điểm hiện tại, chúng ta đang có trong tay thêm một vài công cụ mới để sử dụng ở đây:
Và... đây là kết quả mà chúng ta dự kiến.
Bài viết này chỉ là một ví dụ, bạn có thể sử dụng phong cách trang trí riêng với font chữ và màu sắc yêu thích cho thiết kế mà bạn muốn sử dụng cho trang web của bạn. 1. Hãy để mọi thứ bắt đầuĐầu tiên, chúng ta sẽ cấu trúc thanh điều hướng với một
Có thứ gì đó hơi lạ ở đây, một thẻ mới Tiếp theo, chúng ta cần thêm vào các liên kết điều hướng trong nội bộ trang web và các liên kết gắn tới các mạng xã hội. Chúng ta cũng sẽ giả định rằng các liên kết này sẽ có cùng phong cách hiển thị (kích thước, cỡ chữ, màu chữ, hiệu ứng trỏ chuột, ...) Và như vậy thì chúng ta sẽ nhóm các liên kết này bằng một tên
2. Viết code CSS cho các thiết bị màn hình lớnSẽ có nhiều người khác trên Trái Đất này nói với bạn rằng bạn nên viết code CSS cho các thiết bị có màn hình nhỏ trước bởi vì cái Tác vụ này có thể được chia nhỏ thành các tác vụ phụ như sau:
2.1 Dàn vị trí 2 danh sách liên kếtTheo mặc định thì 2 danh sách liên kết mà chúng ta tạo ra khi được đóng gói bằng thẻ Để di chuyển khối Bạn cũng có thể cân nhắc luôn việc gắn cố định thanh điều hướng ở trên đầu của khung hiển thị trình duyệt web bằng cách sử dụng Tới đây thì chúng ta sẽ thiết lập màu sắc cho các liên kết trước hết, bởi vì điều này sẽ giúp cho chúng ta có thể nhận biết được kích thước của các liên kết. Chúng ta cũng sẽ lược bỏ luôn hiệu ứng gạch chân nội dung chữ của các liên kết. Để thiết lập kích thước cho các liên kết, chúng ta sẽ sử dụng Bản thân mình thì khá thích những hiệu ứng chuyển biến nhẹ nhàng và trong ví dụ này thì mình sẽ sử dụng hiệu ứng giống như của Github. Khi người dùng di chuyển trỏ chuột tới
một liên kết thì màu chữ sẽ được làm tối đi một chút, ngoại trừ logo. Bây giờ là lúc mà chúng ta cần sử dụng tới cú pháp truy vấn thiết bị Trước khi nói về những công việc mà chúng ta cần phải thực hiện, hãy thu nhỏ cửa sổ trình duyệt
web của bạn để xem thanh điều hướng của chúng ta sẽ được hiển thị như thế nào trên thiết bị di động. Từ kết quả đang được hiển thị thì chúng ta đã có thể gạch đầu dòng những nội dung cần xử lý rồi: Ở phần trên, chúng ta đã sử dụng thiết lập Thông thường thì tác vụ này sẽ được xử lý bằng một ngôn ngữ khác nữa có tên gọi là JavaScript. Tuy nhiên thì tính cho tới thời điểm này chúng ta vẫn chưa được gặp JS, vì vậy nên chúng ta sẽ triển khai theo cách của CSS. Cụ thể là chúng ta sẽ sử dụng một Khi Tất cả chúng ta đều biết là các Chúng ta hiển nhiên cũng sẽ muốn Xin chúc mừng!!! Bạn đã xây dựng xong một thanh điều hướng Có thể bạn cũng sẽ muốn bổ sung thêm một vài đường viền để phân tách 2 danh
sách liên kết và nút nhấn đóng/mở trước khi dọn dẹp và lưu lại code. Dưới đây là code mà mình đã thu gọn xong và có bổ sung 1 chút điều chỉnh để thanh điều hướng trông được hoàn thiện hơn theo chủ ý cá nhân. Bạn có thể lưu lại để tham khảo hoặc bỏ qua cũng được. Vậy là tổng cộng chúng ta đã phải viết khoảng ~100 dòng code CSS để xây dựng một thanh điều hướng
Bạn đã sẵn sàng học thêm những kiến thức mới để kiến tạo tốt hơn? [CSS] Bài 13 - Cú
Pháp Truy Vấn Thiết Bị |