前端 - HTML 个文件

Question

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  position: relative;
}

/*---------------------Dashboard-----------------------*/
.dashboard{
  position: relative;
  width: 100%;
  min-height: 100vh;
}
/*--------------------Dashboard Sidebar Begin-----------------------*/
.dashboard-sidebar{
  position: fixed;
  width: 50px;
  min-height: 100vh;
  background-color: #2E86C1;
  color: white;
  padding: 15px 6px;
}

.dashboard-sidebar .dashboard-sidebar-top{
  position: relative;
  width: 100%;
  min-height: 100vh;
  justify-content: center;
  display: flex;
}

.dashboard-sidebar-top i{
  font-size: 17px;
}
/*-----------------------Dashboard Sidebar End--------------------*/


/*--------------------Dashboard Main Content Start----------------------*/

.dashboard-main-content{
  position: absolute;
  width: calc(100% - 50px);
  height: 100vh;
  left: 50px;
  padding: 10px 15px;
}



.dashboard-main-content .dashboard-app{
  position: relative;
  background-color: white;
  width: 70px;
  height: 70px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.dashboard-main-content .dashboard-app:hover{
  background-color: #EBEDEF;
}


.dashboard-main-content .dashboard-app i{
  font-size: 30px;
  color: #2874A6
}

.app-name{
  font-size: 12px;
  font-family: tahoma, sans-serif;
  color: #2874A6
}



/*--------------------Dashboard Main Content End----------------------*/

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Dashboard</title>
  <link rel="stylesheet" href="dashboard.css">
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>

    <div class="dashboard"><!--Dashboard begin-->
    <div class="dashboard-sidebar"><!--Dashboard sidebar begin-->
      <div class="dashboard-sidebar-top">
        <i class="bx bxs-dashboard"></i>
      </div>
    </div><!--Dashboard sidebar end-->
    <div class="dashboard-main-content"><!--Dashboard contents begin-->
      <div class="dashboard-app"><!--App begin-->
        <i class="bx bx-laptop"></i>
        <div class="app-name">
          <span>Begin Design</span>
        </div>
      </div><!--App end-->
    </div>  <!--Dashboard contents end-->
    </div><!--Dashboard end-->
    <script src="script.js"></script>
  </body>
</html>

我有以下仪表板布局。仪表板有 Begin Design 仪表板应用程序，它将有许多自己的子组件，并将有一个名为 begin-design.html 的单独 html 文件。当用户点击它时，它将把用户带到设计应用程序组件。我的问题是，如何将 begin-design.html 应用程序引入 dashboard.html 文件而不是将整个 begin-design.html 组件写入 dashboard.html 文件？我想将所有组件保存在单独的 html 文件中并将彼此连接在一起。

****HTML****
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Dashboard</title>
  <link rel="stylesheet" href="dashboard.css">
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>

    <div class="dashboard"><!--Dashboard begin-->
    <div class="dashboard-sidebar"><!--Dashboard sidebar begin-->
      <div class="dashboard-sidebar-top">
        <i class="bx bxs-dashboard"></i>
      </div>
    </div><!--Dashboard sidebar end-->
    <div class="dashboard-main-content"><!--Dashboard contents begin-->
      <div class="dashboard-app"><!--App begin-->
        <i class="bx bx-laptop"></i>
        <div class="app-name">
          <span>Begin Design</span>
        </div>
      </div><!--App end-->
    </div>  <!--Dashboard contents end-->
    </div><!--Dashboard end-->
    <script src="script.js"></script>
  </body>
</html>

Answer 1

<a href="begin-design.htmk"><i class="bx bx-laptop"></i>
    <div class="app-name">
      <span>Begin Design</span>
    </div></a>

前端 - HTML 个文件

Frontend - HTML Files

html

frontend

web-deployment

web-frontend