Chào tất cả mọi người.
Chào mừng bạn trở lại với một đánh giá mã khác.
Trước đó, tôi đã tạo ra một thanh điều hướng hoạt động theo chiều dọc.
Nó đi lên và xuống.
Hôm nay, tôi chỉ muốn cho bạn thấy làm thế nào bạn có thể sử dụng cùng một mã HTML nhưng
tạo ra một thanh điều hướng ngang, thay vào đó.
Vì vậy, chúng ta hãy xem qua.
Tôi muốn đi đến một cái gì đó trông giống như thế này.
Và, không chỉ tôi đã đi đến một thanh điều hướng ngang, tôi muốn cho bạn thấy
một ví dụ về việc hiển thị trang nào là trang mà chúng tôi đang xem.
Vì vậy, nếu bạn nhận thấy, trong thanh điều hướng,
liên kết ảnh trông hơi khác so với những người khác.
Nó rất phổ biến để làm điều này kinda chỉ ra cho mọi người
đây là trang mà bạn đang xem ngay bây giờ.
Vì vậy, chúng ta hãy nhìn vào CSS và xem làm thế nào tôi đã lấy HTML đơn giản và
biến nó thành một cái gì đó mà tôi có một thanh điều hướng phong cách độc đáo.
Được rồi, chúng ta bắt đầu bằng cách nói, anh biết không?
Chúng tôi muốn tạo kiểu cho tất cả các liên kết nằm trong thanh điều hướng.
Tôi không muốn phong cách tất cả các liên kết, thay vào đó,
tôi muốn chỉ ra chỉ là các liên kết bên trong nav.
Và một khi chúng tôi làm điều đó, nó khá đơn giản cho tôi để đi trước và đặt trong đó tôi muốn
một chiều cao nhất định, một màu nền nhất định, một trang trí văn bản nhất định.
Một trong những điều tôi thêm vào đây là bán kính biên giới.
Bán kính biên giới cong các hộp, vì vậy
nếu bạn nhìn, mọi thứ đều hơi cong ở đây dọc theo cạnh.
Không có gì quan trọng ở đó cả.
Điều tiếp theo tôi có,
cái mới, là ý tưởng về việc có một lớp được gọi là hiện tại.
Những gì lớp hiện tại làm, nó về cơ bản là một cách gắn thẻ.
Hey, bạn có biết tất cả các liên kết khác nhau trên trang của tôi không?
Tôi muốn cho các bạn thấy cái nào tôi đang nhìn vào lúc này.
Và tất cả những gì tôi làm ở đây là tôi đã đi và tôi thiết lập
nó để tôi có một màu nền khác nhau.
Được rồi.
Vì vậy, nó là khá đơn giản để tạo ra
thanh điều hướng ngang này miễn là bạn rất cẩn thận về khoảng cách mọi thứ ra.
Một lần nữa, tôi chỉ muốn cho các bạn thấy rằng những thứ như đệm và
lề là rất quan trọng và chúng rất phụ gia.
Vì vậy, khi bạn sử dụng phần trăm, thay vì điểm ảnh, nó sẽ giữ cho nó khỏi được
rằng nó trông tốt trên một màn hình lớn và sau đó thực sự xấu trên một màn hình nhỏ.
Điều cuối cùng, Tôi loại đặt ở đây chỉ để có một số niềm vui và
để giúp cho bạn thấy một lần nữa một số trong những điều khác nhau bạn có thể làm với CSS,
là tôi đã thêm một trạng thái di chuột cho bất kỳ liên kết điều hướng của tôi.
Vì vậy, nếu bạn nhìn vào, tôi đã vào đây và
tôi đã nói khi ai đó di chuột qua trang, tôi muốn thay đổi màu sắc của văn bản
và tôi muốn loại bỏ toàn bộ bán kính biên giới đó.
Vì vậy, chúng ta hãy xem qua.
Đi qua đây, tôi sẽ di chuột qua công thức nấu ăn và
văn bản được chuyển từ trắng sang đen, và nó đã biến từ vòng tròn này sang hình vuông khác.
Bây giờ một lần nữa, khi tôi xem qua tất cả những ví dụ khác nhau này với bạn,
điều quan trọng là bạn nhận ra, tôi không phải là một nghệ sĩ, và tôi không phải nghệ thuật lắm.
Và tôi hy vọng rằng bạn có thể lấy những đoạn mã này và
biến nó thành một cái gì đó trông thực sự tuyệt vời và tùy chỉnh cho
trang mà bạn đang cố gắng tạo ra.
Vì vậy, đi trước, có một số niềm vui, và bây giờ cố gắng để làm cho một thanh
điều hướng đi theo tất cả các cách khác nhau, lên và xuống, đi ngang, hoặc thậm chí kết hợp.
Chúc may mắn.