使用HTML在线编辑器在iPad上写出精美网页

使用Lightly的HTML在线编辑器在iPad上编程，支持导入素材到预览网页效果，在iPad上也可以文本高亮和自动填充，给你媲美电脑的编程体验。

在这篇教程中，我们主要在iPad上演示HTML在线编辑器的效果，大家可以根据自己的喜好随意选择其他平板或笔记本电脑作为编程设备哦！另外，这篇文章需要一定的 HTML 和 CSS 编程基础。之前从未接触 HTML 和 CSS 编程的小伙伴，可以查看我们的一些入门文章： 【HTML / CSS / JS 编程入门】制作可切换主题的简单网页

教程素材和源代码传送门：https://03c306cbfb-share.lightly.teamcode.com

先来看看网页的预期效果：

打开Lightly的HTML在线编辑器后，我们可以在项目面板上新建HTML项目，然后再从左侧项目栏中上传所需要的素材。直接使用素材和代码包打开项目快照的小伙伴，也可以点击“复制项目”把整个项目的所有内容复制到自己的项目面板中。

如果是直接新建空白项目的小伙伴，大家打开项目后会发现里面已经内置了 Hello World 的基础模板。点开 HTML 文件后，可以直接在 IDE 内的屏幕右侧预览网页效果，在 iPad 中也可以直接上传设备中的文件。

由于网页页面其实很简洁，HTML 文件其实很简单，我们只需要专注 标签的部分就可以了。我们这次做的首页可以分为两个部分：顶端的导航栏和首页内容。

导航栏部分

我们继续把导航栏的内容细化，放到