Tạo Menu Ngang Dùng Thẻ Li - Programming - Dạy Nhau Học Trang chủ » Thẻ Li Trong Html » Tạo Menu Ngang Dùng Thẻ Li - Programming - Dạy Nhau Học Có thể bạn quan tâm Thề Lk Thể Loại Thể Loại 3d Thể Loại 419 Thể Loại Abo đam Mỹ Là Gì Tạo menu ngang dùng thẻ Li programming css html Thuong (Thương) July 27, 2022, 9:48am #1 cho mình hỏi trong đoạn code này thì thuộc tính overflow: hidden với display: block tại sao khi dùng nó lại ra như vậy? mình thử bỏ 2 lệnh này rồi chạy thử, nhưng vẫn không hiểu rõ lắm ==! khi bỏ overflow:hidden thì cái màu nền #333333 của thẻ ul nó không được hiện, còn khi bỏ display:block thì màu nền #333333 nó chỉ hiện bằng độ cao của chữ trong li a à, hình như phần padding nó mất màu ==! <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } li a:hover { background-color: #111111; } </style> </head> <body> <ul> <li><a href="">Home</a></li> <li><a href="">News</a></li> <li><a href="">Contact</a></li> <li><a href="">About</a></li> </ul> </body> </html> superthin (Vô Thin) December 27, 2017, 1:01pm #2 Cần đưa file HTML hoàn chỉnh của bạn lên và nếu file .css đi riêng cũng gửi lên để được xem và trợ giúp. Cũng nên chụp ảnh màn hình của bạn xem thử nó trông thế nào, và bạn mong đợi như thế nào? Gửi hai hình đứng cạnh nhau để mọi người hình dung bạn mong đợi kết quả ra sao. Câu hỏi bạn khá rối, nên không thể dò theo mà giải quyết giúp bạn được. Chỉ có giải thích sau: overflow: hidden : nếu bị tràn lề (do nội dung bên trong dài/ to hơn khối hộp bọc nó) thì phần tràn ra được ẩn đi mà không phá vỡ khối dẫn đến mất thẩm mỹ. overflow.PNG414×683 8.27 KB display: block : định nghĩa thẻ đó được sử dụng như một khối hộp chữ nhật nằm riêng biệt trên trang, tức không thể nằm chung dòng với các khối của thẻ khác. 6 Likes Thuong (Thương) December 27, 2017, 10:08am #3 cám ơn bạn nhiều, mình đã chép toàn bộ file html mà sao đăng lên nó hiện có nhiêu đó. code mình đọc trên trang này: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu mình không hiểu chỗ 2 thuộc tính display với overflow. trong thẻ li a có thuộc tính display: block. theo mình hiểu thì khi có thuộc tính này li a nó sẽ có độ rộng là 1 dòng, các li a tiếp theo sẽ xuống dòng mới. khi thêm float: left vào thẻ li ở ngoài, thì mấy thẻ li a bên trong nó lại không xuống dòng mới. vậy độ rộng thật sự lúc này của những thẻ li a vẫn là 1 dòng, hay nhỏ hơn. rồi thuộc tính overflow: hidden trong thẻ ul nữa, thuộc tính này là ẩn các phần bị tràn ra bên ngoài thẻ ul. sao nó lại ẩn màu nền của thẻ ul mà không ẩn các phần bị tràn bên ngoài??? superthin (Vô Thin) December 27, 2017, 11:06am #4 Theo như code bạn cho, mình sẽ giải thích cho bạn từng đoạn, nếu đọc xong mà không hiểu nữa thì nên tìm một sư phụ nào đó để được chỉ dạy ban đầu cho có căn bản, vì xem ra tự đọc trên mạng chưa đủ sức để hiểu. Mong bạn không xem rằng mình đang nặng lời. <!DOCTYPE html> <html> <head> <style> ul { /* định nghĩa một list / tức danh sách */ list-style-type: none; /* kiểu của các dòng trong danh sách là không có gì đầu dòng */ margin: 0; /* thụt lề bằng 0 */ padding: 0; /* vùng đệm để đẩy thành phần chứa bên trong thụt vô bằng 0 */ overflow: hidden; /* nếu chữ/ hình bị tràn ra ngoài, cắt bỏ */ background-color: #333333; /* màu chữ của các thứ chứa trong danh sách là màu đen hơi xám */ } li { /* định nghĩ cho các dòng trong danh sách */ float: left; /* cho các dòng trôi nổi về góc bên trái như những cục shit trôi sông tấp vào bờ trái */ } li a { /* định nghĩa thẻ a nằm bên trong một thẻ li */ display: block; /* bình thường thẻ a là thẻ inline, không phải block, giờ cho nó thành block */ color: white; /* màu chữ sẽ là màu trắng */ text-align: center; /* canh lề giữa cho chữ, tức thẻ a sẽ là khối chữ nhật, chữ nằm giữa, canh đều hai bên */ padding: 16px; /* vùng đệm thụt vào 16px rồi mới đến nội dung bên trong a */ text-decoration: none; /* không trang trí hoa hòe hoa sói, tức rà chuột, kích chuột,... chữ vẫn trắng mà không ra màu khác hay chớp nháy, gạch chân gì cả */ } li a:hover { /* định nghĩa hành động cho thẻ a khi rà chuột */ background-color: #111111; /* khi rà chuột vào khối chữ nhật do thẻ a taoọ ra thì đổi màu nền thành màu đen */ } </style> </head> <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> <!-- nguyên đoạn trên tạo ra các khối chữ nhật và cho nó trôi nổi về phía trái, xếp cạnh nhau nếu màn hình còn chỗ --> </ul> </body> </html> Mình đã giải thích trong code trên, có gì chưa hiểu lại comment bên dưới nhé. Như vậy, về mặt lý thuyết người mới học sẽ khó hiểu khi: Thẻ a đã được định nghĩa là block, tức nó không thể nằm cùng dòng với thẻ nào khác, ở đây nó lại nằm cùng với dòng mấy khối chữ nhật khác <= quái quỉ gì thế. Giờ ta mới phát hiện ra cái ông a này lại nằm bên trong một ông li khác, ông li không rõ là block hay không, chỉ biết ổng float. Hahaha, thế là thế quái nào? Giờ ta đi tra cứu xem float nó làm gì. Lúc này thấy hết khó hiểu. Cái overflow: hidden; trong thẻ ul để làm quái gì, không ai hiểu nó là gì cả, bối rối cho người mới học. Cái này thì người phải có trình độ khá và kinh nghiệm về CSS mới lý giải được, người mới học cứ làm như con vẹt thôi. Cái đây là một mẹo do những tiền bối vọc CSS phát hiện ra thôi, không có sách vở nào rõ ràng, Thin tạm giải thích như sau: một khi các thành phần bên trong ul đặt là float mà lại không thấy định nghĩa height cho ul thì nếu có thừa ra sẽ không bị cắt/ làm gì khác nếu không thấy overflow được set thế nào, cho nên, người ta overflow: hidden; mục đích là để ul lấy chiều cao của thành phần con bên trong làm chiều cao của nó - tức của ul, hoặc nói theo cách khác thành phần bên trong nó sẽ lấn hết chiều cao/ rộng / không gian của ul. Trình duyệt hiểu như vậy đó. Nhờ đó cho nên cái nền #333333 mới có tác dụng, ta bỏ overflow: hidden; thì ul thành cái xác không hồn, chẳng có nền gì ráo. Ai muốn hiểu được cái đoạn lôi thôi trên, cứ làm cách thành phần lồng nhau rồi định nghĩa màu nền, canh chỉnh float, align, overflow,… một lát sẽ phát hiện ra vấn đề, thằng bên trong có khi to hơn thằng bố bên ngoài và thằng bố thì chẳng thấy chiều cao ở chỗ nào, màu nền có khi là một đường bé tí xíu. Cái này gọi là “trăm hay không bằng tay quen”, ít làm thì khó gặp. Hết. Không hiểu nữa thì cứ làm theo như con vẹt, ngày nào đó sẽ tự hiểu vì CSS là một thứ mà nhiều lập trình viên rất ghét, nó không theo logic của các ngôn ngữ lập trình mà họ biết, cho nên, CSS chưa bao giờ được xếp vào nhóm “ngôn ngữ lập trình”. Cuối cùng, thực ra đề bài đặt sai. Bài này là bài “Tạo menu nằm ngang dùng thẻ LI” (tiêu đề gốc trên trang W3 Sờ Cun kia là A horizontal list menu) mới đúng, chứ danh sách nào ở đây. 4 Likes hungaya (Hung) December 27, 2017, 11:06am #5 W3School là trang mình không bao giờ tham khảo để học hay fix bug. Nhiều vấn đề cái trang này không hướng dẫn. Thuong: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu Học CSS thì nên học cuốn sách này, nếu bạn search Google thì có nhiều người recommend: CSS: The Definitive Guide: Visual Presentation for the Web Eric A. Meyer, Estelle Weyl If you’re a web designer or app developer interested in sophisticated page styling, improved accessibility, and saving time and effort, this book is for you. This revised edition provides a comprehens ... 4.8 out of 5 stars, ISBN: 978-1449393199, O'Reilly Media, November 9, 2017, $56.34 6 Likes Thuong (Thương) December 27, 2017, 11:28am #7 Cám ơn bạn nhiều. Bạn giải thích dễ hiểu ghê, mình thấy bớt khó hiểu rồi Thuong (Thương) December 27, 2017, 11:29am #8 Cám ơn bạn noname00 (HK boy) split this topic July 27, 2022, 9:47am #9 A post was merged into an existing topic: Topic lưu trữ các post off-topic - version 3 noname00 (HK boy) closed July 27, 2022, 9:48am #10 DayNhauHoc's Discord Học C++ Free? Click Blog Dạy Nhau Học Tự Học Lập Trình 83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao? Từ khóa » Thẻ Li Trong Html Thẻ Trong HTML | Tạo Danh Mục Cho Danh Sách Thẻ Ul, Ol Và Li Trong HTML - Cách Tạo Danh Sách Dễ Dàng Thẻ Li Trong HTML Thẻ Trong HTML - Hoclaptrinh Thẻ Li Trong HTML Các Thẻ Danh Sách Có Thứ Tự Và Không Có Thứ Tự - Học Web Chuẩn Li | Tag Html | Học Web Chuẩn Thẻ Và Tạo Danh Sách HTML Thẻ Ul, Ol, Li Trong HTML - Quách Quỳnh HTML Li Tag - W3Schools Thẻ Tạo Danh Sách Ul, Ol, Li Trong HTML | Học JavaScript Thẻ Li Trong HTML - Web888 Chia Sẻ Kiến Thức Lập Trình, Kinh Doanh ... Thẻ Danh Sách HTML - Niềm Vui Lập Trình Thẻ Li Trong HTML - Lập Trình Từ Đầu
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?