怎么制作html5手机页面？
我知道现在很多手机的交互页面都是用html5制作，像上下掀页、浮动之类的效果，我现在也需要做类似的手机页面，有什么方法或教程能快速入门吗？...
我知道现在很多手机的交互页面都是用html5制作，像上下掀页、浮动之类的效果，我现在也需要做类似的手机页面，有什么方法或教程能快速入门吗？
展开
展开全部
1、打开百度，在百度上搜索：易企秀，然后点击搜索，在搜索的结果中点击进入易企秀的官方网站。
2、进入后，先登录自己的账号，可以直接用QQ微信登录即可，登录后就可以开始制作自己的手机网页微场景了。
3、首先点击【我的场景】接着点击【制作场景】，接着会进入场景模板选择界面，里面有很多免费的模板。
4、可以在模板中心选择一个自己需要的点击，直接套用模板，也可以选择自己创建一个空白页面。
5、进入后就可以根据自己的需要，将模板里面的文字图片和音乐替换成自己需要的即可，如图所示。
6、还可以给自己的手机网页添加背景音乐，动画效果，跳转链接，特效组件等等。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
随着CSS3的兴起，有一种叫rem的单位渐渐的出现在我们的视野中。它是一个相对单位，能实现响应式的那种。它是相对于html根元素来设置当前文字大小，或者宽高的。因为它是一个不固定值,不像PX。听说在PX这个单位在PC和移动的解析不同，所以才使用rem的。
一、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。一般设置为no
PS:初次尝试制作移动端页面。亲们，由于我没有加上面的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>
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;
一、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。一般设置为no
PS:初次尝试制作移动端页面。亲们，由于我没有加上面的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>
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;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1、学html5，然后自己编程，如果有html的基础，其实不会太难；
2、去html5页面制作平台，如vxplo、wix、maka.im都可以做html5的手机页面，不过wix现在没有中文网站；vxplo功能很齐全，但同时操作很复杂，一般人不会使用；maka.im通过模板组合、添加图文的方式制作，适合刚入门的童鞋。
楼主自己看哪个适合自己吧~
2、去html5页面制作平台，如vxplo、wix、maka.im都可以做html5的手机页面，不过wix现在没有中文网站；vxplo功能很齐全，但同时操作很复杂，一般人不会使用；maka.im通过模板组合、添加图文的方式制作，适合刚入门的童鞋。
楼主自己看哪个适合自己吧~
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
Html5和以前html，jsp写法一样的，基本上区别不大，如果要写手机页面的话，可以用dw
然后在里面用手机版块看效果
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
