Bảng điều khiển trong html là gì?

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

Nội dung chính Show

Làm cách nào để tạo trang tổng quan trong CSS và HTML?
Bảng điều khiển trong JS là gì?
Mẫu trong HTML và CSS là gì?
Làm cách nào để tạo trang tổng quan trong JavaScript?

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

<html lang="en">

<head>

<0______1<2 <3=<5>

<0__<<2 html0=html2

html3______24=html6>

<0____1<2 lang1=lang3

html3______35____36=lang8lang9

=0=1==3=4

<0______1=7=8=7>

<0____1"en"3 "en"4="en"6

html3____58=>0>

<0____1"en"3 "en"4="en"6

html3____58=<1>

<3____8>

<____17____6

<9

<0head1

<0____1____84>

head6<head8 head9=>1>

>3<head8 head9=>8=8head8>

>3<____104 <05=

<07

<08head9=<11

<08<13____4<15

<08<17____4<19>

head6<3____88>

head6<head8 head9=<30>

>3<____134 <35=<37

=0<39=<41>

>3<head8 head9=<48>

<50<____104 <05=

<55

<56______89____4<59

<56<17______4<63>

<50<3____88>

head6<3____88>

head6<head8 head9=<78>

>3<head8 head9=<85<86head8>

>3<____104 <05=

<94

<95head9____4<98

<95<17____4html02>

>3<head8 head9=html09>

<50<____104 <05=

html16

<56____89____4html20

<56____117____4html09>

<50<3____88>

head6<3____88>

<0<3head4>

<0______1head8 head9=html43>

head6<head8 head9=html50>

>3<____254 head9=html57>

<08<head8 head9=html64>

<56____1head8 head9=html71>

html73<<04 <05=

html78

html79head9=html82

html79<17____4html86>

html73<html90html91html90>

<56<3____88>

<56____1head8 head9=lang03>

html73<<04 <05=

lang10

html79head9=html82

html79<17____4lang18>

html73<html90lang23html90>

<56<3____88>

<56____1head8 head9=lang35>

html73<<04 <05=

lang42

html79head9=html82

html79<17____4lang50>

html73<____290lang55html90>

<56<3____88>

<56____1head8 head9=lang67>

html73<<04 <05=

lang74

html79head9=html82

html79<17____4lang82>

html73<____290lang87html90>

<56<3____88>

<56<head8 head9=lang99>

html73<<04 <05=

=06

html79head9=html82

html79<17____4=14>

html73<____290=19html90>

<56<3____88>

<56____1head8 head9==31>

html73<<04 <05=

=38

html79head9=html82

html79<17____4=46>

html73<html90=51html90>

<56<3____88>

<56____1head8 head9==63>

html73<<04 <05=

=70

html79head9=html82

html79<17____4=78>

html73<html90=83html90>

<56<3____88>

<08<3____88>

>3<3____254>

head6<3____88>

head6<head8 head9="en"07>

>3<head8 head9="en"14>

<08<____134 <35=<37

"en"22lang1____4html02

"en"22<13____4html02

"en"22<39____4<41>

<08<head8 head9=<48>

"en"42<____104 <05=

<55

html73head9=<59

html73<17="en"55>

"en"42<3____88>

>3<3____88>

>3<head8 head9="en"70>

<08<head8 head9="en"77>

<56____1head8 head9=<37>

html73<"en"88 head9="en"91"en"92"en"88>

html73<"en"88 head9=>00>01"en"88>

<56<3____88>

<56<<04 <05=

>13

html73<17=>17>

<08<3____88>

<08<head8 head9=>28>

<56____1head8 head9=<37>

html73<"en"88 head9="en"91>43"en"88>

html73<"en"88 head9=>00>52"en"88>

<56<3____88>

<56<<04 <05=

>64

>65<17=>68>

<08<3____88>

<08<head8 head9=>79>

<56____1head8 head9=<37>

html73<"en"88 head9="en"91>94"en"88>

html73<"en"88 head9=>00<03"en"88>

<56<3____88>

<56<<04 <05=

<15

html73<17=<19>

<08<3____88>

<08<head8 head9=<30>

<56____1head8 head9=<37>

html73<"en"88 head9="en"91<45"en"88>

html73<"en"88 head9=>00<54"en"88>

<56<3____88>

<56<<04 <05=

<66 <17____4<69>

<08<3____88>

>3<3____88>

>3<head8 head9=<84>

<08<head8 head9=<91>

<56<<95 head9=<98<99<95>

<56<head04 head9=head07head08head04>

<08<3____88>

<08<head8 head9=head20>

<56____1head8 head9=head27>

html73<html90 head9=head34head35html90>

html73<html90 head9=head34head44html90>

html73<html90 head9=head34<03html90>

html73<html90 head9=head34head62html90>

<56<3____88>

<56____1head8 head9=head74>

html73<head8 head9=head81>

html79<html90 head9=head88head89html90>

html79<html90 head9=head88head98html90>

html79<____290 head9=head88>07html90>