Trong bài viết tuần này, tôi muốn bắt đầu ngay việc xây dựng một thanh điều hướng đơn giản bằng HTML và CSS. Hãy … Được gắn thẻ với html, css, webdev, người mới bắt đầu.

Bạn đang xem : cách tạo thanh điều hướng trong html css

Trong bài viết tuần này, tôi muốn bắt đầu ngay việc xây dựng một thanh điều hướng đơn giản bằng HTML và CSS . Hãy xem thiết kế mà chúng tôi sẽ xây dựng và xem xét các yêu cầu.

Mục lục:



Những gì chúng tôi đang xây dựng

Chúng tôi sẽ xây dựng một thanh điều hướng đơn giản với HTML và CSS. Chúng tôi sẽ sử dụng thiết kế dưới đây làm kim chỉ nam cho thành phần của chúng tôi.

final-navbar.png



Yêu cầu

Dưới đây là các yêu cầu chúng tôi cần để tạo thanh điều hướng.

  • Màu nền của thanh điều hướng là # 333333
  • Màu nền khi di chuột qua thanh điều hướng là # 272727
  • Màu nền hoạt động của thanh điều hướng là # 272727
  • Màu văn bản là # e7e7e7
  • Kích thước phông chữ thương hiệu là 24px
  • Các liên kết phải có 24px đệm xung quanh
  • RS phải là một liên kết



Thực hiện



Bước 1

Điều đầu tiên tôi làm là tự hỏi bản thân xem những yếu tố nào có thể có ý nghĩa để xây dựng thanh điều hướng. Với HTML, chúng tôi biết rằng chúng tôi có các yếu tố ngữ nghĩa mà chúng tôi có thể lựa chọn. Trong trường hợp này, vì chúng tôi biết đó là một thành phần điều hướng, chúng tôi sẽ sử dụng phần tử nav làm vùng chứa gói của chúng tôi. Cũng hãy thêm một lớp navbar để chúng ta có thể áp dụng các kiểu sau này

  

& lt; nav

class =

" navbar "

& gt; & lt; / nav & gt;

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình



Bước 2

Tiếp theo, tôi sẽ xem xét nội dung bên trong điều hướng.

Tôi sẽ chia nội dung thành hai phần:

  1. Nội dung thương hiệu
  2. Các mục điều hướng

Lý do tôi chia nhỏ điều này là vì nội dung thương hiệu không nhất thiết phải là một mục điều hướng và tôi muốn HTML có ý nghĩa chính xác.



Bước 3

Tiếp theo, hãy triển khai tùy chọn một từ Bước 2, Nội dung thương hiệu. Vì chúng tôi biết từ các yêu cầu, nó cần phải là một liên kết nên tôi sẽ sử dụng thẻ liên kết. Tôi cũng sẽ thêm tên lớp của thương hiệu để chúng ta có thể tạo kiểu cho nó sau.

Mã của chúng tôi bây giờ sẽ trông giống như sau:

  

& lt; nav

class =

" navbar "

& gt;

& lt; a

class =

"thương hiệu"

href =

" # "

& gt;

RS

& lt; / a & gt ;

& lt; / nav & gt;

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

brand-not-styled.png



Bước 4

Tiếp theo, hãy triển khai tùy chọn hai từ Bước 2, các mục điều hướng. Tôi sẽ phân loại chúng như một danh sách các liên kết. Để đảm bảo cấu trúc HTML của chúng tôi có ngữ nghĩa, tôi sẽ sử dụng một danh sách để cấu trúc các mục.

Mã của chúng tôi bây giờ sẽ trông giống như sau:

  

& lt; nav

class =

" navbar "

& gt;

& lt; a

class =

"thương hiệu"

href =

" # "

& gt;

RS

& lt; / a & gt ;

& lt; ul & gt;

& lt; li & gt;

& lt; a

href =

"#"

& gt;

Blog

& lt; / a & gt;

& lt; / li & gt;

& lt; li & gt;

& lt; a

href =

"#"

& gt;

Giới thiệu về

& lt; / a & gt;

& lt; / li & gt;

& lt; li & gt;

& lt; a

href =

"#"

& gt;

Hồ sơ

& lt; / a & gt;

& lt; / li & gt;

& lt; li & gt;

& lt; a

href =

"#"

& gt;

Liên hệ

& lt; / a & gt;

& lt; / li & gt;

& lt; / ul & gt;

& lt; / nav & gt;

Vào chế độ toàn màn hình

Xem Thêm  Phương thức Java String CompareTo () - so sánh với phương pháp java

Thoát chế độ toàn màn hình

navbar-unstyled.png



Bước 5

Tiếp theo, hãy bắt đầu thêm một số kiểu. Tôi sẽ sử dụng flexbox (kiểm tra CSS-TRICKS để có giải thích chuyên sâu về flexbox) để căn chỉnh thương hiệu và điều hướng theo chiều ngang và bắt đầu thêm một số kiểu bắt buộc.

Phong cách của chúng tôi bây giờ sẽ giống như sau:

  

/ * Chúng tôi không muốn bất kỳ liên kết nào bị gạch chân. Hãy xóa nó trên toàn cầu * /

a

{

text-decoration

:

không có

;

}

. navbar

{

background-color

:

# 333333

;

display

:

flex

;

/ * hãy căn chỉnh các mục để mọi thứ đều đẹp và chính giữa * /

align-items

:

center

;

}

/ * Chúng tôi muốn tất cả các liên kết trong thanh điều hướng là # e7e7e7 * /

. navbar

a

{

color

:

# e7e7e7

; < / p>

}

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

navbar-begin-styles.png

Bước 6

Tiếp theo, hãy tạo kiểu cho danh sách. Vì chúng ta muốn danh sách nằm ngang, chúng ta có thể sử dụng lại flexbox để đạt được điều này.

Kiểu danh sách của chúng tôi sẽ giống như sau:

  

. navbar

ul

{

/ * Hãy đặt lại lề và phần đệm của danh sách để nó phẳng. * /

margin

:

0

;

padding

:

0

;

/ * Hãy xóa các gạch đầu dòng * /

list-style-type

:

không

;

/ * hiển thị linh hoạt danh sách và căn chỉnh các mục ở giữa * /

display

:

flex

;

align-items

:

center

;

}

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Về tổng thể, kiểu của chúng tôi sẽ trông như thế này:

  

/ * Chúng tôi không muốn bất kỳ liên kết nào bị gạch chân. Hãy xóa nó trên toàn cầu * /

a

{

text-decoration

:

không có

;

}

. navbar

{

background-color

:

# 333333

;

display

:

flex

;

/ * hãy căn chỉnh các mục để mọi thứ đều đẹp và chính giữa * /

align-items

:

center

;

}

/ * Chúng tôi muốn tất cả các liên kết trong thanh điều hướng là # e7e7e7 * /

. navbar

a

{

color

:

# e7e7e7

; < / p>

}

. navbar

ul

{

/ * Hãy đặt lại lề và phần đệm của danh sách để nó phẳng. * /

margin

:

0

;

padding

:

0

;

/ * Hãy xóa các gạch đầu dòng * /

list-style-type

:

không

;

/ * hiển thị linh hoạt danh sách và căn chỉnh các mục ở giữa * /

display

:

flex

;

align-items

:

center

;

}

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

navbar-list-flex.png



Bước 7

Tiếp theo, hãy tạo kiểu cho thương hiệu và các liên kết điều hướng. Chúng tôi cần thêm khoảng cách xung quanh thương hiệu và các liên kết.

Kiểu liên kết và thương hiệu của chúng tôi sẽ trông như thế này:

  

. navbar

. brand

{< / p>

display

:

block

;

color

:

# e7e7e7

; < / p>

/ * Xóa phần đệm từ trên / dưới và thêm phần đệm 24px sang phải / trái * /

padding

:

0

24px

;

font-size

:

24px

;

}

. navbar

ul

li

a < / p>

{

color

:

# e7e7e7

; < / p>

padding

:

24px

;

/ * Hãy tạo khối hiển thị neo. Điều này sẽ đảm bảo khi chúng ta di chuột, lấy tiêu điểm hoặc đang hoạt động, chúng ta có được toàn bộ chiều rộng và chiều cao của thùng chứa. * /

display

:

block

;

}

/ * Khi sử dụng di chuột qua hoặc tập trung vào một liên kết, thay đổi nền * /

. navbar

ul

a

: di chuột

,

. navbar

ul

a

: tiêu điểm

{

background-color

:

# 272727

;

}

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Về tổng thể, kiểu của chúng tôi sẽ trông như thế này:

  

/ * Chúng tôi không muốn bất kỳ liên kết nào bị gạch chân. Hãy xóa nó trên toàn cầu * /

a

{

text-decoration

:

không có

;

}

. navbar

{

background-color

:

# 333333

;

display

:

flex

;

/ * hãy căn chỉnh các mục để mọi thứ đều đẹp và chính giữa * /

align-items

:

center

;

}

/ * Chúng tôi muốn tất cả các liên kết trong thanh điều hướng là # e7e7e7 * /

. navbar

a

{

color

:

# e7e7e7

; < / p>

}

. navbar

ul

{

/ * Hãy đặt lại lề và phần đệm của danh sách để nó phẳng. * /

margin

:

0

;

padding

:

0

;

/ * Hãy xóa các gạch đầu dòng * /

list-style-type

:

không

;

/ * hiển thị linh hoạt danh sách và căn chỉnh các mục ở giữa * /

display

:

flex

;

align-items

:

center

;

}

. navbar

. brand

{

/ * Hãy tạo khối hiển thị neo. Điều này sẽ đảm bảo khi chúng ta có được toàn bộ chiều rộng của thùng hàng. * /

display

:

block

;

color

:

# e7e7e7

; < / p>

/ * Xóa phần đệm từ trên / dưới và thêm phần đệm 24px sang phải / trái * /

padding

:

0

24px

;

font-size

:

24px

;

}

. navbar

ul

li

a < / p>

{

color

:

# e7e7e7

; < / p>

padding

:

24px

;

/ * Hãy tạo khối hiển thị neo. Điều này sẽ đảm bảo khi chúng ta di chuột, lấy tiêu điểm hoặc đang hoạt động, chúng ta có được toàn bộ chiều rộng và chiều cao của thùng chứa. * /

display

:

block

;

}

/ * Khi sử dụng di chuột qua hoặc lấy tiêu điểm, một liên kết sẽ thay đổi nền * /

. navbar

ul

a

: di chuột

,

. navbar

ul

a

: tiêu điểm

{

background-color

:

# 272727

;

}

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

navbar-without-active.png



Bước 8

Tiếp theo, chúng tôi cần một phần cuối cùng, tạo kiểu cho liên kết điều hướng đang hoạt động.

Đầu tiên, hãy cập nhật HTML để thêm lớp active vào liên kết About .

  

& lt; nav

class =

" navbar "

& gt;

& lt; a

class =

"thương hiệu"

href =

" # "

& gt;

RS

& lt; / a & gt ;

& lt; ul & gt;

& lt; li & gt;

& lt; a

href =

"#"

& gt;

Blog

& lt; / a & gt;

& lt; / li & gt;

& lt; li & gt;

& lt; a

class =

"hoạt động"

href =

" # "

& gt;

Giới thiệu về

& lt; / a & gt ;

& lt; / li & gt;

& lt; li & gt;

& lt; a

href =

"#"

& gt;

Hồ sơ

& lt; / a & gt;

& lt; / li & gt;

& lt; li & gt;

& lt; a

href =

"#"

& gt;

Liên hệ

& lt; / a & gt;

& lt; / li & gt;

& lt; / ul & gt;

& lt; / nav & gt;

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Tiếp theo, hãy thêm kiểu hoạt động . Vì kiểu hiện hoạt giống với tiêu điểm và di chuột, chúng tôi có thể thêm kiểu hiện hoạt vào đó:

  

. navbar

ul

a

: di chuột

,

. navbar

ul

a

: tiêu điểm

,

. navbar

ul

. active

{

background-color

:

# 272727

;

}

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Về tổng thể, kiểu của chúng tôi sẽ trông như thế này:

  

/ * Chúng tôi không muốn bất kỳ liên kết nào bị gạch chân. Hãy xóa nó trên toàn cầu * /

a

{

text-decoration

:

không có

;

}

. navbar

{

background-color

:

# 333333

;

display

:

flex

;

/ * hãy căn chỉnh các mục để mọi thứ đều đẹp và chính giữa * /

align-items

:

center

;

}

/ * Chúng tôi muốn tất cả các liên kết trong thanh điều hướng là # e7e7e7 * /

. navbar

a

{

color

:

# e7e7e7

; < / p>

}

. navbar

ul

{

/ * Hãy đặt lại lề và phần đệm của danh sách để nó phẳng. * /

margin

:

0

;

padding

:

0

;

/ * Hãy xóa các gạch đầu dòng * /

list-style-type

:

không

;

/ * hiển thị linh hoạt danh sách và căn chỉnh các mục ở giữa * /

display

:

flex

;

align-items

:

center

;

}

. navbar

. brand

{

/ * Hãy tạo khối hiển thị neo. Điều này sẽ đảm bảo khi chúng ta có được toàn bộ chiều rộng của thùng hàng. * /

display

:

block

;

color

:

# e7e7e7

; < / p>

/ * Xóa phần đệm từ trên / dưới và thêm phần đệm 24px sang phải / trái * /

padding

:

0

24px

;

font-size

:

24px

;

}

. navbar

ul

li

a < / p>

{

color

:

# e7e7e7

; < / p>

padding

:

24px

;

/ * Hãy tạo khối hiển thị neo. Điều này sẽ đảm bảo khi chúng ta di chuột, lấy tiêu điểm hoặc đang hoạt động, chúng ta có được toàn bộ chiều rộng và chiều cao của thùng chứa. * /

display

:

block

;

}

/ * Khi người dùng di chuột qua, tiêu điểm hoặc nếu liên kết đang hoạt động, hãy thay đổi nền * /

. navbar

ul

a

: di chuột

,

. navbar

ul

a

: tiêu điểm

,

. navbar

ul

. active

{

background-color

:

# 272727

;

}

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

final-navbar.png

Mã đầy đủ bên dưới qua codepen:



Sự kết luận

Với một số kiến ​​thức cơ bản về HTML và CSS, chúng tôi có thể tạo thành phần thanh điều hướng hoạt động đầy đủ.

Nếu bạn chưa theo dõi, vui lòng theo dõi tôi trên Twitter ( @RoccoSangllino ), nơi tôi chia sẻ thêm thông tin về phát triển web.


Xem thêm những thông tin liên quan đến chủ đề cách tạo thanh điều hướng trong html css

Sử dụng CSS trong HTML

alt

  • Tác giả: F8 Official
  • Ngày đăng: 2020-01-30
  • Đánh giá: 4 ⭐ ( 8159 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tham gia các khóa học MIỄN PHÍ tại F8 tại đây nhé (đã quyết định theo thì hãy cố gắng đến cùng):
    1. Kiến thức & cái nhìn tổng quan về ngành: https://fullstack.edu.vn/courses/lessons-for-newbie
    2. Code giao diện trang web với HTML, CSS: https://fullstack.edu.vn/courses/html-css
    3. Xử lý hiển thị tốt giao diện trên nhiều thiết bị khác nhau (responsive): https://fullstack.edu.vn/courses/responsive-web-design
    4. Lập trình Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
    5. Lập trình Javascript nâng cao: https://fullstack.edu.vn/courses/javascript-nang-cao
    6. Lập trình Backend với Node & ExpressJS: https://fullstack.edu.vn/courses/nodejs

[Bootstrap] Phần 19: Thanh điều hướng

  • Tác giả: www.dammio.com
  • Đánh giá: 4 ⭐ ( 1792 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tạo Thanh Cuộn Dọc Trong Html & Css, Thêm Thanh Cuộn Ngang Vào Bảng Html

  • Tác giả: muare60s.vn
  • Đánh giá: 5 ⭐ ( 7194 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: – Thông thường, khi

[HTML + CSS] Xây Dựng Thanh Điều Hướng Responsive

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 8272 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này, chúng ta sẽ cùng xây dựng một thanh điều hướng responsive sử dụng HTML và CSS. Bài viết này là một phần của bài CSS số 13 trong Series Tự Học Lập Trình Web Một Cách Thật Tự Nhiên mà mìn…

Điều hướng trong website (navigation)

  • Tác giả: ngocminhtran.com
  • Đánh giá: 4 ⭐ ( 3682 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu Một website được thiết kế tốt nếu nó có một hệ thống điều hướng tốt – gồm các khía cạnh như hệ thống menu (thực đơn), cấu trúc website hay khả năng chuyển từ trang này sang trang khác một cách hợp lý. Với một hệ thống điều hướng tốt, người dùng sẽ…

Bài 30: Thanh điều hướng dọc trong CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 5 ⭐ ( 9036 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này chúng ta sẽ đi tìm hiểu cơ bản về thanh điều hướng dọc – Vertical navigation bar để tạo menu điều hướng các mục chính cho website…

Cách tạo menu điều hướng thả xuống với HTML5, CSS3 và JQuery

  • Tác giả: code.tutsplus.com
  • Đánh giá: 4 ⭐ ( 3826 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, chúng tôi sẽ tìm hiểu và xem chúng ta có thể làm gì với HTML5 và CSS3 khi nói đến một bộ phận các website hiện tại: menu điều hướng…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php