本文简介：1、手机移动端页面的自适应2、手机触摸手动滑动效果一、header信息的设置（自适应） 1、声明信息 <!DOCTYPE HTML> 2、编码设置 <meta charset="UTF-8"> 3、移动设备特别设置（重要声明！） <meta content="width=device-width,user-scalable=no" name="viewport"> Viewport说明：该设置可使我们开发出的页面/产品 大小可适应各种高端移动设备width=device-width 为设备的宽度.user-scalable=no/yes 此功能为用户调整缩放。默认为yes。一般设置为noPS:初次尝试制作移动端页面。亲们，由于我没有加上面的viewport声明，结果导致页面狼狈不堪。 二、手机触摸手动滑动效果1、触摸屏效果滚动组件（js必须包含的部分）
<!--触摸屏效果滑动组件--> <script type="text/javascript" src="./js/touch.js"></script> <script type="text/javascript" src="./js/zepto.extend.js"></script> <script type="text/javascript" src="./js/zepto.ui.js"></script> <script type="text/javascript" src="./js/slider.js"></script> <!--触摸屏效果滑动组件end-->
本人亲测以上4个js必须包含，缺一不可。2、所要在手机端做滑动效果的部位（html代码部分）
<div class="head_nav_C" id="hongye_nav" style="height:60px;"> <div style="background-color:white;"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> <div style="background-color:white;"> bbbbbbbbbbbbbbbbbbbbbbbbbbb </div> <div style="background-color:white;"> cccccccccccccccccccccccccccc </div> <div style="background-color:white;"> ddddddddddddddddddddddddd </div> </div>
3、js代码块（改代码会在动在要加滑动效果的html代码块中自动生成一块代码）
<script> Zepto(function($){//自动加载zepto组件 $("#hongye_nav").slider({//为html 对应的id部分最佳slider属性 autoPlay : false, //是否自动 showDot : false, loop : true,//是否循环 }); }) </script>
4、加载slider.css样式
<link rel="stylesheet" type="text/css" href="css/slider.css" />
附：另外一种简单的写法(适用于幻灯)html代码部分<div id=”fla”> <img lazyload=”images/img2.jpg” /> <img lazyload=”images/img3.jpg” /></div>2、js代码部分<script>//创建slider组件$('#fla').slider();</script>附：小知识一、字体效果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;}
转载于:https://www.cnblogs.com/tuyile006/p/4560429.html
相关资源：数据结构—成绩单生成器