本文简介:1、手机移动端页面的自适应2、手机触摸手动滑动效果一、header信息的设置(自适应) 1、声明信息 2、编码设置 3、移动设备特别设置(重要声明!) Viewport说明:该设置可使我们开发出的页面/产品 大小可适应各种高端移动设备width=device-width 为设备的宽度.user-scalable=no/yes 此功能为用户调整缩放。默认为yes。一般设置为noPS:初次尝试制作移动端页面。亲们,由于我没有加上面的viewport声明,结果导致页面狼狈不堪。 二、手机触摸手动滑动效果1、触摸屏效果滚动组件(js必须包含的部分)
本人亲测以上4个js必须包含,缺一不可。2、所要在手机端做滑动效果的部位(html代码部分)
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccccccccccccccccccccccccc
ddddddddddddddddddddddddd
3、js代码块(改代码会在动在要加滑动效果的html代码块中自动生成一块代码)
Zepto(function($){//自动加载zepto组件
$("#hongye_nav").slider({//为html 对应的id部分最佳slider属性
autoPlay : false, //是否自动
showDot : false,
loop : true,//是否循环
});
})
4、加载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;}
查看原文
发表评论