HTML5移动网站制作

  • A+
所属分类:HTML5

本文是基于zepto框架下的手机移动端网站制作教程,适用于苹果的ios系统,和android系统。随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应 用是最好的选择。然而,每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢。本文可以帮你解决这个问题。
感谢那些热心的朋友:http://118.186.246.148/hongyepay/ 给予帮助和支持。
本文简介:
1、手机移动端页面的自适应
2、手机触摸手动滑动效果

一、header信息的设置(自适应)
1、声明信息
2、编码设置
3、移动设备特别设置(重要声明!

Viewport说明:该设置可使我们开发出的页面/产品 大小可适应各种高端移动设备
width=device-width 为设备的宽度.
user-scalable=no/yes 此功能为用户调整缩放。默认为yes。一般设置为no
PS:初次尝试制作移动端页面。亲们,由于我没有加上面的viewport声明,结果导致页面狼狈不堪。

添加前=》
HTML5移动网站制作
添加后=》
HTML5移动网站制作

二、手机触摸手动滑动效果
1、触摸屏效果滚动组件(js必须包含的部分)

  1.  type="text/javascript" src="./js/touch.js">
  2.  type="text/javascript" src="./js/zepto.extend.js">
  3.  type="text/javascript" src="./js/zepto.ui.js">
  4.  type="text/javascript" src="./js/slider.js">

复制代码

本人亲测以上4个js必须包含,缺一不可。
2、所要在手机端做滑动效果的部位(html代码部分)

  1. <div class="head_nav_C" id="hongye_nav" style="height:60px;">
  2.             <div style="background-color:white;">
  3.                     aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  4.             
  5.             <div style="background-color:white;">
  6.                       bbbbbbbbbbbbbbbbbbbbbbbbbbb
  7.             
  8.             <div style="background-color:white;">
  9.                         cccccccccccccccccccccccccccc
  10.             
  11.             <div style="background-color:white;">
  12.                          ddddddddddddddddddddddddd
  13.             
  14.         

复制代码

3、js代码块(改代码会在动在要加滑动效果的html代码块中自动生成一块代码)

复制代码

4、加载slider.css样式

  1. <link rel="stylesheet" type="text/css" href="css/slider.css" />

复制代码

附:
另外一种简单的写法(适用于幻灯)
html代码部分


2、js代码部分

附:小知识
一、字体效果
color:#FFF 定义字体的颜色
text-shadow:0 0 2px #146F61;(css3.0特效)
CSS3.0的文字阴影 text-shadow
语法:text-shadow: h-shadow v-shadow blur color;
也就是
text-shadow:【x轴(x offset) y轴(Y offst) 模糊半径(Blur) 颜色(color)】
例如:text-shadow: 5px 5px 5px #FF0000;

二、盒子模型圆角效果
border-radius 属性
例子:
div
{
border:2px solid;
border-radius:25px;
}
等价于:
div{
border:2px solid;
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
}

  • 我的微信小程序
  • 长按二维码识别查看微信小程序
  • weinxin
  • 我的个人微信号
  • 长按识别加我个人微信号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: