Đang chuẩn bị nút TẢI XUỐNG, xin hãy chờ
Tải xuống
Các bạn có thể tải các file demo ở link sau : http://www.mediafire.com/?o4c8upd8pmlys7p Trong các web site các thanh menu đã trở thành quen thuộc và đóng một vai trò rất quan trọng.Trong bài học này chúng ta sẽ học cách sử dụng CSS để tạo nên các menu cho trang web. Trước khi đi vào vấn đề cụ thể các bạn cần chú ý rằng, thực ra menu bar của trang web cũng chỉ là một danh sách các link mà thôi.Chính vì vậy mà khi làm các menu này các bạn có thể thấy rằng các nhà phát. | Tạo menu với CSS Các bạn có thể tải các file demo ở link sau http www.mediafire.com 7o4c8upd8pmlys7p Trong các web site các thanh menu đã trở thành quen thuộc và đóng một vai trò rất quan trọng.Trong bài học này chúng ta sẽ học cách sử dụng CSS để tạo nên các menu cho trang web. Trước khi đi vào vấn đề cụ thể các bạn cần chú ý rằng thực ra menu bar của trang web cũng chỉ là một danh sách các link mà thôi.Chính vì vậy mà khi làm các menu này các bạn có thể thấy rằng các nhà phát triển web họ hay sử dụng cấu trúc ul li menul li li menu2 li li menun li ul Và quả thật lời khuyên của tôi dành cho các bạn là hãy sử dụng cấu trúc này để thực hiện việc xây dựng các thanh menu cho website của bạn. Và tất nhiên nếu như chỉ nói đến đây một số bạn sẽ thắc mắc rằng nếu như sử dụng cấu trúc trên thì chúng ta đang tạo ra một list HTML hay sao chẳng thấy dáng dấp gì của một menu bar của website cả.Để trả lời cho câu hỏi này thì trước hết tôi cũng rất thông cảm cho người đã đưa ra câu hỏi bởi vì chỉ những người mới bắt đầu tìm hiểu về CSS thì mới hỏi như vậy thôi và để cho nó dáng dấp của một menu bar thì bạn phải sử dụng CSS để tạo dáng cho nó chẳng phải cuốn sách này của chúng ta đang tìm hiểu về CSS hay sao . Bây giờ chúng ta sẽ thử tìm hiểu qua ví dụ cụ thể sau Code html body ul li a href home Home a li li a href news News a li li a href contact Contact a li li a href about About a li ul p Note We use href for test links. In a real web site this would be URLs. p body html Ví dụ này chúng ta chỉ tạo ra một list các link bằng HTML đơn giản mà thôi các bạn sẽ thấy ngay kết quả hiện thị như sau Home News Contact About Tôi không nói nhiều về đoạn mã này nữa. Bây giờ tiếp theo cũng là đoạn mã trên nhưng chúng ta tạo dáng cho nó bằng chèn thêm đoạn CSS như sau style ul list-style-type none margin 0 padding 0 style Kết quả hiện thị như sau Home News Contact About Đoạn CSS đã phát huy tác dụng của nó thuộc tính list-style-type nếu như các bạn chưa biết thì có thể tìm hiểu các chỉ dẫn .
