- Cross-platform Desktop Application Development:Electron,Node,NW.js,and React
- Dmitry Sheiko
- 78字
- 2021-07-15 17:36:24
An HTML prototype
We've just reached the point where we can start templating our application. Using HTML and CSS, we will achieve the intended look and feel. Later, we will bind JavaScript modules to the acting elements.
We start by replacing the content of index.html with the following code:
./index.html
<!DOCTYPE html>
<html>
<head>
<title>File Explorer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./assets/css/app.css" rel="stylesheet" type="text/css">
</head>
<body class="l-app">
<header class="l-app__titlebar titlebar">
</header>
<div class="l-app__main l-main">
<aside class="l-main__dir-list dir-list">
</aside>
<main class="l-main__file-list file-list">
</main>
</div>
<footer class="l-app_footer footer">
</footer>
</body>
</html>
Here, we just defined the page layout with semantically meaningful HTML tags. As you can see, we refer to ./assets/css/app.css that we are about to create.
推薦閱讀
- Redis入門指南(第3版)
- 自己動手實現Lua:虛擬機、編譯器和標準庫
- Learning RabbitMQ
- DevOps入門與實踐
- 焊接機器人系統操作、編程與維護
- RISC-V體系結構編程與實踐(第2版)
- Internet of Things with ESP8266
- 持續集成與持續交付實戰:用Jenkins、Travis CI和CircleCI構建和發布大規模高質量軟件
- 大學計算機基礎實驗指導
- PhoneGap 4 Mobile Application Development Cookbook
- 嵌入式Linux C語言程序設計基礎教程
- Getting Started with Electronic Projects
- Java自然語言處理(原書第2版)
- C語言程序設計
- ASP.NET Core 2 High Performance(Second Edition)