50 thẻ html

Menu là một trong những yếu tố quan trọng nhất đối với mọi trang web. Về cơ bản, đó là một tập hợp các liên kết có tùy biến cho phép khách truy cập trang đi từ trang này đến trang khác. Một số trang web có menu điều hướng ở trên cùng, có trang thì ở bên phải hoặc bên trái

Tạo menu ngang trong HTML và CSS chỉ với 5 bước

Hướng dẫn này sẽ giúp bạn tạo menu ngang trong HTML và CSS với 5 bước đơn giản dưới đây

Chương trình ưu đãi cuối năm tại Vietnix

Bước 1. Tạo HTML Mark-up

Để bắt đầu công việc tạo menu ngang trong HTML, hãy tạo một HTML mark-up bằng một liên kết dẫn đến style sheet ở bên ngoài (style. css). Nó cũng sẽ được sử dụng để tạo kiểu cho menu

Bước 2. Viết CSS cho Menu Division

Sau khi tạo xong HTML mark-up, bây giờ ta cần viết code CSS cho Menu Divsion

#menu
{
 width: 900px;
 border: 1px solid #000;
 height: 100px;
 background-color: #181818;
 font-family: Helvetica, sans-serif;
 font-size: 13px;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

Trong menu xác định phần, chiều rộng được đặt là chiều cao

#menu
{
 width: 900px;
 border: 1px solid #000;
 height: 100px;
 background-color: #181818;
 font-family: Helvetica, sans-serif;
 font-size: 13px;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

9 và chiều cao

 
  

    
Trang chủ
    
Dịch vụ
    
Sản phẩm
    
Giới thiệu
    
Liên hệ
  
  

0. Màu nền là màu đen, sáng hơn màu tiêu chuẩn (#000). Phần còn lại là xác định phông chữ, kích thước phông chữ và sử dụng CSS3

 
  

    
Trang chủ
    
Dịch vụ
    
Sản phẩm
    
Giới thiệu
    
Liên hệ
  
  

1 để tạo menu một đường cong nhỏ

>> Xem thêm. Quy ước mã là gì?

Bước 3. Thêm món vào menu

Để tạo mục menu, chúng ta cần phải sử dụng thẻ danh sách không có thứ tự (danh sách thẻ không theo thứ tự). Vui lòng thêm phần sau vào trong tài liệu HTML giữa các thẻ phân chia menu

 
  

    
Trang chủ
    
Dịch vụ
    
Sản phẩm
    
Giới thiệu
    
Liên hệ
  
  

Đối với mỗi thẻ của mục, có một thẻ neo () để tạo một liên kết. Tại thời điểm này, mọi thuộc tính

 
  

    
Trang chủ
    
Dịch vụ
    
Sản phẩm
    
Giới thiệu
    
Liên hệ
  
  

2 đều trống, do đó ta dùng ký hiệu (

 
  

    
Trang chủ
    
Dịch vụ
    
Sản phẩm
    
Giới thiệu
    
Liên hệ
  
  

3). Để tạo các liên kết thực, hãy xóa ký tự

 
  

    
Trang chủ
    
Dịch vụ
    
Sản phẩm
    
Giới thiệu
    
Liên hệ
  
  

3 và nhập URL của trang (Ví dụ. https. //vietnix. vn/tai-lieu-ky-thuat)

Chương trình ưu đãi cuối năm tại Vietnix

Bước 4. Create type for list

Sau khi thêm xong code HTML, dù thấy ổn nhưng chưa bắt mắt cho lắm, nhưng chúng ta có thể dùng code CSS menu ngang để thay đổi. Trong bước này, chúng ta sẽ tạo kiểu cho danh sách và các liên kết, giúp menu ngang CSS thêm sống động hơn

Sau khi tạo một danh sách không có thứ tự, mỗi mục đều được hiển thị theo thứ tự từ trên xuống, cùng một vòng tròn mờ xung quanh theo mặc định. Chúng ta đang muốn tạo menu ngang trong HTML chứ không phải menu dọc, do đó chúng ta cần thay đổi cấu trúc mặc định này. Đồng thời cũng cần xóa các dấu đầu dòng khỏi danh sách

Use the following command to create menu ngang bằng CSS

#menu ul
{
  margin-top:  42px;
}
#menu ul li
{
  list-style-type: none;
  display: inline;
  margin-left: 50px;
}

#menu

Phần

#menu
{
 width: 900px;
 border: 1px solid #000;
 height: 100px;
 background-color: #181818;
 font-family: Helvetica, sans-serif;
 font-size: 13px;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

1 sẽ trỏ đến danh sách không có thứ tự và di chuyển danh sách này 42px, tính từ trên cùng

#menu li

#menu
{
 width: 900px;
 border: 1px solid #000;
 height: 100px;
 background-color: #181818;
 font-family: Helvetica, sans-serif;
 font-size: 13px;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

2 sẽ bỏ dấu gạch đầu dòng

#menu
{
 width: 900px;
 border: 1px solid #000;
 height: 100px;
 background-color: #181818;
 font-family: Helvetica, sans-serif;
 font-size: 13px;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

3 để thay đổi cách hiển thị của từng mục trong danh sách từ dọc thành ngang

#menu
{
 width: 900px;
 border: 1px solid #000;
 height: 100px;
 background-color: #181818;
 font-family: Helvetica, sans-serif;
 font-size: 13px;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

4 sẽ giãn cách các mục trong danh sách ra một chút

Xem thêm. Favicon là gì?

Bước 5. Create type for links

Bước cuối cùng trong việc tạo menu ngang trong HTML đang tạo kiểu cho các liên kết

Lưu ý rằng trong tài liệu HTML, các thẻ

#menu
{
 width: 900px;
 border: 1px solid #000;
 height: 100px;
 background-color: #181818;
 font-family: Helvetica, sans-serif;
 font-size: 13px;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

5 nằm giữa các thẻ mục danh sách

#menu
{
 width: 900px;
 border: 1px solid #000;
 height: 100px;
 background-color: #181818;
 font-family: Helvetica, sans-serif;
 font-size: 13px;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

6 và các thẻ được bao quanh bởi các thẻ danh sách không có thứ tự (

#menu
{
 width: 900px;
 border: 1px solid #000;
 height: 100px;
 background-color: #181818;
 font-family: Helvetica, sans-serif;
 font-size: 13px;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

7). Ở bên ngoài là sự phân chia thực đơn (

#menu
{
 width: 900px;
 border: 1px solid #000;
 height: 100px;
 background-color: #181818;
 font-family: Helvetica, sans-serif;
 font-size: 13px;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

8

#menu
{
 width: 900px;
 border: 1px solid #000;
 height: 100px;
 background-color: #181818;
 font-family: Helvetica, sans-serif;
 font-size: 13px;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

9)

Cấu trúc này là bắt buộc để có thể tạo kiểu cho các liên kết. Constructor it as after

“Phân chia menu > Danh sách không có thứ tự > Mục danh sách > Neo / Thẻ liên kết“

Sau đó, hãy sử dụng mã sau

#menu
{
 width: 900px;
 border: 1px solid #000;
 height: 100px;
 background-color: #181818;
 font-family: Helvetica, sans-serif;
 font-size: 13px;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

3

#menu ul li a. liên kết

Đoạn này sẽ áp dụng một kiểu chung cho các liên kết trong menu

• Đầu tiên, màu của liên kết được chuyển thành màu trắng (#FFF) để dễ đọc hơn
• mã

   
    
  
      
  Trang chủ
      
  Dịch vụ
      
  Sản phẩm
      
  Giới thiệu
      
  Liên hệ
    
    
  

  0. Xóa phần gạch chân ở dưới các liên kết (theo mặc định) bằng

•  
    
  
      
  Trang chủ
      
  Dịch vụ
      
  Sản phẩm
      
  Giới thiệu
      
  Liên hệ
    
    
  

  1. Để tạo chữ viết hoa, chúng ta sử dụng

•  
    
  
      
  Trang chủ
      
  Dịch vụ
      
  Sản phẩm
      
  Giới thiệu
      
  Liên hệ
    
    
  

  2. Xác định khu vực có thể nhấp vào liên kết

Để biết rõ hơn tác dụng của phần đệm, bạn có thể thử thêm dòng

 
  

    
Trang chủ
    
Dịch vụ
    
Sản phẩm
    
Giới thiệu
    
Liên hệ
  
  

3 vào phần #menu ul li a. liên kết

Sau đó, xóa phần

 
  

    
Trang chủ
    
Dịch vụ
    
Sản phẩm
    
Giới thiệu
    
Liên hệ
  
  

4 để hoàn thiện

# đơn ul li a. đã đến thăm

Phần này giúp đảm bảo các liên kết vẫn giữ nguyên định dạng sau khi được nhấp vào

# đơn ul li a. bay lượn

Nếu di chuột đến bất kỳ liên kết nào, bạn sẽ thấy màu nền chuyển thành màu xanh lục, văn bản vẫn giữ nguyên màu trắng và có một chút bóng ở phía dưới. This is the what code on doing

Nếu bạn đang sử dụng mã nguồn WordPress thì bạn cũng có thể sửa mã WordPress bằng HTML và CSS trong giao diện của nó

Tổng kết việc tạo menu ngang trong HTML

Như vậy là ta đã hoàn tất việc tạo menu ngang trong HTML, nhìn đơn giản nhưng vẫn đủ chuyên nghiệp. Bạn hoàn toàn có thể tạo thêm nhiều menu đẹp khác nữa bằng các mã CSS và HTML. Chúc các bạn thành công

Chia sẻ bài viết

đánh giá

5/5 - (3 bình chọn)

nguyễn hưng

Conconnection with mình qua

Mình là Bo - admin của Quản Trị Linux. Mình đã có 10 năm làm việc trong mảng System, Network, Security và đã trải nghiệm qua các chứng chỉ như CCNP, CISSP, CISA, đặc biệt là chống tấn công DDoS. Gần đây mình trải nghiệm thêm Digital Marketing và đã hoàn thành chứng chỉ CDMP của PearsonVUE. Mình rất thích được chia sẻ và hỗ trợ cho mọi người, nhất là các bạn sinh viên. Please connect with mình nhé