Thiết Kế Web

Tạo menu ngang đơn giản bằng CSS và HTML

Bài trước mình đã hướng dẫn các bạn Các lệnh thường gặp trong CSS và cách Phân biệt ID và Class trong CSS như thế nào. Tiếp theo bài viết hôm mình sẽ hướng dẫn các bạn tạo một menu …

Bài trước mình đã hướng dẫn các bạn Các lệnh thường gặp trong CSS và cách Phân biệt ID và Class trong CSS như thế nào. Tiếp theo bài viết hôm mình sẽ hướng dẫn các bạn tạo một menu ngang đơn giản bằng CSS và HTML. Nếu như bạn nào đã đọc các bài viết khác của mình thì sẽ dễ hiểu và sẽ dễ dàng hơn.

Đầu tiên chúng ta tạo file menu.html và thiết kế HTML để có được một menu ngang như sau.

Untitled-1_03

Và dưới đây là mã HTML mình viết trong file menu.html

Sau khi viết mã HTML vào file menu.html các bạn ra ngoài chạy thử thì sẽ chưa thấy xuất hiện hình dạng một thanh menu ngang phải không. Các bạn yên tâm để làm cho nó trở thành một thanh menu ngang tuyệt đẹp thì chúng ta sẽ CSS để chính sửa nó. Và bây giờ chúng ta sẽ viết một file CSS riêng bên ngoài rồi các bạn dẫn nó vào file HTML hoặc các bạn có thể viết trực tiếp trong phần thẻ <head> của file HTML nhé.

Còn mình thì sẽ tạo một file style.css và viết các lệnh CSS ở đó rồi dẫn nó vào file HTML cho nó chuyên nghiệp. Dưới đây là các lệnh mình viết trong file style.css.

Sau khi các bạn viết các lệnh CSS này xong thì các bạn ra ngoài chạy file menu.html để xem kết quả như trên nhé. Chúc các bạn sẽ làm được một thanh menu ngang bằng HTML và CSS thật đẹp. Hy vọng bài viết này sẽ giúp ích cho các bạn mới bắt đầu với Thiết kế website

Thẻ:, , , ,
comments powered by Disqus
Powered by HTH Company