Chào tất cả mọi người.
Chào mừng trở lại.
Vì nó là tuần thứ tư và
bạn đang làm việc cho dự án cuối cùng của bạn, những gì tôi muốn làm là loại cho bạn thấy
một số tùy chọn khác nhau mà bạn có thể sử dụng khi bạn đang tạo kiểu trang của bạn.
Và trong video này,
tôi muốn cho bạn thấy điều gì sẽ xảy ra khi bạn cố gắng tạo thanh điều hướng thẳng đứng.
Vì vậy, ở đây trong trình duyệt của
tôi, tôi có những gì trang sẽ trông giống như khi chúng tôi hoàn tất.
Nhưng chúng ta hãy tiếp tục và tôi sẽ nhấn làm mới và trước tiên xem nó sẽ trông như thế nào
nếu tôi cố gắng tạo thanh điều hướng bằng cách sử dụng bốn liên kết đơn giản.
Một lần nữa, các liên kết là nội tuyến, vì vậy chúng đi cạnh nhau. Không
có màu nào cả.
Chẳng có gì xảy ra cả.
Và nó thực sự rất kinh khủng.
Vì vậy, hãy để tôi đưa phong cách đó trở lại.
Làm mới trang.
Và tôi sẽ chỉ cho các bạn cách tôi tạo ra thanh điều hướng này.
Hãy bắt đầu bằng cách nói về cơ thể.
Tôi chỉ cần đặt trong một số màu nền, đệm, và lề. Điều
đó không thực sự quan trọng ở đây.
Điều quan trọng là nói về phần điều hướng của chúng tôi.
Một trong những điều tôi muốn làm là cho bạn thấy ý tưởng
sử dụng hộp biên giới có kích thước hộp đó.
Điều này sẽ làm là nó lấy đi sự cần thiết cho
bạn để đếm lên bao nhiêu chiều rộng, bao nhiêu đệm, bao nhiêu biên giới.
Anh không cần phải làm toán đâu.
Trình duyệt sẽ làm điều đó cho bạn.
Tôi đặt trong một số đường viền đơn giản, màu sắc, màu nền, vv
Điều đầu tiên tôi đã làm, mặc dù, là tôi đã làm cho nó inline-block,
bởi vì tôi muốn điều hướng của tôi được bên cạnh các phần khác của trang của tôi.
Và vì nav bị chặn, nó sẽ không xảy ra trừ khi tôi ném nó vào đó.
Vì vậy, tôi nói tôi muốn nó được khoảng 20% của trang và sau đó thêm một số lề.
Bây giờ, một cái gì đó mới mà bạn có thể chưa từng thấy trước đó là ý tưởng về chiều cao
bằng 100vh.
Đó là chiều cao khung nhìn của anh.
Vì vậy, điều này có nghĩa là tôi muốn điều hướng chiếm toàn bộ chiều cao của trang của bạn.
Tôi không cứng phủ nó lên 400 pixel hoặc 200 pixel, vì
tôi không biết màn hình lớn như thế nào mà bạn đang nhìn vào.
Tiếp theo, chúng ta hãy nói về độ dài thực tế của mình.
Những gì tôi đã đi vào và làm là tôi đã lấy đi các liên kết nhàm chán thường xuyên và
tôi đã thực sự tạo kiểu chúng để làm cho chúng một cái gì đó độc đáo hơn một chút.
Vì vậy, tôi đặt trong một chiều cao của tôi cao như thế nào tôi muốn mỗi một trong những liên kết của tôi được.
Và sau đó tôi đưa vào một chút của một thủ thuật và
tôi nói tôi muốn chiều cao của đường thẳng là 45 pixel.
Vậy tại sao tôi phải làm thế?
Lý do sẽ là tôi muốn tập trung ảnh gia đình hoặc
tôi muốn tập trung các từ bên trong nó và đây là cách tôi có thể làm điều đó.
Loại tiếp theo của điều thú vị mà tôi đã làm là tôi đã thêm một hình nền.
Tôi đã thêm những mũi tên nhỏ này.
Và điều tuyệt vời mà tôi phải làm điều đó tôi muốn thực sự chỉ ra cho bạn là
tôi không thể chỉ liên kết đến thư mục và sau đó là tập tin.
Bởi vì cách tôi thiết lập mã của tôi, đầu tiên tôi cần phải nói, oh, tôi biết tôi đang ở trong
thư mục CSS ngay bây giờ, vì vậy tôi sẽ quay trở lại thư mục chính của tôi và sau đó tìm hình ảnh.
Nếu điều này gây khó hiểu cho bạn, đừng lo lắng.
Đó là một khái niệm hoàn toàn mới, nhưng đó là điều mà rất nhiều bạn sẽ
gặp phải khi bạn cố gắng liên kết hình ảnh từ bảng phong cách của bạn.
Được rồi.
Điều cuối cùng tôi đã làm là chỉ cần thêm vào một miếng đệm nhỏ, vì vậy có chỗ cho
hình ảnh, và sau đó thêm một số lề.
Vì vậy, sử dụng những điều khác nhau mà chúng tôi đã nói về, vị trí, xin lỗi,
hiển thị, chiều cao dòng, URL nền, chúng tôi đã có thể làm cho một cái gì đó
mà tôi nghĩ trông thực sự tuyệt vời cho một thanh điều hướng đơn giản, dọc.
Cứ thử đi.
Chúc may mắn.