Tạo menu với CSS

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...
Nội dung trích xuất từ tài liệu:
Tạo menu với CSS Tạo menu với CSSCác bạn có thể tải các file demo ở link sau :http://www.mediafire.com/?o4c8upd8pmlys7pTrong các web site các thanh menu đã trở thành quen thuộc và đóng một vai trò rất quantrọ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ấyrằng các nhà phát triển web họ hay sử dụng cấu trúc : menu1 menu2 ….. menunVà 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ệcxâ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ênthì 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ủawebsite 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 racâ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à để chonó 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ốnsá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:HomeNewsContactAboutNote: We use href=# for test links. In a real web site this would beURLs.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ấyngay kết quả hiện thị như sau :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ạnCSS như sau :ul{list-style-type:none;margin:0;padding:0;}Kết quả hiện thị như sau:Đ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 trên các phương tiện tìm kiếm.Tiếp theo chúng ta sẽ thực hiện việc liên kết các link này thành một khối,chúng ta có thể hiểurằng các link này sẽ tạo thành một khối menu có quan hệ với nhau.Chúng ta sẽ thêm đoạn CSS này như sau :a{display:block;width:60px;background-color:#dddddd;}đoạn CSS này có nghĩa là : các đối tượng nằm trong thẻ sẽ liên kết với nhau tạo thànhmột khối,và khối đó sẽ có chiều rộng bằng 60px,màu nền là màu xám.Kết quả hiện thị sẽ như sau:Tất nhiên nếu như một thanh menu bar của trang web như thế này thì theo tôi đúng là xấuthật,xấu hết chỗ nói.Nhưng ở đây chỉ là đơn giản hóa vấn đề để cho bạn dễ hiểu thôi,nếu như cácbạn muốn trông nó dễ nhìn hơn thì chỉ cần thêm vào một và i đoạn mã CSS là được thôi mà,saubài này chúng ta sẽ có một vài bài thực hành tạo menu và tất nhiên những yêu cầu về thẩm mỹcủa những menu đó sẽ cao hơn.Tiếp theo chúng ta sẽ học cách tạo ra những thanh menu ngang,như thế thì việc đầu tiên chúngcần làm là phải hiện thị các link trong list ul trên cùng một dòng,để thực hiện điều này các bạn cóhai cách: hoặc là các bạn sử dụng thuộc tính display với giá trị là inline, hoặc là sử dụng thuộctính float với giá trị left hay right thì tùy( tuy rằng trong nhiều trường hợp sử dụng float vẫn tốthơn).Ví dụ dưới đây chúng ta sẽ hiện thị các liên kết trên cùng một dòng :ul{list-style-type:none;margin:0;padding:0;}li{display:inline;}HomeNewsContactAboutKết quả hiện thị như sau:Nếu như chúng ta sử dụng đoạn mã CSS sau với thuộc tính float thì kết quả hiện thị cũng nhưtrên :li{float:left;}a{display:block;width:60px;}thực ra để thuần thục các kĩ năng này các bạn chỉ có một cách là thực hành thật nhiều,các trangweb trên mạng có vô số kiểu khác nhau,hãy tham khảo và tập làm theo xem sa o.Chú ý : thật tuyệt vời khi trên mạng có những tài nguyên vô giá mà các bạn có tham khảo hoàntoàn miễn phí,chẳng hạn như ngay vấn đề về menu bar này thôi các bạn có thể tham khảo tạitrang http://www.cssmenumaker.com một trang web cung cấp rất nhiều mẫu menu đẹp,đơn giảnvà thậm chí là còn có cả mã nguồn nữa.Sau đây là một số bài thực hành bắt buộc các bạn phải làm,hãy luyện tập kĩ năng của bạn,dù saothì những bài này cũng không phải là khó khăn gì.bài tập:hãy tạo ra các menu bar như sau :Thực ra thì việc tạo ra những menu không khó là mấy nếu như các bạn đã tìm hiểu bài trên,sauđây là đoạn mã tham khảo về menu bar dạng đứng:Untitled Document ul { list-style-type:none; } a { display:block; width:100px; text-align:center; padding-bottom:5px; background-color:#339966; text-decoration:none; text-transform:uppercase; color:#FFFFFF; font-weight:bold } a:hover { background-color:#999966 } home news contact about Thuộc tính display:block đã thể hiện được vai trò của nó việ c hiện thị thanh menu bar của chúngta.Bây giờ để chuyển menu trên thành menu dạng nằm ngang thì chúng ta không cần phải chỉnhsửa lại toàn bộ mã làm gì cho mệt ,chỉ cần thêm thuộc tính float:left vào thẻ a là được m ...