Tạo menu ngang đơn giản một cấp với Html và Css (P1)

0
408

[VIDEO TUT]

  • Đang cập nhật…
Bấm Subscribe Nhận video học mới nhất :

1. Tạo menu đơn giản với html-css

  • Thường thì khi tạo một giao diện điều quan trọng và thường chúng ta hay làm đầu tiên là nghĩ xem nên tạo menu như nào và tạo menu kiểu gì. Thực tế có rất nhiều mẫu menu đa dạng và đẹp trên các diễn đàn nhưng trong bài viết hôm nay mình sẽ giới thiệu với các bạn một mẫu menu đơn giản được tạo bằng html và css

2. Tạo menu

  • Việc làm đầu tiên mà các bạn cần làm đó là tạo một file index.html và chúng ta sẽ làm việc với file này. Rồi chúng ta bắt đầu với mã HTML trước :

  • Chúng ta nhận được kết quả hiển thị trên trình duyệt:

1

  • Công việc tiếp theo là ta đi xóa bỏ các chấm tròn do các thành phần <ul> tạo ra. Ta có đoạn CSS sau:

  • Tiếp theo ta tạo các đoạn mã CSS để xóa các dấu gạch chân, đổ màu và tạo các thuộc tính cho thành phần chữ trong thẻ <a> với nội dung CSS như sau:

 

  • Rồi như vậy là ta đã tạo xong thanh menu với các đoạn mã html css rất đơn giản và gọn nhẹ rồi đúng không giờ cùng kiểm tra trên trình duyệt nhé:

3. Hiển thị trên trình duyệt1

 

 

 

4. Lời kết

  • Như vậy là trong bài viết này mình đã chia sẻ với các bạn cách tạo một menu đơn giản với các thành phần thẻ <ul><li> . Hi vọng sẽ giúp ích được cho các bạn mới bắt đầu làm quen với thiết kế website. Xin chào chúc các bạn học thật tốt.

Các bài học html liên quan:

Tác giả : Hà Trần Vietpro

[Total: 1    Average: 5/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here