Trong bài viết này, chúng ta sẽ xem cách tạo Responsive Admin Dashboard bằng HTML, CSS & Javascript, cùng với việc tìm hiểu cách triển khai nó qua hình minh họa
Nhiều trang web hiện nay đang triển khai hai mô-đun/giao diện cho trang web của họ. Một dành cho người dùng và một dành cho quản trị viên. Trong bài viết này, chúng ta sẽ xem quy trình tạo bảng quản trị đáp ứng bằng cách sử dụng HTML, CSS và Javascript cơ bản
Trong bảng quản trị, có nhiều phần để quản trị viên kiểm soát các hoạt động của trang web. Trong bảng quản trị, có một tiêu đề và một thanh điều hướng bên sẽ hiển thị giúp quản trị viên điều hướng vào nhiều mô-đun của bảng quản trị. trong phần tiêu đề sẽ có nút tìm kiếm giúp quản trị viên tìm kiếm trực tiếp một mô-đun. Vì vậy, hãy xem cách tiếp cận để biết về việc tạo Bảng điều khiển dành cho quản trị viên
Bảng điều khiển quản trị đáp ứng
Tiếp cận. Cách tiếp cận sau đây sẽ được sử dụng để tạo Bảng điều khiển quản trị đáp ứng
- Tạo một thư mục dự án và bên trong nó tạo ba tệp “index. html“[để viết HTML], “kiểu. css“[để viết CSS], và “index. js“[để viết js]. Bạn cũng có thể tạo một tệp riêng để giữ mã CSS cho khả năng phản hồi của trang
- Bây giờ, hãy tạo một phần tiêu đề để giữ logo tiêu đề và các tùy chọn khác như nút menu, ảnh hồ sơ Quản trị viên và thanh tìm kiếm bên trong nó
- Sau đó, tạo một thanh tìm kiếm bằng cách sử dụng thẻ Đầu vào và tạo kiểu cho nó bằng CSS. Và làm cho tiêu đề linh hoạt để căn chỉnh và căn chỉnh nội dung với một không gian hoàn hảo
- Sau đó, tạo một thanh điều hướng và đặt nó ở vị trí tương đối và đặt nó ở bên trái màn hình. Thêm chức năng javascript để mở và đóng thanh điều hướng khi nhấp vào nút menu. Sử dụng “AddEventListener” cho nó. Sau đó đặt từng nội dung của thanh điều hướng
- Sau đó, tạo div chính để giữ phần chính của bảng điều khiển. Ở phía trên của div chính, hãy tạo bốn thẻ chứa thông tin quan trọng như Lượt xem hàng ngày, Lượt thích, Nhận xét, v.v. Áp dụng các thuộc tính flex trong các hộp đó để căn chỉnh và căn chỉnh chúng ở vị trí hoàn hảo trên trang web và áp dụng “flex-wrap. bọc;"
- Sau đó, bên dưới các thẻ tạo một div vuông sẽ chứa thông tin của bài viết gần đây. Sau đó, phần tràn của trục x sẽ có thể cuộn được. Vì vậy, hãy thêm các thuộc tính CSS vào div “overflow-x” này. cuộn;“. Sau đó, thêm nội dung của các bài viết gần đây và sắp xếp nội dung ở bên phải bằng cách hiển thị div flex
- Sau đó, làm cho trang phản hồi nhanh, thêm truy vấn @media với các điểm dừng khác nhau và tạo kiểu theo kích thước màn hình. Xem ví dụ để hiểu rõ hơn về khả năng phản hồi.
Thí dụ. Ví dụ này minh họa cách xây dựng một Responsive Admin Dashboard sử dụng Html CSS & Javascript
HTML