- 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.
推薦閱讀
- Oracle從入門到精通(第3版)
- TypeScript入門與實戰
- 大學計算機應用基礎實踐教程
- Drupal 8 Configuration Management
- 前端HTML+CSS修煉之道(視頻同步+直播)
- Python Web數據分析可視化:基于Django框架的開發實戰
- Essential C++(中文版)
- IoT Projects with Bluetooth Low Energy
- Python Machine Learning Blueprints:Intuitive data projects you can relate to
- Visual Basic程序設計基礎
- 深入理解Java虛擬機:JVM高級特性與最佳實踐
- 和孩子一起學編程:用Scratch玩Minecraft我的世界
- Professional JavaScript
- 程序員的英語
- Java核心技術速學版(第3版)