Xin chào các học viên……. Chào mừng bạn đến với mã hóa với blog ngẫu nhiên… Hôm nay trong blog này, chúng ta sẽ tìm hiểu cách tạo thiết kế bảng điều khiển chỉ bằng HTML và CSS. Và tôi chắc chắn rằng sau khi đọc blog này, bạn sẽ có thể tạo bảng điều khiển bằng HTML và CSS
QUẢNG CÁO
Mã theoN/ADự án Liên kết tải xuống có sẵn bên dướiNgôn ngữ được sử dụngHTML và CSSLiên kết ngoài / Phụ thuộcCóResponsiveYESBảng thiết kế bảng điều khiển
bảng điều khiển là gì?
Đây là một báo cáo ngắn cho phép hiển thị dữ liệu trực quan trong một thời gian nhất định theo cách có ý nghĩa và hỗ trợ biểu đồ để dễ dàng tham khảo và suy luận nhanh chóng
QUẢNG CÁO
Trang tổng quan là màn hình hiển thị trực quan tất cả dữ liệu của bạn. Mặc dù nó có thể được sử dụng theo nhiều cách khác nhau, nhưng mục đích chính của nó là cung cấp thông tin nhanh chóng, chẳng hạn như KPI
QUẢNG CÁO
Chơi bài kiểm tra không giới hạn về HTML, CSS và JavaScript – Bấm vào đây
QUẢNG CÁO
Trang tổng quan thường nằm trên trang riêng của nó và nhận thông tin từ cơ sở dữ liệu được liên kết. Trong nhiều trường hợp, nó có thể định cấu hình, cho phép bạn chọn dữ liệu nào bạn muốn xem và liệu bạn có muốn bao gồm biểu đồ hoặc đồ thị để trực quan hóa các con số hay không
Thiết kế bảng điều khiển mã HTML. -
Ở đây chúng tôi muốn thêm id phần là lớp div thanh bên là nhãn trắng. Sau đó, chúng tôi muốn liệt kê từng trang tổng quan
Vì vậy, đây là kiểu dáng cơ bản mà chúng tôi đang sử dụng CSS và đối với các biểu tượng, chúng tôi đang sử dụng Phông chữ Tuyệt vời và chèn cdn (mạng phân phối nội dung) của chúng vào thẻ tiêu đề của tệp HMTL
Vì vậy, bạn có thể xem qua trang web font-awesome để biết thêm chi tiết và cách sử dụng Link
Chúng tôi đang tạo hai phần chính, một phần dành cho điều hướng thanh bên và phần còn lại dành cho nội dung chính. Vì vậy, chúng tôi đã tạo hai phần bằng cách sử dụng thẻ phần (thẻ ngữ nghĩa)
Các phần tử ngữ nghĩa = các phần tử có ý nghĩa
QUẢNG CÁO
Tạo biểu mẫu nhiều bước bằng HTML, CSS & JavaScript
Các yếu tố ngữ nghĩa là gì?
Một phần tử ngữ nghĩa mô tả rõ ràng ý nghĩa của nó đối với cả trình duyệt và nhà phát triển
Ví dụ về các yếu tố phi ngữ nghĩa. <div> và <span> – Không nói gì về nội dung của nó
QUẢNG CÁO
Ví dụ về các yếu tố ngữ nghĩa. <form>, <section id="content"> <div id="header"> <div class="header-nav"> <div class="menu-button"><!--<i class="fa fa-navicon"></i>--></div> <div class="nav"> <ul> <li class="nav-settings"> <div class="font-icon"><i class="fa fa-tasks"></i></div> </li> <li class="nav-mail"> <div class="font-icon"> <i class="fa fa-envelope-o"></i> </div> </li> <li class="nav-calendar"> <div class="font-icon"> <i class="fa fa-calendar"></i> </div> </li> <li class="nav-chat"> <div class="font-icon"> <i class="fa fa-comments-o"></i> </div> </li> <li class="nav-profile"> <div class="nav-profile-image"> <img src="//skynet.marketecture.com/user_avatars/258800/Hayley-Helsten.jpg" alt="profile-img" alt="profile image" /> <div class="nav-profile-name"> Jane Smith<i class="fa fa-caret-down"></i> </div> </div> </li> </ul> </div> </div> </div> <div class="content"> <div class="content-header"> <h1>Dashboard</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="widget-box sample-widget"> <div class="widget-header"> <h2>Widget Header</h2> <i class="fa fa-cog"></i> </div> <div class="widget-content"> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/87118/sample-data-1.png" /> </div> </div> <div class="widget-box sample-widget"> <div class="widget-header"> <h2>Widget Header</h2> <i class="fa fa-cog"></i> </div> <div class="widget-content"> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/87118/sample-data-1.png" /> </div> </div> <div class="widget-box sample-widget"> <div class="widget-header"> <h2>Widget Header</h2> <i class="fa fa-cog"></i> </div> <div class="widget-content"> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/87118/sample-data-1.png" /> </div> </div> <div class="widget-box sample-widget"> <div class="widget-header"> <h2>Widget Header</h2> <i class="fa fa-cog"></i> </div> <div class="widget-content"> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/87118/sample-data-1.png" /> </div> </div> </div> </section> 0, và <section id="content"> <div id="header"> <div class="header-nav"> <div class="menu-button"><!--<i class="fa fa-navicon"></i>--></div> <div class="nav"> <ul> <li class="nav-settings"> <div class="font-icon"><i class="fa fa-tasks"></i></div> </li> <li class="nav-mail"> <div class="font-icon"> <i class="fa fa-envelope-o"></i> </div> </li> <li class="nav-calendar"> <div class="font-icon"> <i class="fa fa-calendar"></i> </div> </li> <li class="nav-chat"> <div class="font-icon"> <i class="fa fa-comments-o"></i> </div> </li> <li class="nav-profile"> <div class="nav-profile-image"> <img src="//skynet.marketecture.com/user_avatars/258800/Hayley-Helsten.jpg" alt="profile-img" alt="profile image" /> <div class="nav-profile-name"> Jane Smith<i class="fa fa-caret-down"></i> </div> </div> </li> </ul> </div> </div> </div> <div class="content"> <div class="content-header"> <h1>Dashboard</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="widget-box sample-widget"> <div class="widget-header"> <h2>Widget Header</h2> <i class="fa fa-cog"></i> </div> <div class="widget-content"> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/87118/sample-data-1.png" /> </div> </div> <div class="widget-box sample-widget"> <div class="widget-header"> <h2>Widget Header</h2> <i class="fa fa-cog"></i> </div> <div class="widget-content"> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/87118/sample-data-1.png" /> </div> </div> <div class="widget-box sample-widget"> <div class="widget-header"> <h2>Widget Header</h2> <i class="fa fa-cog"></i> </div> <div class="widget-content"> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/87118/sample-data-1.png" /> </div> </div> <div class="widget-box sample-widget"> <div class="widget-header"> <h2>Widget Header</h2> <i class="fa fa-cog"></i> </div> <div class="widget-content"> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/87118/sample-data-1.png" /> </div> </div> </div> </section> 1 – Xác định rõ ràng nội dung của nó
QUẢNG CÁO
Semantic Elements in HTMLMany web sites contain HTML code like:
Trong HTML có một số yếu tố ngữ nghĩa có thể được sử dụng để xác định các phần khác nhau của trang web
Hy vọng bạn hiểu rõ về thẻ phần. Trước khi xem qua nội dung, trước tiên hãy tìm hiểu các khái niệm cơ bản về HTML như thẻ div, thẻ span, thẻ hình ảnh, thẻ ngữ nghĩa, lớp và id
Trong mã, chúng tôi cũng đang sử dụng một số ảnh được tải lên trên amazon AWS. Đừng lo lắng, bạn không cần biết về dịch vụ Amazon AWS để biết thông tin cơ bản. Dịch vụ AWS là dịch vụ đám mây do Amazon cung cấp
<section id="sidebar"> <div class="white-label"> </div> <div id="sidebar-nav"> <ul> <li class="active"><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li> <li><a href="#"><i class="fa fa-desktop"></i> My Website</a></li> <li><a href="#"><i class="fa fa-usd"></i> Ecommerce</a></li> <li><a href="#"><i class="fa fa-pencil-square-o"></i> My Blog</a></li> <li><a href="#"><i class="fa fa-sitemap"></i> SEO Tools</a></li> <li><a href="#"><i class="fa fa-line-chart"></i> Reporting</a></li> <li><a href="#"><i class="fa fa-comments-o"></i>Social Marketing</a></li> <li><a href="#"><i class="fa fa-map-marker"></i> Get Traffic</a></li> <li><a href="#"><i class="fa fa-users"></i> Employees</a></li> <li><a href="#"><i class="fa fa-calendar-o"></i> Reservations</a></li> <li><a href="#"><i class="fa fa-calendar"></i> Calendar</a></li> </ul> </div> </section>
- trước hết, bằng cách sử dụng thẻ phần, chúng tôi sẽ tạo một phần cho cấu trúc bảng điều khiển của mình với id là “thanh bên”
- Bây giờ bên trong thẻ phần của chúng tôi, chúng tôi sẽ tạo các mục danh sách khác nhau cho thanh bên của bảng điều khiển của chúng tôi. Sử dụng thẻ danh sách không có thứ tự, chúng tôi sẽ tạo một danh sách các mục menu, chúng tôi sẽ thêm lớp biểu tượng cùng với một số mục để tạo mục danh sách menu của thanh bên của chúng tôi
- The menu items of our sidebar along placed inside the tag to add the hyper link to the text of our dashboard.
Thêm mã HTML cho thiết kế bảng điều khiển
QUẢNG CÁO
Hơn 100 dự án JavaScript với mã nguồn (Người mới bắt đầu đến nâng cao)
QUẢNG CÁO
<section id="content"> <div id="header"> <div class="header-nav"> <div class="menu-button"><!--<i class="fa fa-navicon"></i>--></div> <div class="nav"> <ul> <li class="nav-settings"> <div class="font-icon"><i class="fa fa-tasks"></i></div> </li> <li class="nav-mail"> <div class="font-icon"> <i class="fa fa-envelope-o"></i> </div> </li> <li class="nav-calendar"> <div class="font-icon"> <i class="fa fa-calendar"></i> </div> </li> <li class="nav-chat"> <div class="font-icon"> <i class="fa fa-comments-o"></i> </div> </li> <li class="nav-profile"> <div class="nav-profile-image"> <img src="//skynet.marketecture.com/user_avatars/258800/Hayley-Helsten.jpg" alt="profile-img" alt="profile image" /> <div class="nav-profile-name"> Jane Smith<i class="fa fa-caret-down"></i> </div> </div> </li> </ul> </div> </div> </div> <div class="content"> <div class="content-header"> <h1>Dashboard</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="widget-box sample-widget"> <div class="widget-header"> <h2>Widget Header</h2> <i class="fa fa-cog"></i> </div> <div class="widget-content"> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/87118/sample-data-1.png" /> </div> </div> <div class="widget-box sample-widget"> <div class="widget-header"> <h2>Widget Header</h2> <i class="fa fa-cog"></i> </div> <div class="widget-content"> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/87118/sample-data-1.png" /> </div> </div> <div class="widget-box sample-widget"> <div class="widget-header"> <h2>Widget Header</h2> <i class="fa fa-cog"></i> </div> <div class="widget-content"> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/87118/sample-data-1.png" /> </div> </div> <div class="widget-box sample-widget"> <div class="widget-header"> <h2>Widget Header</h2> <i class="fa fa-cog"></i> </div> <div class="widget-content"> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/87118/sample-data-1.png" /> </div> </div> </div> </section>- Bây giờ chúng tôi sẽ bắt đầu xây dựng khung cho khu vực nội dung của chúng tôi. Chúng tôi sẽ làm điều đó bằng cách tạo một phần mới với id "nội dung" bằng cách sử dụng thẻ phần
- Chúng tôi sẽ sử dụng thẻ thanh điều hướng bên trong phần này để tạo tiêu đề đầu tiên cho trang tổng quan của chúng tôi. Tiếp theo, chúng ta sẽ thiết kế thanh điều hướng của bảng điều khiển
- Chúng tôi sẽ thêm các biểu tượng khác nhau vào thanh điều hướng của mình bằng cách sử dụng các lớp phông chữ tuyệt vời cho các biểu tượng trong danh sách không có thứ tự
- Bây giờ, chúng tôi sẽ thêm các biểu đồ khác nhau cho nội dung bên trong bảng điều khiển của mình bằng cách sử dụng thẻ div và hình ảnh
ĐẦU RA HTML. -
QUẢNG CÁO
Thiết kế bảng điều khiển CSS CODE. -
Vì bố cục cơ bản của chúng tôi đã được thực hiện cho trang bảng điều khiển nhưng nó vẫn trông nhàm chán và rối mắt. Vậy phải làm gì bây giờ?
QUẢNG CÁO
Tôi nghĩ điều gì sẽ xảy ra nếu chúng ta thêm một số màu sắc và căn chỉnh? . -
QUẢNG CÁO
Hơn 50 dự án Html, Css & Javascript với mã nguồn
Chúng tôi sẽ sử dụng các khái niệm CSS cơ bản để tạo kiểu cho nội dung HTML. Tôi hy vọng bạn quan tâm đúng mức đến các khái niệm về lớp và id và bộ chọn của chúng nếu sau đó bạn chuyển sang mã CSS. Về cơ bản, chúng ta đang sử dụng mô hình Border-Box, Flex-box để tạo kiểu và các khái niệm cơ bản hơn như padding, margin và float
html, body { font-family: "Open Sans", sans-serif; height: 100%; } body { background: #FFFFFF; height: 100%; } img { max-width: 100%; } ul { list-style: none; margin: 0; padding: 0; } a { text-decoration: none; } #header { float: left; width: 100%; background: #ffffff; position: relative; } .white-label { float: left; background: #33373B; max-width: 210px; padding: 10px; min-height: 44px; background: #279BE4; width: 100%; max-height: 44px; } .white-label img { max-height: 43px; } .header-nav { min-height: 64px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #279BE4; } .menu-button { float: left; font-size: 29px; color: #fff; padding: 12px 19px; } .nav ul { height: 64px; float: right; } .nav ul li { float: left; position: relative; padding: 11px; } .nav > ul > li:first-child { border-left: none; } .nav ul li a { color: #fff; padding: 1px; float: left; } .nav ul li i { color: #fff; } .nav ul li:hover { background: #01A9F0; color: #fff; } .user-profile { float: right; } .user-profile > div { float: left; padding: 20px 8px; position: relative; } .user-profile i { font-size: 1.2em; color: #5F6F86; } .user-profile i:hover { color: #397AC5; } .font-icon i:after { position: absolute; content: "3"; background: #E74C3C; color: #fff; font-size: 12px; border-radius: 50%; width: 10px; height: 10px; padding: 3px 4px 4px 3px; text-align: center; top: 12px; right: 11px; } .font-icon { padding: 8px 10px; } .font-icon i { font-size: 24px; } .nav-mail .font-icon i:after { background: #2ECC71; } div.user-image { padding: 9px 5px; margin: 0 5px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } .nav-profile { background: #0274BD; } .nav-profile-image img { width: 39px; height: 41px; border-radius: 50%; float: left; } .nav-profile-name { float: right; margin: 11px 7px 8px 14px; color: #fff; } .nav-profile-name i { padding: 0 0 0 11px; } .nav-chat i:after { display: none; } #sidebar { overflow: hidden; width: 210px; height: 100%; float: left; background: #2A2D33; } #sidebar-nav { width: 106%; height: calc(100% - 95px); padding: 0; background: #2A2D33; border-right: 1px solid #E0E0E0; overflow-y: scroll; } #sidebar-nav h2 { color: #60636B; float: left; width: 100%; font-size: 0.8em; font-family: "Open Sans", sans-serif; font-weight: 600; text-transform: uppercase; padding: 3px 0 2px 20px; border-top: 1px solid #4D4C4C; box-sizing: border-box; margin: 10px 0; } #sidebar-nav ul { } #sidebar-nav ul li { } #sidebar-nav ul li a { color: #C2C2C2; font-size: 0.95em; padding: 15px 20px; float: left; width: 100%; font-weight: 600; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #sidebar-nav ul li:hover a, #sidebar-nav ul li:hover a i, #sidebar-nav li.active a, #sidebar-nav li.active a i { color: #333; } #sidebar-nav ul li:hover a { background: #fff; color: #333; } #sidebar-nav ul li.active a { background: #fff; color: #333; } #sidebar-nav ul li.active a i { background: #fff; } #sidebar-nav i { padding-right: 8px; font-size: 1.3em; color: #60636B; width: 25px; text-align: center; } #content { float: left; width: calc(100% - 210px); height: 100%; word-wrap: break-word; background: #FFFFFF; font-family: Raleway, sans-serif; } ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); } .content { float: left; background: #E9EEF4; width: 100%; height: calc(100% - 64px); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .content-header { background: #fff; float: left; width: 100%; margin-bottom: 15px; padding: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #ccc; } .content-header h1 { margin: 0; font-weight: normal; padding-bottom: 5px; } .content-header p { margin: 0; padding-left: 2px; } .widget-box { background: #fff; border: 1px solid #E0E0E0; float: left; width: 100%; margin: 0 0 15px 15px; } .widget-header { background: #279BE4; } .widget-header h2 { font-size: 15px; font-weight: normal; margin: 0; padding: 11px 15px; color: #F9F9F9; display: inline-block; } .sample-widget { max-width: 47%; } .widget-box .fa-cog { float: right; color: #fff; margin: 11px 11px 0 0; font-size: 20px; }Bước 1. Bằng cách sử dụng bộ chọn thẻ (nội dung) để đặt phông chữ của trang tổng quan thành “Open Sans”, thuộc tính chiều cao để đặt chiều cao của nội dung thành “100%” và thuộc tính nền để đặt màu nền thành “Xanh lam nhạt”, chúng ta có thể
Chiều rộng tối đa của ảnh của chúng tôi sẽ được đặt thành 100% bằng cách sử dụng bộ chọn thẻ (img) và kiểu danh sách sẽ được đặt thành “none” bằng bộ chọn thẻ (ul)
body { font-family: "Open Sans", sans-serif; height: 100%; } body { background: #FFFFFF; height: 100%; } img { max-width: 100%; } ul { list-style: none; margin: 0; padding: 0; } a { text-decoration: none; }Bước 2. Bây giờ, sử dụng (#header), chúng ta sẽ tạo kiểu cho tiêu đề của daelements và shboard. Chúng tôi sẽ căn trái và phải của tiêu đề sang trái và đặt chiều rộng thành 100%. Các thành phần con và các mục trong danh sách menu cũng sẽ nhận được kiểu dáng từ chúng tôi
#header { float: left; width: 100%; background: #ffffff; position: relative; } .white-label { float: left; background: #33373B; max-width: 210px; padding: 10px; min-height: 44px; background: #279BE4; width: 100%; max-height: 44px; } .white-label img { max-height: 43px; } .header-nav { min-height: 64px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #279BE4; } .menu-button { float: left; font-size: 29px; color: #fff; padding: 12px 19px; } .nav ul { height: 64px; float: right; } .nav ul li { float: left; position: relative; padding: 11px; } .nav > ul > li:first-child { border-left: none; } .nav ul li a { color: #fff; padding: 1px; float: left; } .nav ul li i { color: #fff; } .nav ul li:hover { background: #01A9F0; color: #fff; } .user-profile { float: right; } .user-profile > div { float: left; padding: 20px 8px; position: relative; } .user-profile i { font-size: 1.2em; color: #5F6F86; } .user-profile i:hover { color: #397AC5; } .font-icon i:after { position: absolute; content: "3"; background: #E74C3C; color: #fff; font-size: 12px; border-radius: 50%; width: 10px; height: 10px; padding: 3px 4px 4px 3px; text-align: center; top: 12px; right: 11px; } .font-icon { padding: 8px 10px; } .font-icon i { font-size: 24px; } .nav-mail .font-icon i:after { background: #2ECC71; } div.user-image { padding: 9px 5px; margin: 0 5px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } .nav-profile { background: #0274BD; } .nav-profile-image img { width: 39px; height: 41px; border-radius: 50%; float: left; } .nav-profile-name { float: right; margin: 11px 7px 8px 14px; color: #fff; } .nav-profile-name i { padding: 0 0 0 11px; } .nav-chat i:after { display: none; }Bước 3. Thanh bên bây giờ sẽ có kiểu. Chúng tôi sẽ đặt tràn thành "ẩn" bằng cách sử dụng thuộc tính tràn. Thanh bên sẽ nổi sang trái bằng cách sử dụng thuộc tính float với các cài đặt sau. chiều rộng 210px, chiều cao 100% và khác. Các phần tử thanh bên của chúng ta giờ đây sẽ nhận được kiểu dáng và màu phông chữ sẽ được thay đổi thành màu xám
#sidebar { overflow: hidden; width: 210px; height: 100%; float: left; background: #2A2D33; } #sidebar-nav { width: 106%; height: calc(100% - 95px); padding: 0; background: #2A2D33; border-right: 1px solid #E0E0E0; overflow-y: scroll; } #sidebar-nav h2 { color: #60636B; float: left; width: 100%; font-size: 0.8em; font-family: "Open Sans", sans-serif; font-weight: 600; text-transform: uppercase; padding: 3px 0 2px 20px; border-top: 1px solid #4D4C4C; box-sizing: border-box; margin: 10px 0; } #sidebar-nav ul { } #sidebar-nav ul li { } #sidebar-nav ul li a { color: #C2C2C2; font-size: 0.95em; padding: 15px 20px; float: left; width: 100%; font-weight: 600; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #sidebar-nav ul li:hover a, #sidebar-nav ul li:hover a i, #sidebar-nav li.active a, #sidebar-nav li.active a i { color: #333; } #sidebar-nav ul li:hover a { background: #fff; color: #333; } #sidebar-nav ul li.active a { background: #fff; color: #333; } #sidebar-nav ul li.active a i { background: #fff; } #sidebar-nav i { padding-right: 8px; font-size: 1.3em; color: #60636B; width: 25px; text-align: center; }Bước 4. Bây giờ tất cả những gì còn lại là tạo kiểu cho nội dung của chúng ta và đặt thuộc tính float ở bên trái. Nội dung của chúng tôi có cài đặt chiều cao 100%. Chúng tôi sẽ cung cấp các yếu tố khác nhau của kiểu dáng trang web của chúng tôi bằng cách sử dụng bộ chọn lớp. Màu nền cho tiêu đề tiện ích mà chúng tôi đã chọn là màu xanh da trời. ” Ngay khi bạn quen với kiểu dáng, tôi khuyên bạn chỉ cần đọc mã
________số 8_______ĐẦU RA CSS. -
Mã thiết kế bảng điều khiển đơn giản trong HTML & CSS
Video trực tiếp
https. //www. codewithrandom. com/wp-content/uploads/2022/08/Untitled-14. mp4
Hy vọng bạn thích hướng dẫn này và có thể tạo Thiết kế Bảng điều khiển của riêng mình bằng HTML và CSS và cải thiện hiệu quả của bạn trong việc phát triển Frontend