一、header信息的设置(自适应)
1、声明信息 <!DOCTYPE HTML>
2、编码设置 <meta charset="UTF-8">
3、移动设备特别设置( 重要声明! )
<meta content="width=device-width,user-scalable=no" name="viewport">
二、手机触摸手动滑动效果
1、触摸屏效果滚动组件(js必须包含的部分)
本人亲测以上4个js必须包含,缺一不可。
2、所要在手机端做滑动效果的部位(html代码部分)
3、js代码块(改代码会在动在要加滑动效果的html代码块中自动生成一块代码)
4、加载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;
1、声明信息 <!DOCTYPE HTML>
2、编码设置 <meta charset="UTF-8">
3、移动设备特别设置( 重要声明! )
<meta content="width=device-width,user-scalable=no" name="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-->
复制代码
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>
复制代码
- <script>
- Zepto(function($){//自动加载zepto组件
- $("#hongye_nav").slider({//为html 对应的id部分最佳slider属性
- autoPlay : false, //是否自动
- showDot : false,
- loop : true,//是否循环
- });
- })
- </script>
复制代码
- <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;
}
三、触屏引用的jQuery库
<script type="text/javascript" src="http://www.163css.com/myweb/hihilinxuan/template/hihilinxuan/cssjs/2012/12/ifengtouch/js/jquery.min.js">
</script>
<script type="text/javascript" src="http://www.163css.com/myweb/hihilinxuan/template/hihilinxuan/cssjs/2012/12/ifengtouch/js/jquery.touchSwipe.min.js">
</script>
四、给div添加背景图片
<div style="background:url('img/wy_logo_bg01.jpg') no-repeat;width:100%;height:10%"></div>