Một trong những khía cạnh quan trọng nhất trong phát triển phần mềm và trang web là tạo menu. Microsoft và đứa con tinh thần nổi tiếng nhất của hãng, hệ điều hành Windows, nên được lấy làm ví dụ điển hình. Mặc dù sản phẩm này được đại đa số người dùng PC trên thế giới tin dùng, nhưng những lời chỉ trích không những không giảm mà còn không ngừng tăng lên. Về cơ bản, nó liên quan đến sự bất tiện về vị trí của các mục trong menu. Sau đây là mô tả về cách tạo menu trong CSS và Web Biểu thức.
Hướng dẫn
Bước 1
Để bắt đầu tạo menu ngang, hãy chuyển đến Quản lý kiểu, sau đó nhấp vào nút Kiểu mới. Đặt tên cho kiểu mới Selector ul li. Quan trọng! Đảm bảo rằng tệp được tạo có phần mở rộng drop-down.css. Để tạo menu ngang, hãy cho phần tử đã tạo biết rằng nó sẽ nằm ngang chính xác. Tiếp theo, xác định chiều rộng của từng mục menu và loại bỏ tất cả các điểm không cần thiết được đặt trước tất cả các mục trong danh sách.
Bước 2
Vào tùy chọn Layout, đặt thuộc tính Display thành Inline để thực hiện căn chỉnh theo chiều ngang. Tiếp theo, đặt giá trị Left thành thuộc tính Float và nhấp vào nút Áp dụng. Đặt tất cả các mục danh sách thành một dòng. Để chúng được đặt ngay ngắn và không nằm chồng lên nhau, trong thuộc tính Width, hãy đặt giá trị Vị trí thành 150 px. Kiểm tra xem tất cả các phần tử của danh sách có cùng kích thước hay không. Tiếp theo, loại bỏ các dấu chấm ở phía trước của tất cả các phần tử - đối với điều này, hãy chuyển đến thuộc tính List và đặt tham số None trong mục Kiểu kiểu danh sách. Nhấn OK để tất cả các thay đổi được chấp nhận và áp dụng.
Bước 3
Điều chỉnh kích thước và kiểu phông chữ cho ul li. Để thực hiện việc này, hãy vào Manage Styles và nhấp chuột phải vào ul li, sau đó chọn Modify Style. Hộp thoại quen thuộc sẽ xuất hiện. Vào Font, chọn thuộc tính Font-family và đặt nó thành Sans-serif, Arial, Helvetica. Tiếp theo, điều chỉnh kích thước phông chữ bằng cách đặt nó thành 0, 9. Sau đó, đặt thuộc tính Text-biến đổi thành Chữ hoa. Điều chỉnh chiều cao của các mục menu trong thuộc tính Chiều cao - Vị trí, đặt giá trị thành 30 px.
Bước 4
Sau khi hoàn thành tất cả các hành động sửa chữa, hãy lưu tệp dưới dạng menu.html. Tiếp theo, hãy kiểm tra menu đã tạo trong các trình duyệt khác nhau để đảm bảo nó hoạt động chính xác. Như bạn thấy, thiết kế của menu ngang khá đơn giản.
