H5的具体制作流程是怎样的
发布网友
发布时间：2022-05-05 05:37
共4个回答
懂视网
时间：2022-05-12 08:07
本人水平有限,能力一般,因此文章中将不可避免的有错误和遗漏.因此,欢迎大家在文章里评论留言.我将在第一时间内回应.谢谢大家.
最简单的列表
首先,来一个最简单的列表.我们要实现的效果,如下图所示:
如上所示,我们要实现的就是这样简单的列表.这个没有丝毫的难度.
html代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <title>list 1</title> <link rel="stylesheet" href="../style/style.css"> </head> <body> <p class="list_1"> <ul> <li><a href="">这是一个列表1</a></li> <li><a href="">这是一个列表2</a></li> <li><a href="">这是一个列表3</a></li> <li><a href="">这是一个列表4</a></li> <li><a href="">这是一个列表5</a></li> <li><a href="">这是一个列表6</a></li> <li><a href="">这是一个列表7</a></li> <li><a href="">这是一个列表8</a></li> </ul></p></body></html>
这里需要说明的是,移动端一定需要加上<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />这段代码.否则移动端的浏览器会当成PC版的网页,是可以伸缩的.
建议,服务器,数据库,后端程序,前台html以及CSS都全部统一为utf-8编码.避免因为编码造成乱码的情况.
SASS代码
.list_1 { ul {}
li {
border-bottom: 1px solid #ddd;padding:0 1.6rem;
a {display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;}
}
}这里的单位全部使用的是rem,我们reset.scss里面,已经将html的字体大小设置为了62.5%,也就相当于正常情况下的10px.也就是说,上面的1.6rem相当于16px.至于为什么这么写,请到本文开头的链接里面查看前面我写的文章中的解释.
不会sass的,请先阅读sass相关教程.不要觉得难,一个小时保证学会,两天能玩的非常溜.
还是一个简单的列表
首先,我们来看效果图:
这个列表咋一看,和上面的列表没有任何区别.但是,我们仔细看一下,会发现下面的线条是不顶头的.
不要奇怪,很多时候,设计师这样设计,是有其自己的设计理念的.作为前端人员,我们要忠实的还原设计师设计的一些小的细节.即便你认为这有点多此一举.呵呵.
html代码,和第一个示例完全一样.这里不再重复代码
SASS代码
.list_1 { ul {padding-left: 1.6rem;}
li { border-bottom: 1px solid #ddd;padding-right: 1.6rem;
a {display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;}
}
}其实,也只是稍微的转换一下思路.将在demo1里面的加载li上的padding值,分配到ul和li上,就可以了.
小结
好,通过这样两个demo,我们应该对一些基本的情况有所了解了.FungLeo将在下面的章节里面,逐渐的提高列表的复杂程度.为大家呈现各种各样不同的列表.
这是两道开胃菜,非常的简单.需要说明的是这样几点:
不要给任何元素设置宽度,因为这是一个独占一行的列表
在不设置宽度的情况下,可以设定内填充,不会造成任何问题.
要做好隐藏溢出处理,防止标题过长导致折行.
热心网友
时间：2022-05-12 05:15
H5如此势头，不得不让营销汪对H5页面的未来充满了期待，越来越多的人开始在营销中运用H5页面。其实在移动端各个领域，H5页面的叫法很多，也会称为翻翻看、手机微杂志、广告页、场景应用、海报\画报（动态海报、指尖海报、掌中海报、动画海报、微画报、微海报）等等，经常能见到的就是滑动翻页。
然而大企业大公司的土豪都在利用自己强大资源和技术比拼H5场景页面，一些小企业或普通独立营销者就只能眼巴巴看着吗？
大家可以借助互动展示在线制作工具，轻松的制作出大师级的微信H5页面。
热心网友
时间：2022-05-12 06:33
其次，你要构想一下整个作品的创意形式、页面布局、逻辑结构等，最好可以用思维脑图把关键流程走向画下来，以防止制作过程中思维混乱。
明确好以上两大步后，你就可以进行具体的制作了。
每种创意型H5的制作步骤都是不一样的，建议新手朋友先熟悉一下意派Epub360的基本组件，再到其教程中心搜索关键词，以找到相应的教程。
热心网友
时间：2022-05-12 08:08
H5是HTML的一种，HTML第五代语言，通常我们所说的H5就是H5广告，大多是在某信上宣传营销使用的。
一般情况下，一个H5项目涵盖策划、创意、平面、动画交互、前后端的开发、推广等方面，需要多人团队的配合，随着互联网的发展，H5技术的普及，对人力成本的控制和开发效率需求，萌生出一堆H5工具，其中就有epub360，专业H5页面制作工具，大大缩短项目的开发周期，几乎一个人就可以完成以前需要一个团队制作的H5项目。
当然，除了H5工具，楼主有兴趣也可以尝试下自己学习编程，希望对您有帮助~
