×

html5网页设计(菜鸟教程html5网页设计)

前端技术网 前端技术网 发表于2024-01-29 02:23:50 浏览3136 评论0

抢沙发发表评论

一、HTML5移动网页的设计稿尺寸应该是多少

HTML5的移动端网页设计稿,通常情况下,内容区为750px或960px或者1080px的,一般不小于750px像素大小(宽度)

设计稿可以比750px大,但是绝对不能比750px小,这个主要是由于当前手机的分辨率相对较高(iPhone6是375物理像素,但实际像素为其两倍,也就是750,这个750就是这么来的)

html5网页设计(菜鸟教程html5网页设计)

如果设计图稿过小,前端在实现图稿的时候里面的图片大小在高分辨率的情况下会显得模糊不清,所以这也是为何要“大”分辨率

此外需要注意的是,要保证页面的基准字体大小,在320px的设计稿当中,最小字体不宜小于12像素,其他像素的设计稿当中,等比例换算即可(12/320px*设计稿像素值)

二、html5如何根据ps图片排版

PS切图是前端界面方向的一个重要环节,需要将设计师的设计1:1还原到web页面。具体操作如下:

1、先将各元素单独切出来,放到一个文件夹内;

2、将ps里的文本等元素关闭显示,再切背景;

3、整合较小的图片做成雪碧图(该步骤可以在第一步时完成);

html5网页设计(菜鸟教程html5网页设计)

4、用HTML代码编写布局及结构;

5、用CSS代码编写呈现效果。

补充:

以上几个步骤可以完成ps切图,在做ps切图时,需要掌握的技能:

1、ps分层切图基础;

2、html基础;

3、css基础;

4、各浏览器解析标准的了解。

三、html怎么设置视频自动播放

我们新建一个html5网页文件,把他命名为test.html,接下来我们用test.html文件来讲解html5如何在网页中显示视频,并且自动播放。

在test.html文件内,视频由<video>标签定义和源属性(Src)<video><sourcesrc=""type="video/mp4"/></video>。

在test.html文件内,<video>标签内,src指存储视频的位置。<video><sourcesrc="movie.mp4"type="video/mp4"/></video>

在test.html文件内,<video>标签内,设置为自动播放的video元素autoplay属性,<videocontrols="controls"autoplay="autoplay">

在浏览器浏览一下test.html,来看看效果

关于html5网页设计的内容到此结束,希望对大家有所帮助。