共计 1666 个字符，预计需要花费 5 分钟才能阅读完成。
那天尝试应用 Lightly 的 HTML 在线编辑器在 iPad 上编程，成果切实太惊艳啦！从导入素材到预览网页成果，我素来没想过在 iPad 上竟然还能够文本高亮和主动填充，编程体验曾经齐全能够媲美电脑了。
在这篇教程中，咱们次要在 iPad 上演示 HTML 在线编辑器的成果，大家能够依据本人的爱好随便抉择其余平板或笔记本电脑作为编程设施哦！另外，这篇文章须要肯定的 HTML 和 CSS 编程根底。之前从未接触 HTML 和 CSS 编程的小伙伴，能够查看咱们的一些入门文章：HTML 制作可切换主题的简略网页
教程素材和源代码传送门：https://03c306cbfb-share.ligh…
先来看看网页的预期成果：
关上 Lightly 的 HTML 在线编辑器后，咱们能够在我的项目面板上新建 HTML 我的项目，而后再从左侧我的项目栏中上传所须要的素材。间接应用素材和代码包关上我的项目快照的小伙伴，也能够点击“复制我的项目”把整个我的项目的所有内容复制到本人的我的项目面板中。
如果是间接新建空白我的项目的小伙伴，大家关上我的项目后会发现外面曾经内置了 Hello World 的根底模板。点开 HTML 文件后，能够间接在 IDE 内的屏幕右侧预览网页成果，在 iPad 中也能够间接上传设施中的文件。
因为网页页面其实很简洁，HTML 文件其实很简略，咱们只须要专一 <body> 标签的局部就能够了。咱们这次做的首页能够分为两个局部：顶端的导航栏和首页内容。
导航栏局部
咱们持续把导航栏的内容细化，放到 <div> 标签分类标签里。<div> 的英语全称是 division，即分区。咱们能够通过 class 来给分区命名，而后在 CSS 中调整参数。
在导航栏中，咱们别离放入网页 LOGO、导航链接文本和购物车图标。其中，<nav> 标签即导航栏标签，咱们能够在外面设置清单和链接文本。
<div class="container">
<div class="navbar">
<img src="asset/logo.png" class="logo">
<nav>
<ul>
<li><a href=""> 首页 </a></li>
<li><a href=""> 对于 </a></li>
<li><a href=""> 合集 </a></li>
<li><a href=""> 类型 </a></li>
</ul>
</nav>
<img src="asset/cart.png" class="cart">
</div>
在 Lightly 中，咱们只须要打出局部关键字，就能够应用 Tab 来主动填充代码。在 iPad 上也能够哦！
实现 HTML 的局部后，咱们转到 CSS 文件调整页面的元素。这时候，咱们方才所应用的 div 分类名称就能派上用场了。
在 CSS 文件中，咱们依据刚刚的分类调整各个参数。CSS 中的参数品种很多，大家能够依据本人的想法逐个进行调整，试验每一种参数的不同成果：查看 CSS 文档。
内容局部
内容这里次要也分成两个大部分，一个是文字文本、一个是图像。文本照例新建一个 div 并命名，不便之后在 CSS 中调整参数：
<div class=”content”>
<a href=""class="btn">2022 新品 </a>
<h1> 好的衣服 <br> 能凸显你的品尝 </h1>
<p> 时下最热门的夏季服装 </p>
<div class="arrow-icons">
<img src="asset/back-arrow.png" alt="">
<img src="asset/next-arrow.png" alt="">
</div></div>
在这个局部中，咱们增加了按钮、题目、文本内容和另外两个按钮。实现后，咱们持续回到 CSS 中调整参数和设计。
最初，大图像间接应用 <img> 标签导入即可：<img src="asset/img.png" alt=""class="feature-img">
再次切换到 HTML 文件中，点击运行就能够预览我的项目文件成果了！
Lightly HTML 在线编辑器由 TeamCode 研发。TeamCode 专一于云原生合作开发畛域，简化开发流程，帮忙开发者与企业高效合作开发。