未登录

开通VIP,畅享免费电子书等14项超值服

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

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

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

 

单页面的作用以及优势:

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

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

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

 

 

 

代码实践

 

1 页面html结构

 

复制代码

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>

    <title>html5 移动端单页面布局</title>

</head>

<body>

    <!--页面主体部分-->

<div class="main">

    <section class="curr">

        <img src=http://www.2cto.com/uploadfile/2014/0921/20140921091158942.png" alt="">

        <img src=http://www.2cto.com/uploadfile/2014/0921/20140921091158508.jpg" alt="">

        <img src=http://www.2cto.com/uploadfile/2014/0921/20140921091158155.png" alt="">

        <img src=http://www.2cto.com/uploadfile/2014/0921/20140921091158753.jpg" alt="">

    </section>

    <section  class="hide">

        <img src=http://www.2cto.com/uploadfile/2014/0921/20140921091158861.jpg" alt="">

        <img src=http://www.2cto.com/uploadfile/2014/0921/20140921091158924.jpg" alt="">

        <img src=http://www.2cto.com/uploadfile/2014/0921/20140921091158651.jpg" alt="">

        <img src=http://www.2cto.com/uploadfile/2014/0921/20140921091158740.png" alt="">

    </section>

    <section class="hide">

        <img src=http://www.2cto.com/uploadfile/2014/0921/20140921091158669.png" alt="">

        <img src=http://www.2cto.com/uploadfile/2014/0921/20140921091158415.png" alt="">

    </section>

    <section class="hide">

        <img src=http://www.2cto.com/uploadfile/2014/0921/20140921091158869.jpeg" alt="">

        <img src=http://www.2cto.com/uploadfile/2014/0921/20140921091158613.png" alt="">

        <img src=http://www.2cto.com/uploadfile/2014/0921/20140921091158648.png" alt="">

    </section>

</div>

<!--页面菜单按钮-->

<div class="menu">

    <ul>

        <li class="curr">Html5</li>

        <li>Css3</li>

        <li>Javascript</li>

        <li>About</li>

    </ul>

</div>

<script src="js/zepto.js"></script>

</body>

</html>

复制代码

注:页面图片均来自dribbble

 

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

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

 

2 css

 

复制代码

<style>

/*初始化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;}

</style>

复制代码

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

这里解释几点

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

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

(责任编辑:幽灵学院)
本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报
从APP上打开文章,阅读全文并永久保存 查看更多类似文章
来自:BlueDemon  > 单页面布局
举报
[荐]  原创奖励计划来了,万元大奖等你拿!
猜你喜欢
类似文章
宋词名家咏秋词五十首?(图文欣赏)
荣威350怎么样?我的乞丐版选车提车经历
青苔造景入门一:在哪里可以找到苔藓?
图片轮播效果代码(html)
加封上行的
smarty 第一条数据判断
更多类似文章 >>
生活服务
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!