Hướng dẫn tạo Menu xổ bằng code CSS đơn giản

 Menu xổ là một trong những thành phần cơ bản nhất cho mọi trang web cần nhiều điều hướng – cái mà menu thường theo kiểu dàn trải tất cả không thể thay thế được vì chiếm quá nhiều diện tích.
Menu xổ

Hôm nay tôi và bạn sẽ cùng thực hành tạo menu xổ, tiếng Anh là dropdown menu, chúng ta sẽ code hoàn toàn bằng CSS chứ không cần Javascript, ngoài ra cũng chú ý để viết code sao cho đơn giản nhất có thể được mà vẫn tạo ra hiệu quả tương tự. Bạn có thể xem demo kết quả cuối cùng ở đây. Đọc tiếp Hướng dẫn tạo Menu xổ bằng code CSS đơn giản

Cách dùng thuộc tính display trong CSS

Display trong CSS

Thuộc tính display trong css quy định cách hiển thị của một thẻ, có 3 cách hiển thị chính:

  • inline: nghĩa là hiển thị trên cùng một dòng, chúng ta có thể kể tên các thẻ trong HTML là inline, bao gồm: thẻ b, thẻ i, thẻ a, thẻ span
  • block: hiển thị theo khối tách riêng nhau. Một số thẻ HTML là block như thẻ h1 đến h6, thẻ p, thẻ div…
  • none: không hiển thị thẻ đó. Đoạn code của nó trong HTML mặc dù vẫn còn nhưng về mặt hiển thị là giống với việc đoạn code đó đã bị xóa đi, vị trí trong luồng trang cũng mất.

Đọc tiếp Cách dùng thuộc tính display trong CSS

Thuộc tính position trong CSS

position css

Thuộc tính position dùng để lấy điểm mốc tham chiếu cho việc xác định vị trí của hộp thẻ. Có thể bạn quen với việc dùng float để tạo bố cục nhưng không thành thạo position là thiệt thòi lớn, vì ít nhất menu xổ, popup xuất hiện khi hover, hoặc menu cố định đều cần đến position. Đọc tiếp Thuộc tính position trong CSS

Thuộc tính float điều chỉnh vị trí trong CSS

giọt nước trôi về nơi đâu?

Thuộc tính float thường được dùng để điều chỉnh vị trí của ảnh trôi sang trái hoặc phải, khi đó text sẽ bao quanh ảnh. Ngoài ảnh thì float cũng hay được dùng trong bố cục để điều chỉnh layout của trang, ví dụ các cột bên phải được để là float: right để nó trôi về phía phải. Đọc tiếp Thuộc tính float điều chỉnh vị trí trong CSS

Thuộc tính opacity trong CSS3

Ảnh này được để Opacity là 0.6

Opacity là thuộc tính mới trong CSS và thuộc phiên bản mới nhất của CSS3, nó quy định độ trong suốt của hình ảnh hoặc nền màu nào đó. Nếu từng biết Photoshop bạn chắc không lạ opacity. Bằng CSS3 chúng ta không cần dùng phần mềm chỉnh sửa ảnh nào nữa, các thành phần sẽ được điều chỉnh độ trong suốt tùy ý. Cùng Blog Đức Anh Plus thử ngay và luôn nhé! Đọc tiếp Thuộc tính opacity trong CSS3