Thực hiện một menu ngang cho trang web của mình

menu ngang có hầu hết các trang web - đó là một phần quan trọng, vì nó có thể với sự xuất hiện và khả năng sử dụng của nó để thu hút hoặc ngược lại, xua đuổi khách. Hãy tìm hiểu làm thế nào để tạo ra một thực đơn ngang tiểu học: làm cho nó "bộ xương" sang HTML, để làm chủ các kỹ năng cơ bản của việc tạo ra. Bạn chắc chắn có thể tìm thấy một menu đã sẵn sàng, nhưng đẹp hơn nhiều để tìm hiểu làm thế nào để phát triển nó cho mình. Nó khá vui vẻ.

Tìm hiểu để làm cho thực đơn

Chúng tôi cố gắng không để đi chệch khỏi ngữ nghĩa, mà tuân theo các nhân vật hàng đầu của cách bố trí. Trước tiên, bạn phải thực hiện một "bộ xương" cho các menu của chúng tôi sang HTML, học các kỹ năng cơ bản để làm menu ngang của riêng mình. Và sau đó nó sẽ trang trí, sử dụng style sheets. Hãy menu ngang của chúng tôi bao gồm 5 hạng mục. Mục đầu tiên sẽ được chuyển đến trang chủ. Vấn đề thứ hai - "About us". Thứ ba - "giải thưởng của chúng tôi". Thứ tư - "Đó là niềm vui." Thứ năm - "Liên hệ với chúng tôi".

HTML-mã trông như thế này:

Ai không biết: tag ul được sử dụng cho các viên đạn, yếu tố của nó bắt đầu với li. Li thẻ kế thừa phong cách được áp dụng cho các ul.

Ul - yếu tố khối của danh sách, nó sẽ được kéo dài đến chiều rộng. Li cũng là một khối.

Vì vậy, tạo một index.html. Chúng tôi thu thập mã của chúng tôi. Tại thời điểm này, trình duyệt sẽ hiển thị một dọc chứ không phải là một menu ngang. Nhưng chúng tôi với bạn mục tiêu - để tạo ra một menu ngang cho trang web. Đối với điều này chúng ta cần CSS.

CSS là gì?

Nếu bạn vẫn chưa nắm vững sự phát triển của các trang web, nó là cần thiết để làm quen với các khái niệm về Cascading Style Sheets. Trong thực tế, đây là những quy tắc để định dạng, chế biến, được áp dụng đối với các yếu tố khác nhau trên các trang của một trang web. Nếu chúng tôi mô tả các thuộc tính của các yếu tố trong HTML tiêu chuẩn, bạn sẽ phải lặp lại điều này nhiều lần, bạn sẽ có được một sự trùng lặp của các mảnh cùng một đoạn mã. trang thời gian tải trên máy tính của người dùng sẽ phát triển. Để tránh điều này, có một CSS. Nó cũng đủ để mô tả một lần duy nhất một yếu tố nào đó, và sau đó chỉ cần chỉ ra nơi để sử dụng các tính chất của một phong cách riêng. Nó có thể làm cho các mô tả về không chỉ nội dung của trang đó, mà còn trong tập tin khác. Điều này sẽ cho phép áp dụng các mô tả về phong cách khác nhau trên tất cả các trang của trang web. Nó cũng thuận tiện để sửa đổi một số trang, sửa đổi CSS-file. style sheets cho phép bạn làm việc với phông chữ về mặt kĩ tốt hơn so với HTML, giúp tránh làm xấu đi các trang đồ họa của trang web.

Sử dụng Style Sheets cho sự phát triển thực đơn

CSS-mã cho menu:

1. # My_1menu {list-style: none; padding: 6; width: 800px; margin: auto;}
2. # My_1menu li {float: left; phông chữ: nghiêng 18px Arial;}
3. # My_1menu a {color: # 756; display: block; height: 55px; line-height: 55px; padding: 0px 15px 0px 15px; nền: #dfc; text-decoration: none;}
4. # My_1menu a: hover {color: #foa; background: # 788;}

Bây giờ chúng ta hãy nhìn vào kết quả đơn CSS ngang.

# My_1menu - do đó nhiệm vụ phong cách cho các phần tử với id = my_1menu, list-style UL-: none - lệnh này để loại bỏ các dấu vết của các mặt hàng theo lịch trình.

width: 800px - chiều rộng của menu của chúng tôi là 800 pixel.

padding: 0 - điều này loại bỏ các đệm bên trong.

margin: auto - vyravnivnie menu ngang ở trung tâm của trang của chúng tôi.

# My_1menu li - gán phong cách li-yếu tố.

height: 55px - Chiều cao thực đơn.

# My_1menu a: hover - gán kiểu cho phần tử và chuột khi nó được gây ra.

Chúng tôi sẽ không mô tả chi tiết tất cả các dòng, như mọi nhà phát triển có thể xác định các thông số của nó ở đây. cơ sở này về việc sử dụng phong cách trong menu trên trang web. Bạn có thể cung cấp cho nó một diện mạo hoàn chỉnh hơn và đẹp, sử dụng hình ảnh. Gán yếu tố nhưng, ví dụ, background: url (img1.png) lặp lại-x. Let there be background: url (img2.png) lặp lại-x cho a: hover.

Sử dụng trí tưởng tượng, sở thích sáng tạo của bạn. Sau đó, trên cơ sở đó kiến thức về cách tạo một menu đơn giản trên trang web, bạn có thể phát triển một trang với thiết kế độc đáo của riêng mình.