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 Show
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. QUẢNG CÁO Ví dụ về các yếu tố ngữ nghĩa. <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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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: to indicate navigation, header, and footer. 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>
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="https://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="https://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="https://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="https://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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/87118/sample-data-1.png"
/>
</div>
</div>
</div>
</section>
ĐẦ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ếphttps. //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 Làm cách nào để tạo bảng quản trị bằng HTML và CSS?Để lấy mã HTML CSS và JavaScript sau cho Mẫu bảng điều khiển dành cho quản trị viên này, trước tiên, bạn cần phải tạo hai tệp, một tệp là tệp HTML và tệp còn lại là tệp CSS< . Sau khi tạo hai tệp này, bạn có thể sao chép-dán các mã đã cho vào tài liệu của mình. . After creating these two files, you can copy-paste the given codes into your document.
Làm cách nào để tạo bảng điều khiển trong bootstrap?Hướng dẫn cách xây dựng trang tổng quan bằng Bootstrap . Tạo mẫu khởi động Tạo thanh điều hướng phong cách tùy chỉnh Tạo menu phụ Tạo phần bảng Phần tạo thẻ Phần kết luận Làm cách nào để tạo bảng điều khiển trong JS?Định cấu hình ứng dụng khách . Cài đặt gói npm. Bấm chuột phải vào dự án, bấm Thêm. Mục mới… và thêm Tệp cấu hình npm vào dự án. . Thêm và định cấu hình Bảng điều khiển JavaScript. . Thêm tài liệu tham khảo. . Định cấu hình Bộ điều khiển Bảng điều khiển. . #Cấu hình định tuyến. . #Tạo Bộ nhớ Bảng điều khiển. . #Cung cấp Bảng điều khiển web có dữ liệu Làm cách nào để tạo trang đăng nhập quản trị viên trong HTML?CHÈN VÀO `adminlogin` (`id`, `tên người dùng`, `mật khẩu`) GIÁ TRỊ (NULL, 'admin', 'admin'), (NULL, 'admin2', 'admin2'); After inserting the values, the table will look like this. |
