Xin chào các bạn đến với COMDY! Trong bài học trước, chúng ta đã cùng nhau xây dựng giao diện cho ba phần chính của trang web. Bạn đã làm tốt đấy! Bây giờ, chúng ta sẽ hoàn thiện phần cuối cùng là Mục thành viên.
Trong phần này, chúng ta sẽ tạo giao diện cho ba thành viên trong nhóm. Mỗi thành viên sẽ có một tên và một ảnh. Trên trang web, chúng ta sẽ hiển thị ba thành viên này. Ở bài viết này, mình sẽ hướng dẫn các bạn cách tạo giao diện cho phần này.
Đầu tiên, chúng ta chỉ cần phân tích một chút. Chúng ta không cần phải tạo cả 30 thành viên và mỗi thành viên sẽ nằm trong một thẻ “div” riêng. Thêm vào đó, mỗi thành viên sẽ có một tên và một ảnh. Để cho đơn giản, chúng ta có thể sử dụng thẻ “p” cho tên và thẻ “img” cho ảnh.
Tiếp theo, các bạn chỉ cần tạo một thẻ “div” để chứa tất cả thành viên này. Thẻ “div” này sẽ nằm sau phần mô tả đúng không? Bây giờ chúng ta sẽ xác định vị trí của nó. Câu hỏi là vị trí của nó là đứng đằng sau phần mô tả đúng không?
Bắt đầu bằng cách tạo một thẻ “div” để chứa tất cả thành viên. Chúng ta sẽ gọi thẻ này là “member-list”. Trong đó, sẽ có một tên mình đặt là “member-1” đi. Để đơn giản, mình sẽ đặt tên là “member-1”. Đừng quên lưu lại!
Bây giờ, chúng ta sẽ tạo thành viên đầu tiên bằng cách tạo một thẻ “div” với class là “member”. Trong đó, chúng ta sẽ có một tên, mình sẽ đặt tên là “member-name”. Sau đó, chúng ta sẽ thêm một ảnh vào. Để làm vậy, chúng ta sẽ đặt class của ảnh là “member-avatar”.
Tiếp theo, chúng ta sẽ xử lý cách hiển thị ảnh. Đối với phần này, chúng ta có một số cách để làm nhưng mình sẽ đi theo cách đơn giản nhất bằng cách sử dụng thuộc tính “float”. Trong trường hợp này, chúng ta sẽ sử dụng thuộc tính “float” để đẩy ảnh sang trái hoặc sang phải. Còn bây giờ chúng ta sẽ làm thế nào để đẩy ảnh lên trên nhỉ?
Đầu tiên, chúng ta sẽ tạo một lớp mới cho ảnh này. Lớp này sẽ gọi là “wrap”. Bây giờ, chúng ta sẽ thay đổi chiều ngang của cả ba thành viên để chúng có chiều ngang bằng nhau. Để làm điều này, chúng ta sẽ đặt chiều rộng cho cả ba thành viên thành 150 pixel. Nhưng đừng quên là còn khoảng cách giữa các thành viên nữa nhé!
Bây giờ, chúng ta sẽ đặt khoảng cách giữa các thành viên là bằng 48 pixel. Điều này sẽ tạo ra một dòng mới và nếu đúng rồi, các thành viên sẽ xuất hiện trên cùng một hàng.
Tiếp theo, chúng ta sẽ điều chỉnh kích thước của tên các thành viên. Chúng ta muốn tên nằm chính giữa ảnh. Để làm điều này, hãy sử dụng thuộc tính “text-align” và đặt giá trị là “center” cho thẻ “p” chứa tên của thành viên.
Cuối cùng, chúng ta cần làm cho hình ảnh có góc bo tròn để tạo sự thẩm mỹ. Để làm điều này, chúng ta sẽ thêm thuộc tính “border-radius” cho ảnh. Đơn giản chỉ cần thêm giá trị là 5 pixel cho tất cả các bên của ảnh.
Ừ, vậy là xong rồi đấy các bạn! Hãy kiểm tra lại xem còn thiếu sót gì không nhé. Ok, bây giờ hãy tắt trình duyệt và xem lại toàn bộ trang nhé.
Đến đây là hết rồi các bạn. Buổi sau chúng ta sẽ làm phần “Hôm nay” các bạn nhé. Hẹn gặp lại các bạn trong buổi học tiếp theo. Xin chào!