移动互联网站之html5单页面设计,html5 移动端单页面布局

迈不过友情╰ 2022-10-06 09:55 154阅读 0赞

移动端的web网页使用的是响应式设计，但一般我们看到的网站页面都是跳转刷新得到的，比如通过点击一个menu后进入到另一个页面

今天来说下是移动端的单页面的布局。单页面就是一切操作和布局都是在一个页面下进行 不需要页面跳转 ，再通俗的说就是类似于平常的选项卡

但是他又比选项卡要复杂一点 因为他是在手机端 并且当做是一个页面

单页面的作用以及优势：

1.嵌套到native里实现app的混合开发

2.数据量小的页面用单页面便于开发和维护

3.无需跳转页面响应更快

代码实践

1 页面html结构

复制代码

html5 移动端单页面布局

![Image 1][]

*  Html5
 *  Css3
 *  Javascript
 *  About

复制代码

注：页面图片均来自dribbble

demo里面我用的全是图片静态展示 你可以添加自己的结构或动态程序

页面结构跟我们平常写的选项卡没什么区别，接下来我们用css装饰这个结构让他在手机上呈现出页面的效果

2 css

复制代码

/\*初始化css\*/

\*\{ margin:0; padding: 0;\}

li\{ list-style-type: none;\}

img\{ max-width: 100%; display: block; margin: 0 auto 5px auto;\}

html,body\{ width: 100%; height: 100%; background: \#e4e4e4;

\-webkit-tap-highlight-color: rgba(88,44,22,0.9);

\-webkit-touch-callout: none;

\-webkit-user-select: none;

/\*主体页面样式\*/

.main\{ width: 100%; height: auto; position: relative;\}

.main section\{ width: 100%; height: auto; position:absolute; left: 0; top:0; \}

.main section.hide\{ display: none;\}

.main section.curr\{ display: block;\}

/\*菜单样式\*/

.menu\{ width: 100%; height: 45px; position: fixed; bottom:0; left:0; box-shadow: \#2d2d2d 0 0 4px;background:\#0099cc;\}

.menu.menucurr\{ background: \#ea4c88;\}

.menu ul\{width: 100%; height: 100%; \}

.menu li\{ width: 24.9%; height: 100%; float: left; line-height: 45px; text-align: center; background: \#0099cc; color:\#fff;\}

.menu li.curr\{ background: \#ea4c88;\}

.menu li:nth-child(1),.menu li:nth-child(2),.menu li:nth-child(3)\{ border-right:1px solid \#663300;\}

复制代码

移动端的页面多数情况下用百分比或者媒体查询来设置页面的宽高度 这样会达到响应的效果

这里解释几点

1.-webkit-tap-highlight-color: rgba(0,0,0,0);也可以写成-webkit-tap-highlight-color: transparent; 去掉点击时高光显示 你也可以更改里面的参数 达到你想要的点击显示高光效果

2.-webkit-touch-callout: none; //长按页面时不触发系统菜单

3.-webkit-user-select: none; //长按无法选择文本 这个很有用 一般如果body里面没有添加这个属性的手机页面 当我们长按某段文字的时候就会出现选中这段文字弹出“复制，全选”等选项 但在webapp开发里 这个就显得很不友好 所以尤其是在webapp开发的时候 为了达到与native一样的真实效果 必须的添加

4.html,body\{ width: 100%; height: 100%;\} 这个是整个文档的初始化宽高度 后面的子级都是按照这个数据设置

5.main和子级的height都设置为auto 你也可以不用设 但如果你的页面是允许滚动的话最好还是要设一下

6.我们把menu使用固定定位到页面底部 你也可以把他定位在顶部 或任何你想定位的地方

7.menu 里面的tab我们使用的是百分比分配 因为有border-right所以不能很准确的分配多少 这个应该会有什么更精准的方法平均分配 待研究

3 js

复制代码

$(function()\{

$(".menu li").each(function(index)\{

$(this).tap(function()\{

$(this).addClass("curr").siblings().removeClass("curr");

$(".main section").eq(index).show().siblings().hide();

if(index==3)\{