Xin chào các học viên……. Chào mừng bạn đến với viết mã với blog ngẫu nhiên…Hôm nay trong blog này, chúng ta sẽ tìm hiểu cách xây dựng Thiết kế bảng điều khiển Chỉ sử dụ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 Thiết kế bảng điều khiển bằng HTML &
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
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
Chơi bài kiểm tra không giới hạn về HTML, CSS và JavaScript – Bấm vào đây
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
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. Ví dụ về các yếu tố ngữ nghĩa. Thêm mã HTML cho thiết kế bảng điều khiển Hơn 100 dự án JavaScript với mã nguồn [Người mới bắt đầu đến nâng cao] Lorem ipsum dolor sit amet, consectetur adipiscing elit. ĐẦU RA HTML. - 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ờ? 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? . - 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 tôi đ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ư đệm, lề và nổi ĐẦU RA CSS. - 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 – Không nói gì về nội dung của nó, và
Dashboard
Dashboard
Widget Header
Widget Header
Widget Header
Widget Header
Thiết kế bảng điều khiển CSS CODE. -
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ảng điều khiển trong HTML là gì?
Làm cách nào để thiết kế bảng điều khiển trong HTML CSS?
Chủ Đề