咨询邮箱 咨询邮箱:1439568097@qq.com 咨询热线 咨询热线:18671298089 微博 微信
您的位置:酷奇网络 > 新闻动态 > 网站建设 > >
H5如何布局?这个才是入门篇…
发表日期:2017-06-12    文章编辑:酷奇网络    浏览次数:

H5如何布局?这个才是入门篇…

saying:

1.感谢基友K,给了很多温馨提示。想叫他Lee吧,很尴尬,那我该叫什么?本家的痛。

2.感谢工作。活很多,自己也下海了。很多年前就接触H5了,一直没什么机会深挖。这次做了个移动端的网站,so easy。

3.感谢生活。虽然三十好几了,还是喜欢鼓捣些技术方面的玩意,谈不上热爱,只能说是一种习惯。会点技术,混口饭还是很方便的。

H5布局如何下手?

所谓H5布局,说简单点,就是用H5特有的新标签(语义化)来替代传统布局方式。几点注意如下:

1)css写法不变,比如你定义标签,那css里就要这样写header{}。另外,H5标签也是可以加class或id的,css写法没啥区别,比如,.样式名{}  #样式名{};

2)移动端网站H5标签(包括css3)是支持的,放心大胆去弄,不要去考虑狗屁的兼容。如果是单纯PC网站,建议传统div方式布局比较合适;

3)响应式网站,技术强迫症,必须要用H5来做,那html5shiv.js或modernizr.js是不错的IE兼容解决方案。(比如李勇的小拼sem博客)。注意:ie8以下是没办法的,可以页面顶部弹出提醒升级你的IE,算友好体验的一部分吧。

4)关于bootstrap,感兴趣的同学快上手吧,老外的东西,不得不承认,真TM是NB轰轰的。标准、标准、太标准了。

H5布局标签如何选择?

个人理解,傻瓜式解释。要是看不懂,说好的一筐豆腐呢?

全局:

<header><header>:相当于<div class="header"></div>

<footer></footer>:相当于<div class="footer"></div>

<section></section>:相当于<div></div>,以前习惯的div改为section,当然你继续用div也一样

<aside></aside>:相当于<div class="sidebar"></div>,比如常见的侧边栏

导航或者分页:

<nav></nav>:<div class="nav"><ul></ul></div>

文章、帖子或者其它独立的页面:

<article></article>:相当于<div class="article"></div>

<time></time>:日期时间什么的放里面就好了,相当于<div class="time">2016-05-21 15:43:21</div>,支持pubdate属性,表示为发布日期


Copyright © 2013-2016 酷奇网络 版权所有   咨询热线:18671298089   备案号:浙ICP备12042793号-1