文章/答案/技术大牛

发布

问前端- HTML文件
EN

Stack Overflow用户

提问于 2021-11-16 17:22:37

回答 1查看 28关注 0票数 0

*{
  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>

html

frontend

web-deployment

web-frontend

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-16 17:58:27

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69993535

复制

相似问题

问前端- HTML文件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问前端- HTML文件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问前端- HTML文件
EN