移动端app 切换页面时title不js改变title是怎么回事
点击联系发帖人
时间：2016-08-08 10:53
移动APP前置的引导页设计技巧 - 91运营网
移动APP前置的引导页设计技巧
引导是带领用户更快速更愉悦地达到目标的过程，能在用户使用产品遇到障碍之前给予及时的帮助。在移动互联网的产品的设计中，新手引导的设计则是在用户初次使用该移动产品时，给予的一些必须性的帮助以使得用户能快速愉悦地了解这个产品的功能与具体操作方式。为了完成不同的引导内容和引导的目标，移动端的引导设计会根据需求进行不同的多样化处理。根据引导出现的时机，可以分为前置型的引导与过程中的引导。
前置型的引导：在用户还没有正式开始使用这个产品时给出的一系列帮助内容。主要的设计方式为引导页的设计。
过程中的引导：在用户使用产品的过程中给出的一系列帮助内容。主要的设计方式有空白页的内容引导，loading等等待状态中的引导，拆分包袱的逐步引导，巧设默认值的功能引导，tips引导，浮点引导，遮罩聚焦式引导，触发式引导，任务演练式引导等。
由于篇幅所限，本篇博文主要针对前置型引导的引导页的设计详细论述，而对于过程中的引导会在后续博文中奉上。
引导页的设计探究
引导页作为前置型引导，必然具备前置型引导的特征。用户是在使用前看到引导页的内容，此时用户对这个产品的了解并不多，对于如产品的功能/页面布局/具体使用等还没有建立起完整的认知。所以引导页更适合阐述产品的概况内容（如具有产品的概念，产品的核心功能，具有竞争力的功能点或用户痛点，以及会影响到初次使用的操作方式的内容），建立起用户对产品的大致认知；而不太适用于阐述过于细节的产品内容，因为此时用户还无法进行相应的信息匹配，细节内容会不容易理解。
虽然引导页有上述的限制，但是由于它具备的很多优点，让它作为一种非常常见的方式来使用。
具体的优点：1）篇幅设置可自由设定，在一定范围内可多可少；2）全屏或几乎全屏的信息呈现的方式，使得信息的可承载量多；3）内容的编排自由，设计师可以自由发挥。
所以引导页是一种在设计上较灵活自由的方式。但是在实际的使用中，我们还是常常会发现设计的效果并不容易达不到预期。用户常常不会仔细浏览这些引导的信息，对于引导的内容信息的接收程度会打折扣，很难全部吸收；还有不少情况下用户会跳过引导，忽略引导想提供的帮助信息。那么，如何做能让我们设计的引导才能引起用户的兴趣，让他们花费一点精力去吸收引导的内容信息，这需要一些技巧。
最核心的技巧有4点：精简与合理使用
有效的注意力
构建特色。
精简与合理使用
在引导页设计的泛滥时代，绝大多数的APP在首次使用中都会设计几页引导内容。
设计师需要把控引导的内容。只做必要的引导页内容。没必要的引导内容会增加信息的冗余性，冲淡真正需要用户关注的信息的注意力与精力。
在设计之前，我们要对用户初次使用该APP时的心理与使用行为进行分析，并不是所有情况都适合使用引导页的，要对不适合的情况say no。
适合与否的依据主要是在真实的使用场景中，用户是希望能对这个产品有个大致的了解，还是希望快速启动产品立即使用，在使用的过程中再慢慢学习。如果用户是希望快速启动产品使用中出现过于的引导会引起用户的方案。
具体较适用的情况：
1.对于一个新概念的新产品，用户需要对这些新的概念或内容有所理解才能更好的使用产品。（下图为Vida的引导截图）
2.竞争力的或有吸引力的内容点的介绍。（下图为支付宝和糯米团购的引导截图）
当确定了引导的内容后，我们需要对引导的内容进行细致的编排。具体的编排可以分为平铺直叙述和讲故事的方式。平铺直叙是将一个一个内容点罗列，之间没有建立什么联系。而讲故事是将内容串联起来变成一个整体的故事。
1.讲故事的方式，使引导具有情景性
讲建立与用户使用情景匹配的场景，让用户能建立一种熟悉的感受，能让用户对引导的功能点感同身受。
串联的故事一般而言都是多页的形式。一步抛出一个需告知的点，循序渐进的解说。故事可以只围绕一个功能点来叙述，也可以将多个功能点串联起来变成一个故事。形成一个完整的故事。
由于每次一个告知点，多会采用聚焦的设计手法，把视觉注意力吸引到每个告知点上。
讲故事的主要目的是希望构建用户与产品之间的联系。让用户感觉到产品与自己是有关系的，现在所说的内容是与我相关的，我需要花费精力来关注一下。如果完全建立不起关联，很容易让用户忽略。
微信4.0的引导就是一个编故事建立关系的好例子。在微信在推出4.0版本的时候，新增加了类似Path和Instagram一样的相册功能，并且可以把相册分享到朋友圈。这个功能的加入拓展了之间仅是沟通聊天工具的产品定义。在4.0版本的新功能引导中，它非常成功的讲诉了一个关于相册功能的故事，并且在设计内容时非常注意建立联系。在故事阐述中它一直强调用户可以怎么样，让用户能明确感觉到与自己的关系。
2.讲故事的主要手法——故事可以是以情动人，痛点渲染，角色榜样类比等方式
A. 动之以情
营造出具有浓烈感情色彩的场景，唤起用户心底的情绪，让用户产生对产品的共鸣。当产品附加了感情的元素，产品就会让用户形成一种情感上的联系，用户对产品的好感也会增加。
打感情牌的手法比较适用于具有社交性的产品引导。
在设计中不论是背景图片还是文案都致力于感情气氛的营造。（下图为人人网的引导截图）
B. 痛点渲染
建立一个用户在实际生活中会遇到的类似的不便的场景，让用户能感受到共鸣，唤起用户对所述功能的需要感。然后给出该产品能给出的解决方案，可以让用户感觉。
戳痛点的手法比较适用于实用的工具性的功能引导。在设计中文案：可采用痛点式文案，或者是非常具有颤动性的文案。
C. 角色榜样类比
通过建立用户熟悉的人物角色，来描述其他人会用这个产品来做什么，这种方式可以拓宽对产品功能使用的场景与多种其他可能性。启发用户对这个产品的想象。建立的熟悉的人物形象会让描述变得具体而形象，会从而引发当前使用的用户形成一种类比的心理。
这种方式适用于对产品整体功能的介绍，对于新老产品的功能介绍都适用:
1）老产品用此方法可以启发用户拓宽对既有功能使用的其他的可能性，拓宽使用场景。2）新产品用此方法可以让用户对这个产品的整体功能有更多的认识。
设计要点：1）用户角色渲染得让人觉得可信，能让人很容易联想到自己也会遇到类似情况。2）文案：可采用比较具有亲和力，质朴的文案。
（下图为印象笔记的引导截图）
D. 范例吸引
将引导的内容融入真实的界面中，通过合理选择呈现的内容来让用户可以通过界面上的信息来感知产品所具有的功能。这种引导形式可以很好的在第一时间向用户展示产品形态，建立用户的兴趣；范例能让用户预知在使用产品时界面会是什么样子，能让用户对实际界面有充分的了解，并且能让用户看到产品完整的功能与形态。但是这种方式是一种注重界面呈现，用视觉效果去吸引用户的方式，所以对产品本身有一定的要求。
适用条件：1）界面本身的设计需具有一定的创新性/美观性/吸引力，这样融入到真实界面中的引导才能具有吸引力。2）产品本身若需要通过用户的经营才能慢慢达到一个完整的形态，那么这种真实界面的范例的方式能勾引用户增加对产品的使用的兴趣，并且能让用户对产品功能理解得比较充分与完善。
设计要点：1）引导中要呈现的内容需仔细挑选，能把产品的典型功能与特征充分展示。2）文案最好是比较亲切的。
（下图为Path的引导截图）
E.平铺直叙的方式
如果内容点无法串联，只能一一罗列，那么在设计中我们可以——
1.对每个内容建立场景。
2.放置具有吸引人的或具有竞争力的内容。
3.根据记忆的效果的原则合理排序。将最需要用户关注的内容放在最前面。（记忆的效果：最前面的内容记忆效果&最后面的内容记忆效果&中间部分的内容的记忆效果）
4.精简引导的内容。不要放置太多的引导页。
5.对于每页的设计可以参考下面的有效的注意力里的设计技巧。
有效的注意力
注意力是记忆力的基础，记忆力是注意力的结果。没有良好的注意力就没有良好的记忆力，良好的记忆力是建立在良好的注意力基础上的。
我们所设计的引导页也需要能吸引用户的注意力，让用户能够花费精力来阅读我们想告知他们的信息，以达到一种有效的注意力。具体可以怎么做呢？
我们可以从不同的内容与设计方式上提高效果，以下一一阐述。
界面中不要有过多的视觉焦点，容易分散用户的注意力，导致用户不知道该看那里。
当界面中的信息聚焦在某一点上时，用户能快速准确定位到需要阅读的信息内容上，达到消化信息的目的。
聚焦的设计手法有很多种，如通过光影的方式，将亮光的部分打在最需要用户关注的信息上；虚化背景的方式，突出前面的信息内容；放大镜方式，将需要用户关注的部分作为放大突出。当然除了所举案例中的常见手法，还可以运用其他的方式来聚焦，只要可以达到效果即可。
信息的聚焦需要设计师对信息的内容进行取舍，尽量剔除不需要的内容。
若精简后依然内容较多，那么可以通过拉开信息的层次来使得信息可以聚焦。在设计中尽量将内容整体化，形成几个大块的信息，不要过于琐碎。琐碎的内容不利于信息的获取。由于用户对信息的认知是有整体到细节，用户在阅读内容的时候，更习惯先将内容先抽象成一个整体，然后再仔细阅读整体中的细节内容。所以我们的设计的过程中需要让用户能够很快地抽象出整体的信息。
图例为反例。案例中的设计让页面中形成了过于多的发散点，用户的阅读时难以梳理成整块的信息，增加了信息获取的难度。
2.优化图片所传达的信息
人类对于图片信息的阅读能力是远大于对于文字信息的理解的。图片可以更加直观地让用户感知到所要传递的信息。
在不同的图片中，人们对人脸，美女，笑容，具有动感的照片更容易引起用户的注意。
同样为美肤的功能引导，左侧的设计不需要借助文字就可以让用户理解可以美肤，而右侧的设计若只看图是无法理解的。左侧的引导设计比右侧的引导设计更加直观好记忆。
3.除了静态的视觉画面，我们还可以增加用户对于引导内容的注意力。
现在的引导页的设计多为静态的视觉页面。人类对于动态内容的注意力& 对于静态内容的注意力。所以除了静态图片的方式，我们完全可以通过适当增加动态内容来吸引用户的注意力。
图例为QQ水印相机和Flava的引导页。
QQ水印相机的引导页就是使用动态注意力，的每页用一个图钉钉着一副照片，而照片会已图钉为圆心轻微地左右摆动。Flava同样，中间的图片的部分都是动态的演示。这2个设计都非常容易让用户对动态部分的内容引起注意，从而阅读相关的内容。
当然在动态内容中，我们也要注意视觉焦点的问题，不能让界面中的动态焦点太多。一般1个动态焦点会比较好。
当然除了已有的这些案例，我们也可以思考，除了动态的内容，我们是否可以激发其他的感官来吸引用户的注意力。比如可以通过增加一些音效。目前还没有找到这样的案例，但是个人感觉也是可以尝试的。
4.改变屏与屏之间切换的交互方式
现在的引导页的切屏交互方式基本都为左右滑动，我们也可以通过改变既有的交互方式增加用户的注意力。毕竟用户对新的东西的好奇心还是有的。但是不要盲目的为了改变而改变。交互的方式应该要与设计的内容相匹配。改变的交互方式要简单易学，在界面的设计中要有使用的隐喻线索，让这种新的交互方式变得自然而容易，否则会引起用户的反感。
图例为feedly的引导页。改变了常用的左右滑动的方式，使用了向上滑动的方式。每张引导页想一张卡片，阅读过的引导页向上滑动即被滑出屏幕。界面视觉对于新的交互方式有明确的引导，不会增加操作的难度，会让用户感觉到是一家具有创新性的公司。
5.能有效传达的文案
A. 字数的控制
从心理学的角度，人类对于文案在短时间内能记忆住的字符不超过9个。（这个是人类记忆的特性，人类对于内容的短时记忆的容量有限，一般为7 ± 2项目，一般为7 ± 2，即5 ~ 9个项目，这也就是平常我们所说的记忆广度。）超过9个字符，用户是很难记忆的且容易受到干扰而发生遗忘。文案的设计上应该是挑重点的说，无意义的不必要的冗余文字应果断剔除。
如果精简后依然超出极限字符数，那么可以对文案内容分层次。
通过排版的方式，突出需要用户记忆的字符，弱化其他字符。一般而言突出的字符为2-7个是比较容易记忆的。
通过断句的方式，将长的文案变为短的子单元，这样可以扩大短时记忆的容量。断句可以通过打标点，留空格，断行的方式来实现。
（这个也是运用人类记忆的特性，如果超过短时记忆的容量或插入其他活动，短时记忆容易受到干扰而发生遗忘。为扩大短时记忆的容量，可采用组块的方法，即将小的记忆单位组合成大的单位来记忆，这时较大的记忆单位就叫做块。）
B. 文案的内容与行文风格
文案的内容可以融入时下热点或话题，行文风格上也可以具有时代的特征。让用户能感受到产品能紧跟时代，贴近当前的社会生活，比一般的文案容易引起用户的注意度。
很多的引导页在设计上同质化问题严重，极度相似的设计手法、设计风格、排版风格、相似的文案内容、让用户很难记忆或引起关注。构建产品引导页的特色是区别于其他产品的好方式，特色可以让引导页脱颖而出。
那么如何构建特色呢？
1.从设计方式上进行特色构建
我们可以从引导页面内容的不同组成元素来寻找特色的构建点。
背景图片的摄影角度或风格/后期处理/色调；版式编排的设计风格/版式布局/配色方案；文案的行文风格；多屏切换方式也可以考虑
构建特色并不需要对所有内容的元素都进行，即使只在一个内容点上进行特色构建也是可以的，但是需要做到的是这个点上的特色要非常明显，用户容易感知到。
2.系列化引导设计的特色构建
对于一些不断更新迭代的产品，往往在重要版本升级的时候都会给出必要的新的引导的内容。所以我们除了从单次引导内容思考进行特色构建以外，我们还可以把眼光拉远一些，从一个系列化引导设计的角度去构建特色。系列化的引导需要从一开始进行单次引导时就加以思考，为系列化构思一个主题。下图中的新浪微博的引导页的设计就是一种系列化引导设计的特色构建。它选用季节为主题，根据所处的季节的特征进行内容的运营。这种方式可以让用户对多次引导的内容感觉到一种新的整体化的特色，贴近当前生活的方式也让产品感觉具有时新性，易于接受。
当然，引导并不是解决设计问题的方法，引导只能作为一种点到为止的辅助方式。
文章中所总结的5个要点是我在实际的工作中的一些设计感悟与整理，其中必有一些较为主观和不足的地方，欢迎大家拍砖与交流。本次主要整理了一下前置引导的一些设计技巧，后续我还会继续整理出过程中的引导的设计技巧的内容。感谢大家的关注。
勾搭小编微信号yunyingba,加入91运营官方社群，会运营的人都在这里了移动APP产品的信息都是通过页面来承载的或是加载的，同时APP页面的加载方案设计是交互设计师和移动产品经理需要面对的一个重要的课题。
良好的加载页面设计对于APP来说是非常重要的。直接影响用户的体验和APP的转化率问题。
今天，25学堂跟大家来小议一下3种常见的 APP 页面加载设计方案。这些应该都是不错的分享。值得大家收藏和转载。
移动APP页面加载设计方案一、单页面加载方案
单页面加载方案分为整体加载方案设计和分块加载方案设计。
优点：1、单页面加载方案是比较简单的加载方案设计，一般运用在页面内容比较单一的情况下，所以直接一次性加载完所有数据后再显示内容。
单页面加载失败的状态也比较好处理。直接不显示信息或者是出现加载失败等等。
缺点：这种单页面的加载方式比较传统和简单。对于复杂的APP界面数据应用是不合理的。有一定的局限性。
所以就出现了 单页面分块加载的机制。
2、单页面分块加载的机制
这种方案的特点：是能让用户逐步看到内容，在这个渐进的过程中降低用户的等待的焦虑心理。同时提高用户使用率。然而单页面分块加载方案，其中又可以分为，模块间有关联性的，先加载父内容，再加载子内容。如下图显示。
这种分模块加载的优点：
在需要特别注意加载失败的状态，毕竟每个模块都提示加载失败，点击重试是很挫的一件事，可以根据信息的优先级来决定哪些数据失败了采用默认状态，哪些数据采用失败提示等。也是目前来说采用比较多的app页面加载方式。
分模块加载的缺点：影响了APP界面设计的美观度，在网速不佳的情况下，容易出现加载失败等。
移动APP页面加载设计方案二、跨页面加载方案
跨页面加载的方案就是在父页面&子页面 or 同一app内，页面间字段可以复用的，在加载子页面时不需要重新加载新数据。特别的例子就是jquery moblie 这个移动开发工具。
多个页面直接的跳转，其实都是一个页面先加载完成的。所以，切换起来很流畅很舒服。
或者很多APP 的我的模块 或者是信息中心这块，基本采用的都是跨页面加载方案设计。
比如：微信的个人信息，支付宝的个人信息等等。
移动APP页面加载设计方案三：预加载设计方案
优点是：在加载一个页面内容的同时，预测用户的下一步行为，并为他下一步需要使用的页面加载内容，使得他在下一步的操作中能立刻获取信息而不需要加载等待。比如我们经常看到的一个不停在转动的图标 加上 正在加载中这样的标识。
预加载提供给用户无缝的产品使用体验，使得用户在使用产品的过程中更直接流畅，没有被打断的感觉。
比如：当你浏览图集的时候，当看到第一张的图片时，就自动后台加载第二第三第四张图片，用户浏览完第一张图片切换到第二张时就不会有加载等待的过程。再比如在浏览新闻列表时，就把每篇新闻的内容在后台进行预加载，用户选择看某篇新闻时，能立刻阅读到内容。
这个预加载的模式跟pc端的按需加载方式的是差不多。大家见的最多的就是瀑布流的布局加载。或者是图片的按需加载等等。这些都是属于预加载方案设计。
在移动APP端，比如通过触发滚动条来预加载。这种设计应该说是比较常见的加载方式。
缺点：预加载也需要时间的，他只是不在客户端显示给用户，默默在后台运作而已，需要特殊考虑未加载完用户就使用到那些信息的情况，所以在做预加载设计时需要同时考虑另一种适合该情况的普通加载方式。预加载需要根据具体的场景来进行设计，设定好信息优先级，综合考虑各种类型信息的具体大小流量，整体考虑预加载的方式，这些都是需要经过精心分析思考的。
扩展阅读：成功设计一款
25学堂跟大家分享的是页面加载设计方案。而平常我们所看到的弹出层 ，弹出加载图片，页面刷新等都属于操作加载，不属于页面加载机制！务必请分清楚！
本文标题：
本文地址：/allcode/5770.html
除非注明，本站文章均为原创或编译，转载请注明出处和原文链接，转载同时请务必保留原网站网址。
移动APP设计入门课程
为你推荐的相关文章
Copyright@
All Rights Reserved ICP备案号：桂ICP备号-2本站声明所有资源均是网上搜集或网友上传提供，如有侵犯您的版权，请及时联系我们（），我们将尽快处理。我今年是由零基础开始入门的，刚好我第一家公司入职后就马上让我接手做版的专题了。一入门就是移动端开发，是幸运也是艰辛的开始
我是自学前端的，当然，对，这个框架肯定是熟悉他们是怎么使用，只是没必要再深入了。因为我当时应聘介绍自己懂这些框架都没有一家公司来招我，原因待会解释。
既然是零基础入门的话，那么我先分享下我该怎么学习？
我相信大部分人都了解一个房子的构造建成了吧，那么我用比如的方法来给自己去解释网站到底是个怎么回事？
后台其实就等于房子的地基；前端就是你看到的房子建成后的样子。
前端构成部分由,css,js；就是你想把自己的房子构造成什么样子，比如说哪个位置是主人房，哪个位置是客房等等布局；就是你外观和里面的装修想什么样的风格呢？就是水泥和砖头，没了它们，你的房子很容易毁掉。
先说一个很重要的入门前提；开发工具的推荐：
1，，这个是国外回来的中国团队，目前是免费使用，更新周期快，代码提示多；其他的自己百度；
2，：你的电脑就算卡机也可以照样打开文件来进行编码，当然了，他只适合做小网站；剩下的就是自己百度。
注意：只要你使用的软件是，是处于新手阶段，不要跟我说高手大神会用来写代码，是可以，但是他们会更注重效率；所以想写出高效的代码和提升自己的能力，还是推荐你找找合适你的开发工具吧！
说回刚刚的话题，为什么只懂框架会找不到工作呢？
Bootstrap，，个框架的区别：
Bootstrap：响应式设计布局，端和移动端都；响应式就是你在不同的移动屏幕看到情况会是不一样；比如：在端你看到的导航栏是放到头部的，在，手机上你看到的导航栏是隐藏到右边或左边去了，只是用一个图标提示下给你看。自适应布局是指你在所有的移动屏幕上看到的结果都一样，只是大小发生变化了。
JQuery&mobile：一般只是做移动端。
2个框架的缺点普遍存在的情况：
1，一般情况下企业是会有自己的设计师来做设计布局，假如要求用这些框架的话，设计师必须要了解这个框架里面的组件和插件，再来进行整体布局包括效果颜色。
2，使用过渡状态转到下一页面会出现，我测试过，当时确实是存在的，而且网上你找到的解决方案一般情况下还是不能完全解决这个问题。产生这个问题的，我分析的有种情况：，就是移动设备兼容问题，他的系统版本低，根本不支持该属性；，的缺陷就在这。
3，个框架就算是版的文件大小也大于，企业放弃使用的原因之一，因为文件太大会占用更多的资源。
4，字体图标，他们有好处也有坏处，比如说我现在的公司，个设计师都不愿意使用，因为他们说不合适我们的页面美化方面的。我们做前端考虑到的是性能方面的，还有执行效率。
我所使用到的页面标签：
Section,div,artical,p,ol,ul,li,er,footer,,form,input,label,h1,h2,h3&；详细说明我就不说了，只给新手说下，为什么那么多标签，只使用个就可以把整个项目解决了？
原因是不要以为标签多，我们就一定要使用到它的，我们要的是使用广泛的，易记的。
稍微解释下，块级元素和行内元素是什么意思？
块级元素就是他占满一行的；行内元素就是他的多个同类可以同时在同一行。
下面讲解下，标签里面我们在移动端一般都放什么？
Title,meta,link,3个标签会比较多，解释请看：
Title:该网页的标题，这个标题一般会显示在浏览器打开该网页时，最地址栏上面可以简单文字段。
&meta&content=&width=device-width,&initial-scale=1.0,&maximum-scale=1.0,&user-scalable=0;&&name=&viewport&/&
&meta&content=&yes&name=&apple-mobile-web-app-capable&/&
&meta&content=&black&name=&apple-mobile-web-app-status-bar-&/&
&meta&content=&telephone=no&name=&format-detection&/&
&meta&content=&email=no&name=&format-detection&/&
&meta&content=&initial-scale=1.0,user-scalable=no,maximum-scale=1&&media=&(device-height:&568px)&&name=&viewport&&/&
第一个标签表示：强制让文档的宽度与设备的宽度保持，并且文档最大的比例是，且不允许用户点击屏幕放大浏览；用户是否可以手动缩放
第二个标签是设备中的私有标签，它表示：允许全屏模式浏览；
第三个标签也是的私有标签，它指定的中顶端的状态条的样式；
第四个标签表示：告诉设备忽略将页面中的数字识别为电话号码
第五个标签用于忽略将页面中邮件地址
第六个就是最大的高度限定在以内，这个可以忽略，因为我们都会用滑动来代替；当然了，可以用在页面布局不多的地方！
Link:一般只是引入文件用的，对于大部分前辈都说不好，而且他一般也只写在文件内。我们假如打开一个刚刚下载到本地的网页或框架，浏览页面时很慢，估计也就是在里面引入了谷歌文件，因为我们国内，谷歌是被封杀的！
Javascript呢？一般情况下，把引入文件放到前面的
下面解释放到和个不同地方的区别：
放在就是普遍需要用户进行点击或各种操作才触发的事件。
放在&/body&里面就是用户来看之前就执行了。
现在我们来看看的问题了：
1，我相信做过个项目的人都会了解：重置文件或，名称不一样而已，用途都一样。
我会共享我自己今年所总结积累好的文件写到里面。
@charset &utf-8&;,body{background:#f0f0f0;color:#505050;font-size:62.5%;-webkit-user-select:none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-touch-callout:none;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,quote,th,td,hr,button,article,aside,details,figcaption,figure,footer,er,hgroup,menu,nav,section {margin:0;padding:0;}body,button,input,select,textarea {font:14px /5b8b/4f53,'Helvetica Neue',Arial,'Liberation Sans',FreeSans,'Hiragino Sans GB',sans-serif/&Microsoft YaHei&/&微软雅黑&;line-height:20px;}h1{font-size:24px;}h2{font-size:22px;}h3{font-size:18px;}@media only screen and (min-width:360px) {
h1{font-size:28px;}
h2{font-size:26px;}
h3{font-size:22px;}
body,button,input,select,textarea {font-size:18px;line-height:26px;}}h1,h2,h3,h4,h5,h6 {font-weight:normal;}, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}/*阻止旋转屏幕时自动调整字体大小*/textarea{resize:none;}/*取消按钮在inphone上的默认样式*/input[type=button]{-webkit-appearance:none;outline:none} input::-webkit-input-placeholder{color:#F0F0F0;}textarea::-webkit-input-placeholder{color:#F0F0F0;}input::-webkit-input-speech-button {display:none}table {border-collapse:collapse;border-spacing:0;}th {text-align:inherit;}fieldset,img {border:none;}abbr,acronym {border:none;font-variant:normal;}del {text-decoration:line-through;}ol,ul {list-:none;}caption,th {text-align:left;}sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup {top:-0.5em;}sub {bottom:-0.25em;}ins,a,a:hover {text-decoration:none;}a:focus,*:focus {outline:none;}.clearfix:before,.clearfix:after {content:&&;display:table;}.clearfix:after {clear:both;overflow:hidden;}.clearfix {zoom:1;}.clear {clear:both;display:;font-size:0;height:0;line-height:0;overflow:hidden;}.hide {display:none;}.block {display:block;}.outL{white-space:normal;word-break:break-all;width:100px;}.outH{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; width:100px;}/*布局*/.fl{float:left;display:inline;}.fr{float:right;display:inline;}.cb{clear:both;}.cl{clear:left;}.cr{clear:rigth;}.rel{position:relative;}.abs{position:absolute;}.tac{text-align:center;}.tal{text-align:left;}.tar{text-align:right;}.dib{display:inline-;}.vab{vertical-align:bottom;}.vam{vertical-align:middle;}.vat{vertical-align:top;}/*网格*/.box{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:100%;text-align:center;padding:5px 0;}.grid,.wrap,.grid:after,.wrap:after,.grid:before,.wrap:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.grid{*zoom:1}.grid:before,.grid:after{display:table;content:&&;line-height:0}.grid:after{clear:both}.grid{list--type:none;padding:0;margin:0}.grid&.grid{clear:none;float:left;margin:0 !important}.wrap{float:left;width:100%}/*网格*//*flex*/.col{height:100%;display:-webkit-box;-webkit-box-orient:vertical;display:flex;display:-webkit-flex;flex-direction:column;}.row{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;flex-direction:wrap;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-lines:multiple;width:100%;height:auto;margin:auto;}.flex1{-webkit-box-flex:1;-webkit-flex:1;flex:1;}.flex2{-webkit-box-flex:2;-webkit-flex:2;flex:2;}.flex3{-webkit-box-flex:3;-webkit-flex:3;flex:3;}/*flex*//*容器*/.wrapper{position:absolute;top:0;right:0;bottom:0;left:0;padding:5px 5px 60px 5px;overflow:auto;margin-top:44px;-webkit-overflow-scrolling:touch;}/*头尾*/header,footer{position:fixed;right:0;left:0;z-index:1;text-align:center;background:#CCCCCC;}er{top:0;height:44px;}footer{bottom:0;}/**/.w100p{width:100%}.w20p{width:20%;}/*边距*/.m5{margin:5px;}.p5{padding:5px;}.pt5{padding-top:5px;}
注意事项：
1、你使用浏览器是会有默认边距产生的，所以假如想几个变成行内的而且无边距，那么最好的方法是使用同一方向的浮动，来解决无边距的一列。
2、引入我的文件后，你会发现为什么我在字体上要进行个断点设置，我认真的分析过，页面的由于在，个不同宽度大小的情况下制作，那么字体大小肯定要进行相应的设置，不然你在的情况下看到的效果跟在下看到的是一样。注意：字体是不会自适应的，只有自己进行设置才可以达到预期效果。
3、图标是同样不会自适应的，只有图片可以设置，所以图标假如设置就会影响整体布局，宽度可以在里面写”30”这样是图片的。
4、除了有时，是要求固定定位外，那么中间要做一个容器外套给他，我们需要在er下面使用放内容。这个怎么设置，你可以看我的文件已经做好设置而且包括了案例方便查看。并且可以进行内容过多可以滑动。关于定位的问题，我多次测试的结果发现，在系统以下的低端手机是不支持定位的，是会出现设备兼容问题向下滑动时，固定后也会随着页面移动，以上的系统是可以支持，相对较好的解决方法是：使用；会有卡顿，但是对于低端机来讲是不错的解决方案。我个人是选择放弃系统以下的用户群，因为现在的手机元左右就可以买到系统以上的手机，所以，我有理由相信连手机都不愿意更换的普遍有种情况：，没钱，，根本不可能成为你的用户；我不会像端那样来兼容，我现在唯一兴幸的是公司现在没特定标准要求，所以我可以自由选择，我只需要知道这个解决方法就行；我既然放弃低端机市场，那么我就会以最新的技术来进行布局，所以我不使用，直接用我上面的那个来作为外套就行。
5、我们如果需要将内容实现边留有边距，使用的是而不是。因为设置为的话，会出现左边有空白边距，右边反而是贴边的情况。
6、我们做前端写页面最烦的就是命名，我不喜欢使用下划线，所以我们可以这样来定义命名方式：等情况。还有一种叫意义命名；比如说颜色：红色，我们可以定义为：；模块呢？我们可以这样来做：比如我最近做的一个手机风格的页面项目。大家都应该了解他是色块组成，颜色，大小等都不一样。
我的解决方案是：在销售模块，定义为
sellHead:内容的头部；sellFoot:内容的尾部；
如此类推就有：；；；；；；；；；；&
我相信你们看到英文都容易的理解这个是什么意思，位置对应情况。
7、从有了前端这个职称后，就逐渐开始流行：的写法来布局页面了。是什么意思？就是用面向对象编程的思想来写，因为现在有了这些了，都可以实现编程了，我们前端的压力就越来越大了。最主要的一点就是实行模块化，代码可以重复使用。对于没编程基础的童鞋来说，真心不懂这些专业的术语是个什么东东？大家可以看看下面我的解释：
注意：背景颜色，边框，圆角这些就不要写在里面了
、；在页面的”sellContent&bg”。
一、实现的是组合，同时这个类是哪里需要往哪里放，需要什么呢？当然是他里面的属性，只要是他需要该属性的都可以放到一起组合。组合一般情况下不要超过个
二、以前我们写可能是遇到到哪个需要就给他定义那些属性值，而且整个页面下来重复的特别多；现在我这样方式不需要了，我们可以用并列式选择器：，减少代码重复的情况，同时继承选择器的作用我们就要注意了：一个项目下来，我们写的页面会达到个以上，假如我写&}这样的话，那么你每个页面只要有的，他都会是变成行内元素。
所以，我们写页面前必须要先把整个项目的所有页面看一次，脑袋进行一次布局，这样就不会出现这类的问题了。要全面的去理解这个的写法，建议你去下载框架文件来看他的源码，和页面案例的布局。
8、区分和的区别，英文我们都看懂，但用的话就不一定了；：最小的宽度为多少的时候开始执行下面的断点布局；：最大的宽度为多少的时候停止执行下面的断点布局。
如：就是下面的类只在之间执行。
注意：有时候我们在谷歌或火狐浏览器做测试的，然后放到真机测试时会发现，真机有时候会比浏览器显示的还要小—。
9、做头部的时候我往往最讨厌的就是图片和文字对齐；现在我找到新的解决放案了：
、可以把这个给他一个下边距负值；
、有个属性值可以选择来用。
10、我们做移动端的时候，凡是有标签点击转链接的地方都会系统自带一个透明层的点击效果，取消点击高亮：
11、响应式布局与自适应布局：以下仅为个人理解
(1)、响应式布局，我的理解是在电脑，平板，手机，分别有不同的页面布局。
(2)、自适应布局，我的理解是在电脑，平板，手机页面布局一样，只是文字大小，图片大小会发生变化而已。
在电脑上，使用（伸缩进行换行）这个来进行布局是可以达到响应的，但是在平板和手机就目前来说还不支持这个属性。
我推荐的最佳方案是使用布局。只是不用伸缩换行属性
下面是我做的一个简单案例：
注意：.css引用的是上面提供的common.css文件：
&!DOCTYPE html&&html&&&
&title&首页&/title&
&meta http-equiv=&content-type& content=&text/; charset=UTF-8& /&
&!--开发后删除--&
&meta http-equiv=&Cache-Control& name=&no-store& /&
&meta http-equiv=&refresh& content=&3& /&
&!--开发后删除--&
&meta http-equiv=&X-UA-Compatible& content=&IE=edge,chrome=1&&
&meta name=&HandheldFriendly& content=&true& /&
&meta name=&viewport& content=&width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no& /&
&meta name=&apple-mobile-web-app-capable& content=&yes& /&
&meta content=&black& name=&apple-mobile-web-app-status-bar-style& /&
&meta content=&telephone=no& name=&format-detection& /&
&link rel=&stylesheet& href=&css/style.css& /&
.flexcontent{margin:5px 1px;-webkit-flex:1;flex:1;-webkit-box-flex:1;background:hotpink;}
&/&&/head&
&ol class=&row&&
&li class=&m5&&
&img src=&img/back.png& width=&30& /& &/li&
&li class=&flex3 m5&&
&h1&er&/h1&
&li class=&m5&&
&img src=&img/down.png& width=&30& /&
§ion class=&wrapper&&
&ul class=&row&&
&li class=&flexcontent p5&&1&/li&
&li class=&flexcontent p5&&2&/li&
&li class=&flexcontent p5&&3&/li&
&li class=&flexcontent p5&&4&/li&
&li class=&flexcontent p5&&5&/li&
&ul class=&row&&
&li class=&flex1 flexcontent p5&&1&/li&
&li class=&flex3 flexcontent p5&&2&/li&
&li class=&flex2 flexcontent p5&&3&/li&
&/section&
&footer class=&row tac&&
&ul class=&col w20p&&
&li class=&flex1 pt5&&&img src=&img/back.png& width=&20& /&&/li&
&li class=&flex1&&&span&底部&/&&/li&
&ul class=&col w20p&&
&li class=&flex1 pt5&&&img src=&img/back.png& width=&20& /&&/li&
&li class=&flex1&&&span&底部&/span&&/li&
&ul class=&col w20p&&
&li class=&flex1 pt5&&&img src=&img/back.png& width=&20& /&&/li&
&li class=&flex1&&&span&底部&/span&&/li&
&ul class=&col w20p&&
&li class=&flex1 pt5&&&img src=&img/back.png& width=&20& /&&/li&
&li class=&flex1&&&span&底部&/span&&/li&
&ul class=&col w20p&&
&li class=&flex1 pt5&&&img src=&img/back.png& width=&20& /&&/li&
&li class=&flex1&&&span&底部&/&&/li&
&/body&&/html&
12、的动态的使用介绍：
&!DOCTYPE html&&html&&head&&meta http-equiv=&Content-Type& content=&text/; charset=UTF-8& /&&title&animate.css 使用方法&/title&&link rel=&stylesheet& type=&text/css& href=&css/animate.min.css& media=&screen& /&&style&#bridge{
border-radius: 15px;
background: url('images/bridge.png') no-repeat 50% 50%;
margin: 0 auto;
width: 400px;
height: 250px;
z-index: 20;
position: static;}&/&&/&&body&&div id=&bridge& class=&animated flash&&&!--只需要在相关的块级标签内添加class；例如：class=&animated bounceOutLeft&class=&animated flash&--&&/div&&/body&&/html&
详细可以参考以下网站来获取class名：
http://daneden.github.io/animate.css/
13、移动端开发测试工具：
我做测试一般会同时用个工具来测试页面：
(1)、使用来建立内网：修改文件；下面是我共享的代码：
## This is the main Apache HTTP
configuration file.
It contains the# configuration directives that give the server its instructions.# See &URL:http://httpd.apache.org/docs/2.4/& for detailed information.# In particular, see # &URL:http://httpd.apache.org/docs/2.4/mod/directives.&# for a discussion of each configuration directive.## Do NOT simply read the instructions in here without understanding# what they do.
They're here only as hints or reminders.
If you are unsure# consult the online docs. You have been warned.
## Configuration and logfile names: If the filenames you specify for many# of the 's control files begin with &/& (or &drive:/& for Win32), the# server will use that explicit path.
If the filenames do *not* begin# with &/&, the value of ServerRoot is prepended -- so &logs/access_log&# with ServerRoot set to &/usr/local/apache2& will be interpreted by the# server as &/usr/local/apache2/logs/access_log&, whereas &/logs/access_log& # will be interpreted as '/logs/access_log'.## NOTE: Where filenames are specified, you must use forward slashes# instead of backslashes (e.g., &c:/apache& instead of &c:/apache&).# If a drive letter is omitted, the drive on which httpd.exe is located# will be used by default.
It is recommended that you always supply# an explicit drive letter in absolute paths to avoid confusion.ServerSignature OnServerTokens Full## ServerRoot: The top of the directory tree under which the 's# configuration, error, and log files are kept.## Do not add a slash at the end of the directory path.
If you point# ServerRoot at a non-local disk, be sure to specify a local disk on the# Mutex directive, if file-based mutexes are used.
If you wish to share the# same ServerRoot for multiple httpd daemons, you will need to change at# least PidFile.#ServerRoot &c:/wamp/bin/apache/apache2.4.9&Define APACHE24 Apache2.4## Mutex: Allows you to set the mutex mechanism and mutex file directory# for individual mutexes, or change the global defaults## Uncomment and change the directory if mutexes are file-based and the default# mutex file directory is not on a local disk or is not appropriate for some# other reason.## Mutex default:logs## Listen: Allows you to bind Apache to specific IP addresses and/or# ports, instead of the default. See also the &VirtualHost&# directive.## Change this to Listen on specific IP addresses as shown below to # prevent Apache from glomming onto all bound IP addresses.##Listen 12.34.56.78:80Listen 0.0.0.0:80Listen [::0]:80## Dynamic Shared Object (DSO) Support## To be able to use the functionality of a module which was built as a DSO you# have to place corresponding `LoadModule' lines at this location so the# directives contained in it are actually available _before_ they are used.# Statically compiled modules (those listed by `httpd -l') do not need# to be loaded here.## Example:# LoadModule foo_module modules/mod_foo.so#LoadModule access_compat_module modules/mod_access_compat.soLoadModule actions_module modules/mod_actions.soLoadModule alias_module modules/mod_alias.soLoadModule allowmethods_module modules/mod_allowmethods.soLoadModule asis_module modules/mod_asis.soLoadModule auth_basic_module modules/mod_auth_basic.so#LoadModule auth_digest_module modules/mod_auth_digest.so#LoadModule authn_anon_module modules/mod_authn_anon.soLoadModule authn_core_module modules/mod_authn_core.so#LoadModule authn_dbd_module modules/mod_authn_dbd.so#LoadModule authn_dbm_module modules/mod_authn_dbm.soLoadModule authn_file_module modules/mod_authn_file.so#LoadModule authn_socache_module modules/mod_authn_socache.so#LoadModule authnz_ldap_module modules/mod_authnz_ldap.soLoadModule authz_core_module modules/mod_authz_core.so#LoadModule authz_dbd_module modules/mod_authz_dbd.so#LoadModule authz_dbm_module modules/mod_authz_dbm.soLoadModule authz_groupfile_module modules/mod_authz_groupfile.soLoadModule authz_host_module modules/mod_authz_host.so#LoadModule authz_owner_module modules/mod_authz_owner.soLoadModule authz_user_module modules/mod_authz_user.soLoadModule autoindex_module modules/mod_autoindex.so#LoadModule buffer_module modules/mod_buffer.soLoadModule cache_module modules/mod_cache.soLoadModule cache_disk_module modules/mod_cache_disk.so#LoadModule cern_meta_module modules/mod_cern_meta.soLoadModule cgi_module modules/mod_cgi.so#LoadModule charset_lite_module modules/mod_charset_lite.so#LoadModule data_module modules/mod_data.so#LoadModule dav_module modules/mod_dav.so#LoadModule dav_fs_module modules/mod_dav_fs.so#LoadModule dav_lock_module modules/mod_dav_lock.so#LoadModule dbd_module modules/mod_dbd.soLoadModule deflate_module modules/mod_deflate.soLoadModule dir_module modules/mod_dir.so#LoadModule dumpio_module modules/mod_dumpio.soLoadModule env_module modules/mod_env.so#LoadModule expires_module modules/mod_expires.so#LoadModule ext_filter_module modules/mod_ext_filter.soLoadModule file_cache_module modules/mod_file_cache.so#LoadModule filter_module modules/mod_filter.so#LoadModule ers_module modules/mod_headers.so#LoadModule heartbeat_module modules/mod_heartbeat.so#LoadModule heartmonitor_module modules/mod_heartmonitor.so#LoadModule ident_module modules/mod_ident.so#LoadModule imagemap_module modules/mod_imagemap.soLoadModule include_module modules/mod_include.so#LoadModule info_module modules/mod_info.soLoadModule isapi_module modules/mod_isapi.so#LoadModule lbmethod_bybusyness_module modules/mod_lbmethod_bybusyness.so#LoadModule lbmethod_byrequests_module modules/mod_lbmethod_byrequests.so#LoadModule lbmethod_bytraffic_module modules/mod_lbmethod_bytraffic.so#LoadModule lbmethod_heartbeat_module modules/mod_lbmethod_heartbeat.so#LoadModule ldap_module modules/mod_ldap.so#LoadModule logio_module modules/mod_logio.soLoadModule log_config_module modules/mod_log_config.so#LoadModule log_debug_module modules/mod_log_debug.so#LoadModule log_forensic_module modules/mod_log_forensic.so#LoadModule lua_module modules/mod_lua.soLoadModule mime_module modules/mod_mime.so#LoadModule mime_magic_module modules/mod_mime_magic.soLoadModule negotiation_module modules/mod_negotiation.so#LoadModule proxy_module modules/mod_proxy.so#LoadModule proxy_ajp_module modules/mod_proxy_ajp.so#LoadModule proxy_balancer_module modules/mod_proxy_balancer.so#LoadModule proxy_connect_module modules/mod_proxy_connect.so#LoadModule proxy_express_module modules/mod_proxy_express.so#LoadModule proxy_fcgi_module modules/mod_proxy_fcgi.so#LoadModule proxy_ftp_module modules/mod_proxy_ftp.so#LoadModule proxy__module modules/mod_proxy_html.so#LoadModule proxy_http_module modules/mod_proxy_http.so#LoadModule proxy_scgi_module modules/mod_proxy_scgi.so#LoadModule ratelimit_module modules/mod_ratelimit.so#LoadModule reflector_module modules/mod_reflector.so#LoadModule remoteip_module modules/mod_remoteip.so#LoadModule request_module modules/mod_request.so#LoadModule reqtimeout_module modules/mod_reqtimeout.so#LoadModule rewrite_module modules/mod_rewrite.so#LoadModule sed_module modules/mod_sed.so#LoadModule session_module modules/mod_session.so#LoadModule session_cookie_module modules/mod_session_cookie.so#LoadModule session_crypto_module modules/mod_session_crypto.so#LoadModule session_dbd_module modules/mod_session_dbd.soLoadModule setenvif_module modules/mod_setenvif.so#LoadModule slotmem_plain_module modules/mod_slotmem_plain.so#LoadModule slotmem_shm_module modules/mod_slotmem_shm.so#LoadModule socache_dbm_module modules/mod_socache_dbm.so#LoadModule socache_memcache_module modules/mod_socache_memcache.so#LoadModule socache_shmcb_module modules/mod_socache_shmcb.so#LoadModule speling_module modules/mod_speling.so#LoadModule ssl_module modules/mod_ssl.so#LoadModule status_module modules/mod_status.so#LoadModule substitute_module modules/mod_substitute.so#LoadModule unique_id_module modules/mod_unique_id.so#LoadModule userdir_module modules/mod_userdir.so#LoadModule usertrack_module modules/mod_usertrack.so#LoadModule version_module modules/mod_version.soLoadModule vhost_alias_module modules/mod_vhost_alias.so#LoadModule watchdog_module modules/mod_watchdog.so#LoadModule xml2enc_module modules/mod_xml2enc.soLoadModule php5_module &c:/wamp/bin/php/php5.5.12/php5apache2_4.dll&#PHPIniDir c:/wamp/bin/php/php5.5.12&IfModule unixd_module&## If you wish httpd to run as a different user or group, you must run# httpd as root initially and it will switch.
## User/Group: The name (or #number) of the user/group to run httpd as.# It is usually good practice to create a dedicated user and group for# running httpd, as with most system services.#User daemonGroup daemon&/IfModule&# 'Main'
configuration## The directives in this section set up the values used by the 'main'# server, which responds to any requests that aren't handled by a# &VirtualHost& definition.
These values also provide defaults for# any &VirtualHost& containers you may define later in the file.## All of these directives may appear inside &VirtualHost& containers,# in which case these default settings will be overridden for the# virtual host being defined.### ServerAdmin: Your address, where problems with the
should be# e-mailed.
This address appears on some server-generated pages, such# as error documents.
e.g. admin@#ServerAdmin ## ServerName gives the name and port that the server uses to identify itself.# This can often be determined automatically, but we recommend you specify# it explicitly to prevent problems during startup.## If your host doesn't have a registered DNS name, enter its IP address here.#ServerName localhost:80HostnameLookups Off## DocumentRoot: The directory out of which you will serve your# documents. By default, all requests are taken from this directory, but# symbolic links and aliases may be used to point to other locations.#DocumentRoot &c:/wamp/www/&## Each directory to which Apache has access can be configured with respect# to which services and features are allowed and/or disabled in that# directory (and its subdirectories). ## First, we configure the &default& to be a very restrictive set of # features.
#&Directory /&
AllowOverride none
Require all granted&/Directory&## Note that from this point forward you must specifically allow# particular features to be enabled - so if something's not working as# you might expect, make sure that you have specifically enabled it# below.#&Directory &c:/wamp/www/&&
# Possible values for the Options directive are &None&, &All&,
# or any combination of:
Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
# Note that &MultiViews& must be named *explicitly* --- &Options All&
# doesn't give it to you.
# The Options directive is both complicated and important.
Please see
# http://httpd.apache.org/docs/2.4/mod/core.#options
# for more information.
Options Indexes FollowSymLinks Includes
# AllowOverride controls what directives may be placed in .htaccess files.
# It can be &All&, &None&, or any combination of the keywords:
AllowOverride FileInfo AuthConfig Limit
AllowOverride all
# Controls who can get stuff from this .
# onlineoffline tag - don't remove
#Require local
Require all granted&/Directory&## DirectoryIndex: sets the file that Apache will serve if a directory# is requested.#&IfModule dir_module&
DirectoryIndex index.php index.php3 index. index.htm&/IfModule&## The following lines prevent .htaccess and .htpasswd files from being # viewed by Web clients. #&Files &.ht*&&
Require all denied&/Files&## ErrorLog: The location of the error log file.# If you do not specify an ErrorLog directive within a &VirtualHost&# container, error messages relating to that virtual host will be# logged here.
If you *do* define an error logfile for a &VirtualHost&# container, that host's errors will be logged there and not here.##ErrorLog &logs/error.log&ErrorLog &c:/wamp/logs/apache_error.log&## LogLevel: Control the number of messages logged to the error_log.# Possible values include: debug, info, notice, warn, error, crit,# alert, emerg.#LogLevel warn&IfModule log_config_module&
# The following directives define some format nicknames for use with
# a CustomLog directive (see below).
LogFormat &%h %l %u %t /&%r/& %&s %b /&%{Referer}i/& /&%{User-Agent}i/&& combined
LogFormat &%h %l %u %t /&%r/& %&s %b& common
&IfModule logio_module&
# You need to enable mod_logio.c to use %I and %O
LogFormat &%h %l %u %t /&%r/& %&s %b /&%{Referer}i/& /&%{User-Agent}i/& %I %O& combinedio
&/IfModule&
# The location and format of the access logfile (Common Logfile Format).
# If you do not define any access logfiles within a &VirtualHost&
# container, they will be logged here.
Contrariwise, if you *do*
# define per-&VirtualHost& access logfiles, transactions will be
# logged therein and *not* in this file.
CustomLog &c:/wamp/logs/access.log& common
# If you prefer a logfile with access, agent, and referer information
# (Combined Logfile Format) you can use the following directive.
#CustomLog &logs/access.log& combined&/IfModule&&IfModule alias_module&
# Redirect: Allows you to tell clients about documents that used to
# exist in your server's namespace, but do not anymore. The client
# will make a new request for the document at its new location.
# Example:
# Redirect permanent /foo /bar
# Alias: Maps web paths into filesystem paths and is used to
# access content that does not live under the DocumentRoot.
# Example:
# Alias /webpath /full/filesystem/path
# If you include a trailing / on /webpath then the
# require it to be present in the URL.
You will also likely
# need to provide a &Directory& section to allow access to
# the filesystem path.
# ScriptAlias: This controls which directories contain server scripts.
# ScriptAliases are essentially the same as Aliases, except that
# documents in the target directory are treated as applications and
# run by the
when requested rather than as documents sent to the
The same rules about trailing &/& apply to ScriptAlias
# directives as to Alias.
ScriptAlias /cgi-bin/ &c:/wamp/bin/apache/apache2.4.9/cgi-bin/&&/IfModule&&IfModule cgid_module&
# ScriptSock: On threaded s, designate the path to the UNIX
# socket used to communicate with the CGI daemon of mod_cgid.
#Scriptsock cgisock&/IfModule&## &c:/wamp/bin/apache/apache2.4.9/cgi-bin& should be changed to whatever your ScriptAliased# CGI directory exists, if you have that configured.#&Directory &c:/wamp/bin/apache/apache2.4.9/cgi-bin&&
AllowOverride None
Options None
Require all granted&/Directory&&IfModule mime_module&
# TypesConfig points to the file containing the list of mappings from
# filename extension to MIME-type.
TypesConfig conf/mime.types
# AddType allows you to add to or override the MIME configuration
# file specified in TypesConfig for specific file types.
#AddType application/x-gzip .tgz
# AddEncoding allows you to have certain browsers uncompress
# information on the fly. Note: Not all browsers support this.
AddEncoding x-compress .Z
AddEncoding x-gzip .gz .tgz
# If the AddEncoding directives above are commented-out, then you
# probably should define those extensions to indicate media types:
AddType application/x-compress .Z
AddType application/x-gzip .gz .tgz
AddType application/x-httpd-php .php
AddType application/x-httpd-php .php3
# AddHandler allows you to map certain file extensions to &handlers&:
# actions unrelated to filetype. These can be either built into the
# or added with the Action directive (see below)
# To use CGI scripts outside of ScriptAliased directories:
# (You will also need to add &ExecCGI& to the &Options& directive.)
#AddHandler cgi-script .cgi
# For type maps (negotiated resources):
#AddHandler type-map var
# Filters allow you to process content before it is sent to the client.
# To parse .shtml files for -side includes (SSI):
# (You will also need to add &Includes& to the &Options& directive.)
AddType text/ .html
AddOutputFilter INCLUDES .html&/IfModule&## The mod_mime_magic module allows the
to use various hints from the# contents of the file itself to determine its type.
The MIMEMagicFile# directive tells the module where the hint definitions are located.##MIMEMagicFile conf/magic## Customizable error responses come in three flavors:# 1) plain text 2) local redirects 3) external redirects## Some examples:#ErrorDocument 500 &The server made a boo boo.&#ErrorDocument 404 /missing.#ErrorDocument 404 &/cgi-bin/missing_handler.pl&#ErrorDocument 402 /subscription_info.html### MaxRanges: Maximum number of Ranges in a request before# returning the entire resource, or one of the special# values 'default', 'none' or 'unlimited'.# Default setting is to accept 200 Ranges.#MaxRanges unlimited## EnableMMAP and EnableSendfile: On systems that support it, # memory-mapping or the sendfile syscall may be used to deliver# files.
This usually improves
performance, but must# be turned off when serving from networked-mounted # filesystems or if support for these functions is otherwise# broken on your system.# Defaults: EnableMMAP On, EnableSendfile Off##EnableMMAP offEnableSendfile off# AcceptFilter: On Windows, none uses accept() rather than AcceptEx() and# will not recycle sockets between connections. This is useful for network# adapters with broken driver support, as well as some virtual network# providers such as vpn drivers, or spam, virus or spyware filters.AcceptFilter http noneAcceptFilter https none# Supplemental configuration## The configuration files in the conf/extra/ directory can be # included to add extra features or to modify the default configuration of # the , or you may simply copy their contents here and change as # necessary.# Server-pool management (MPM specific)#Include conf/extra/httpd-mpm.conf# Multi-language error messages#Include conf/extra/httpd-multilang-errordoc.conf# Fancy directory listingsInclude conf/extra/httpd-autoindex.conf# Language settings#Include conf/extra/httpd-languages.conf# User home directories#Include conf/extra/httpd-userdir.conf# Real-time info on requests and configuration#Include conf/extra/httpd-info.conf# Virtual hosts#Include conf/extra/httpd-vhosts.conf# Local access to the Apache HTTP Server Manual#Include conf/extra/httpd-manual.conf# Distributed authoring and versioning (WebDAV)#Include conf/extra/httpd-dav.conf# Various default settings#Include conf/extra/httpd-default.conf# Configure mod_proxy_ to understand HTML4/XHTML1&IfModule proxy_html_module&Include conf/extra/proxy-.conf&/IfModule&# Secure (SSL/TLS) connections#Include conf/extra/httpd-ssl.conf## Note: The following must must be present to support#
starting without SSL on platforms with no /dev/random equivalent#
but a statically compiled-in mod_ssl.#&IfModule ssl_module&SSLRandomSeed startup builtinSSLRandomSeed connect builtin&/IfModule&## uncomment out the below to deal with user agents that deliberately# violate open standards by misusing DNT (DNT *must* be a specific# end-user choice)##&IfModule setenvif_module&#BrowserMatch &MSIE 10.0;& bad_DNT#&/IfModule&#&IfModule ers_module&#RequestHeader unset DNT env=bad_DNT#&/IfModule&#IncludeOptional &c:/wamp/vhosts/*&Include &c:/wamp/alias/*&
直接在盘安装的话就直接复制就行。
(2)、国内虚拟机：靠谱助手完整版；下载后先安装引擎，然后在软件内下载浏览器就行。
(3)、可以尝试使用手机助手这类软件来帮助你做真机测试，不过，要是你没其他作为测试机的话，你的手机应该很容易坏！
(4)、怎么混合使用呢？方法在这：
你的电脑先开个出来，然后你的手机得连上这个；这样就是内网；
只要你是有需要测试的时候，双击打开，加上按照我的配置文件就可以了，用户直接在“开始栏——输入——”然后往下看看，无线网络：这样的你在手机浏览器地址栏输入就行。
上面的是手机，现在给你谈谈靠谱助手；它不需要人工连，只要你打开了一般都可以直接上网了。然后你可以去查下怎么改配置把相关的分辨率大小给改下；同样的方法在靠谱助手的浏览器上输入地址就行。
14、分析开发的断点：
(1)、国内市场普遍的是和，像才；分辨率，像素这些词语一般是告诉给设计师，我们前端要明白的是；
(2)、字体大小：我相信有部分童鞋会认为浏览器会自适应让你页面的字体随着不同的屏幕大小而自动适应，我告诉你，你错了！
这些字体自适应都是人为设置出来的，我推荐的方案是：
body{font:14px&line-height:20px}//网页整体字体以为主。
h1,h2,h3,h4,h5,h6&{font-size:100%;font-weight:500;}
h1{font-size:24px}
h2{font-size:22px}
h3{font-size:18px}
@media&only&screen&and&(min-width:360px)&{
body,button,input,select,textarea&{font-size:18line-height:26}
h1{font-size:28px}
h2{font-size:26px}
h3{font-size:22px}
(3)、类控制分析：
看到上面大概也了解怎么使用了吧；
另外，定义类名的第一个重要性就在这里了：因为你要控制一个类在或不同的屏幕上有适应屏幕大小的样式结构！
(4)、我们开发时，一般要做到兼容的浏览器普遍是国内的浏览器苹果的浏览器都是内核：，，，百度，这些浏览器是国内使用用户量最大的浏览器厂商，虽然不是内核都一样，但是普遍的兼容问题还不是很多，所以我们优先选择兼容的是内核的。
(5)、前端开发性能优化个人总结建议：
一、单个文件大小不要超过；插件不要超过。
二、优先选择使用字体图标，非要用上图片的话，就使用方法。同时，将整合到一张图片的图标集合和在网站或不常用的图片进行压缩。
三、优化问题：我们常写代码时会经常忽略这个标签会带上等这些可以填上关键词的地方，这个是必须要说明下，不过在手机端的话，这个好像还真用不上吧。
四、，文件尽量以合并的方式，少以分开来写样式。
五、利用技术，减轻空间资源；对企业来讲，这个风险有点大；但手机用户的网络差时会出现文件不能及时加载等问题。
六、图片多使用来达到优化效果。
七、少对图片进行硬性设置宽高。
八、减少页面请求：图片数量的多少会对请求有影响；同时要注意类组合一般情况下不要超过个，超过的尽量以取个新的类名来定义会好点。
九、减少访问次数，加载数量多了就影响访问速度。
十、不要出现页面，避免重定向。
十一、减少体积，设置合理的过期时间。
十二、缓存，用方式提交；以方式提交。
&-----------------------------------------------------------------------------------------------------------------------------------
还有其他的，因为我还没用上，所以就不知道怎么解释了，先用着吧！JavaScript方面的我还没熟悉就不做太多共享了，明年再分享吧
------------------------------------------------------------------------------------------------------------------------------------
现在我给大家来谈谈的问题包括框架：
关于数据交互的框架：
这个框架学习起来不是特别难，不过要运用的话，还得花心思多练习和熟悉基本的语法。网上有他的文档，都是翻译，不过看完这个后，你还是得重新去看看官方的。
最近公司要求我们学习的框架是AngularJs:
他在国内专门的社区，现在我用的是1.3.9版本；这个框架有angular-ui有基于Bootstrap框架的(是自带ng指令的---开心吧)；
给你自己定好一个学习时间，定一个学习路线等等规划，对我来说，难点在于交互，我还没搞懂！
JS是所有前端人员的难点和重点，我之前之所以学不懂的主要原因是顾虑太多，基础不稳定，自然要去补习，所以我这次是以稳定的基础后再去学习的话，应该会轻松很多。同时给自己定的时间长点，学习技术不懂就不懂急不来的，不懂就上网查和问就是了。
JS的面向对象：面向对象是一个思想，他归根到底就是让你写函数封装起来。这个跟是一个意思，目的为了让你以后轻松管理代码。虽然描述得不清晰，我说这个主要是告诉新手，面向对象不难，难的是你练习了吗？学习的过程中不要心烦气躁，保持头脑清晰，冷静的面对逻辑问题；所有的技术由入门到精通都是熟能生巧。
在这里我要说的是 各位童鞋，千万不要去害怕学你现在以为很难的知识和新知识；否则，当你公司真正要用上的时候，你会很痛苦。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：12025次
排名：千里之外
转载：39篇
(1)(1)(1)(8)(6)(7)(22)(2)}
移动APP前置的引导页设计技巧
引导是带领用户更快速更愉悦地达到目标的过程，能在用户使用产品遇到障碍之前给予及时的帮助。在移动互联网的产品的设计中，新手引导的设计则是在用户初次使用该移动产品时，给予的一些必须性的帮助以使得用户能快速愉悦地了解这个产品的功能与具体操作方式。为了完成不同的引导内容和引导的目标，移动端的引导设计会根据需求进行不同的多样化处理。根据引导出现的时机，可以分为前置型的引导与过程中的引导。
前置型的引导：在用户还没有正式开始使用这个产品时给出的一系列帮助内容。主要的设计方式为引导页的设计。
过程中的引导：在用户使用产品的过程中给出的一系列帮助内容。主要的设计方式有空白页的内容引导，loading等等待状态中的引导，拆分包袱的逐步引导，巧设默认值的功能引导，tips引导，浮点引导，遮罩聚焦式引导，触发式引导，任务演练式引导等。
由于篇幅所限，本篇博文主要针对前置型引导的引导页的设计详细论述，而对于过程中的引导会在后续博文中奉上。
引导页的设计探究
引导页作为前置型引导，必然具备前置型引导的特征。用户是在使用前看到引导页的内容，此时用户对这个产品的了解并不多，对于如产品的功能/页面布局/具体使用等还没有建立起完整的认知。所以引导页更适合阐述产品的概况内容（如具有产品的概念，产品的核心功能，具有竞争力的功能点或用户痛点，以及会影响到初次使用的操作方式的内容），建立起用户对产品的大致认知；而不太适用于阐述过于细节的产品内容，因为此时用户还无法进行相应的信息匹配，细节内容会不容易理解。
虽然引导页有上述的限制，但是由于它具备的很多优点，让它作为一种非常常见的方式来使用。
具体的优点：1）篇幅设置可自由设定，在一定范围内可多可少；2）全屏或几乎全屏的信息呈现的方式，使得信息的可承载量多；3）内容的编排自由，设计师可以自由发挥。
所以引导页是一种在设计上较灵活自由的方式。但是在实际的使用中，我们还是常常会发现设计的效果并不容易达不到预期。用户常常不会仔细浏览这些引导的信息，对于引导的内容信息的接收程度会打折扣，很难全部吸收；还有不少情况下用户会跳过引导，忽略引导想提供的帮助信息。那么，如何做能让我们设计的引导才能引起用户的兴趣，让他们花费一点精力去吸收引导的内容信息，这需要一些技巧。
最核心的技巧有4点：精简与合理使用
有效的注意力
构建特色。
精简与合理使用
在引导页设计的泛滥时代，绝大多数的APP在首次使用中都会设计几页引导内容。
设计师需要把控引导的内容。只做必要的引导页内容。没必要的引导内容会增加信息的冗余性，冲淡真正需要用户关注的信息的注意力与精力。
在设计之前，我们要对用户初次使用该APP时的心理与使用行为进行分析，并不是所有情况都适合使用引导页的，要对不适合的情况say no。
适合与否的依据主要是在真实的使用场景中，用户是希望能对这个产品有个大致的了解，还是希望快速启动产品立即使用，在使用的过程中再慢慢学习。如果用户是希望快速启动产品使用中出现过于的引导会引起用户的方案。
具体较适用的情况：
1.对于一个新概念的新产品，用户需要对这些新的概念或内容有所理解才能更好的使用产品。（下图为Vida的引导截图）
2.竞争力的或有吸引力的内容点的介绍。（下图为支付宝和糯米团购的引导截图）
当确定了引导的内容后，我们需要对引导的内容进行细致的编排。具体的编排可以分为平铺直叙述和讲故事的方式。平铺直叙是将一个一个内容点罗列，之间没有建立什么联系。而讲故事是将内容串联起来变成一个整体的故事。
1.讲故事的方式，使引导具有情景性
讲建立与用户使用情景匹配的场景，让用户能建立一种熟悉的感受，能让用户对引导的功能点感同身受。
串联的故事一般而言都是多页的形式。一步抛出一个需告知的点，循序渐进的解说。故事可以只围绕一个功能点来叙述，也可以将多个功能点串联起来变成一个故事。形成一个完整的故事。
由于每次一个告知点，多会采用聚焦的设计手法，把视觉注意力吸引到每个告知点上。
讲故事的主要目的是希望构建用户与产品之间的联系。让用户感觉到产品与自己是有关系的，现在所说的内容是与我相关的，我需要花费精力来关注一下。如果完全建立不起关联，很容易让用户忽略。
微信4.0的引导就是一个编故事建立关系的好例子。在微信在推出4.0版本的时候，新增加了类似Path和Instagram一样的相册功能，并且可以把相册分享到朋友圈。这个功能的加入拓展了之间仅是沟通聊天工具的产品定义。在4.0版本的新功能引导中，它非常成功的讲诉了一个关于相册功能的故事，并且在设计内容时非常注意建立联系。在故事阐述中它一直强调用户可以怎么样，让用户能明确感觉到与自己的关系。
2.讲故事的主要手法——故事可以是以情动人，痛点渲染，角色榜样类比等方式
A. 动之以情
营造出具有浓烈感情色彩的场景，唤起用户心底的情绪，让用户产生对产品的共鸣。当产品附加了感情的元素，产品就会让用户形成一种情感上的联系，用户对产品的好感也会增加。
打感情牌的手法比较适用于具有社交性的产品引导。
在设计中不论是背景图片还是文案都致力于感情气氛的营造。（下图为人人网的引导截图）
B. 痛点渲染
建立一个用户在实际生活中会遇到的类似的不便的场景，让用户能感受到共鸣，唤起用户对所述功能的需要感。然后给出该产品能给出的解决方案，可以让用户感觉。
戳痛点的手法比较适用于实用的工具性的功能引导。在设计中文案：可采用痛点式文案，或者是非常具有颤动性的文案。
C. 角色榜样类比
通过建立用户熟悉的人物角色，来描述其他人会用这个产品来做什么，这种方式可以拓宽对产品功能使用的场景与多种其他可能性。启发用户对这个产品的想象。建立的熟悉的人物形象会让描述变得具体而形象，会从而引发当前使用的用户形成一种类比的心理。
这种方式适用于对产品整体功能的介绍，对于新老产品的功能介绍都适用:
1）老产品用此方法可以启发用户拓宽对既有功能使用的其他的可能性，拓宽使用场景。2）新产品用此方法可以让用户对这个产品的整体功能有更多的认识。
设计要点：1）用户角色渲染得让人觉得可信，能让人很容易联想到自己也会遇到类似情况。2）文案：可采用比较具有亲和力，质朴的文案。
（下图为印象笔记的引导截图）
D. 范例吸引
将引导的内容融入真实的界面中，通过合理选择呈现的内容来让用户可以通过界面上的信息来感知产品所具有的功能。这种引导形式可以很好的在第一时间向用户展示产品形态，建立用户的兴趣；范例能让用户预知在使用产品时界面会是什么样子，能让用户对实际界面有充分的了解，并且能让用户看到产品完整的功能与形态。但是这种方式是一种注重界面呈现，用视觉效果去吸引用户的方式，所以对产品本身有一定的要求。
适用条件：1）界面本身的设计需具有一定的创新性/美观性/吸引力，这样融入到真实界面中的引导才能具有吸引力。2）产品本身若需要通过用户的经营才能慢慢达到一个完整的形态，那么这种真实界面的范例的方式能勾引用户增加对产品的使用的兴趣，并且能让用户对产品功能理解得比较充分与完善。
设计要点：1）引导中要呈现的内容需仔细挑选，能把产品的典型功能与特征充分展示。2）文案最好是比较亲切的。
（下图为Path的引导截图）
E.平铺直叙的方式
如果内容点无法串联，只能一一罗列，那么在设计中我们可以——
1.对每个内容建立场景。
2.放置具有吸引人的或具有竞争力的内容。
3.根据记忆的效果的原则合理排序。将最需要用户关注的内容放在最前面。（记忆的效果：最前面的内容记忆效果&最后面的内容记忆效果&中间部分的内容的记忆效果）
4.精简引导的内容。不要放置太多的引导页。
5.对于每页的设计可以参考下面的有效的注意力里的设计技巧。
有效的注意力
注意力是记忆力的基础，记忆力是注意力的结果。没有良好的注意力就没有良好的记忆力，良好的记忆力是建立在良好的注意力基础上的。
我们所设计的引导页也需要能吸引用户的注意力，让用户能够花费精力来阅读我们想告知他们的信息，以达到一种有效的注意力。具体可以怎么做呢？
我们可以从不同的内容与设计方式上提高效果，以下一一阐述。
界面中不要有过多的视觉焦点，容易分散用户的注意力，导致用户不知道该看那里。
当界面中的信息聚焦在某一点上时，用户能快速准确定位到需要阅读的信息内容上，达到消化信息的目的。
聚焦的设计手法有很多种，如通过光影的方式，将亮光的部分打在最需要用户关注的信息上；虚化背景的方式，突出前面的信息内容；放大镜方式，将需要用户关注的部分作为放大突出。当然除了所举案例中的常见手法，还可以运用其他的方式来聚焦，只要可以达到效果即可。
信息的聚焦需要设计师对信息的内容进行取舍，尽量剔除不需要的内容。
若精简后依然内容较多，那么可以通过拉开信息的层次来使得信息可以聚焦。在设计中尽量将内容整体化，形成几个大块的信息，不要过于琐碎。琐碎的内容不利于信息的获取。由于用户对信息的认知是有整体到细节，用户在阅读内容的时候，更习惯先将内容先抽象成一个整体，然后再仔细阅读整体中的细节内容。所以我们的设计的过程中需要让用户能够很快地抽象出整体的信息。
图例为反例。案例中的设计让页面中形成了过于多的发散点，用户的阅读时难以梳理成整块的信息，增加了信息获取的难度。
2.优化图片所传达的信息
人类对于图片信息的阅读能力是远大于对于文字信息的理解的。图片可以更加直观地让用户感知到所要传递的信息。
在不同的图片中，人们对人脸，美女，笑容，具有动感的照片更容易引起用户的注意。
同样为美肤的功能引导，左侧的设计不需要借助文字就可以让用户理解可以美肤，而右侧的设计若只看图是无法理解的。左侧的引导设计比右侧的引导设计更加直观好记忆。
3.除了静态的视觉画面，我们还可以增加用户对于引导内容的注意力。
现在的引导页的设计多为静态的视觉页面。人类对于动态内容的注意力& 对于静态内容的注意力。所以除了静态图片的方式，我们完全可以通过适当增加动态内容来吸引用户的注意力。
图例为QQ水印相机和Flava的引导页。
QQ水印相机的引导页就是使用动态注意力，的每页用一个图钉钉着一副照片，而照片会已图钉为圆心轻微地左右摆动。Flava同样，中间的图片的部分都是动态的演示。这2个设计都非常容易让用户对动态部分的内容引起注意，从而阅读相关的内容。
当然在动态内容中，我们也要注意视觉焦点的问题，不能让界面中的动态焦点太多。一般1个动态焦点会比较好。
当然除了已有的这些案例，我们也可以思考，除了动态的内容，我们是否可以激发其他的感官来吸引用户的注意力。比如可以通过增加一些音效。目前还没有找到这样的案例，但是个人感觉也是可以尝试的。
4.改变屏与屏之间切换的交互方式
现在的引导页的切屏交互方式基本都为左右滑动，我们也可以通过改变既有的交互方式增加用户的注意力。毕竟用户对新的东西的好奇心还是有的。但是不要盲目的为了改变而改变。交互的方式应该要与设计的内容相匹配。改变的交互方式要简单易学，在界面的设计中要有使用的隐喻线索，让这种新的交互方式变得自然而容易，否则会引起用户的反感。
图例为feedly的引导页。改变了常用的左右滑动的方式，使用了向上滑动的方式。每张引导页想一张卡片，阅读过的引导页向上滑动即被滑出屏幕。界面视觉对于新的交互方式有明确的引导，不会增加操作的难度，会让用户感觉到是一家具有创新性的公司。
5.能有效传达的文案
A. 字数的控制
从心理学的角度，人类对于文案在短时间内能记忆住的字符不超过9个。（这个是人类记忆的特性，人类对于内容的短时记忆的容量有限，一般为7 ± 2项目，一般为7 ± 2，即5 ~ 9个项目，这也就是平常我们所说的记忆广度。）超过9个字符，用户是很难记忆的且容易受到干扰而发生遗忘。文案的设计上应该是挑重点的说，无意义的不必要的冗余文字应果断剔除。
如果精简后依然超出极限字符数，那么可以对文案内容分层次。
通过排版的方式，突出需要用户记忆的字符，弱化其他字符。一般而言突出的字符为2-7个是比较容易记忆的。
通过断句的方式，将长的文案变为短的子单元，这样可以扩大短时记忆的容量。断句可以通过打标点，留空格，断行的方式来实现。
（这个也是运用人类记忆的特性，如果超过短时记忆的容量或插入其他活动，短时记忆容易受到干扰而发生遗忘。为扩大短时记忆的容量，可采用组块的方法，即将小的记忆单位组合成大的单位来记忆，这时较大的记忆单位就叫做块。）
B. 文案的内容与行文风格
文案的内容可以融入时下热点或话题，行文风格上也可以具有时代的特征。让用户能感受到产品能紧跟时代，贴近当前的社会生活，比一般的文案容易引起用户的注意度。
很多的引导页在设计上同质化问题严重，极度相似的设计手法、设计风格、排版风格、相似的文案内容、让用户很难记忆或引起关注。构建产品引导页的特色是区别于其他产品的好方式，特色可以让引导页脱颖而出。
那么如何构建特色呢？
1.从设计方式上进行特色构建
我们可以从引导页面内容的不同组成元素来寻找特色的构建点。
背景图片的摄影角度或风格/后期处理/色调；版式编排的设计风格/版式布局/配色方案；文案的行文风格；多屏切换方式也可以考虑
构建特色并不需要对所有内容的元素都进行，即使只在一个内容点上进行特色构建也是可以的，但是需要做到的是这个点上的特色要非常明显，用户容易感知到。
2.系列化引导设计的特色构建
对于一些不断更新迭代的产品，往往在重要版本升级的时候都会给出必要的新的引导的内容。所以我们除了从单次引导内容思考进行特色构建以外，我们还可以把眼光拉远一些，从一个系列化引导设计的角度去构建特色。系列化的引导需要从一开始进行单次引导时就加以思考，为系列化构思一个主题。下图中的新浪微博的引导页的设计就是一种系列化引导设计的特色构建。它选用季节为主题，根据所处的季节的特征进行内容的运营。这种方式可以让用户对多次引导的内容感觉到一种新的整体化的特色，贴近当前生活的方式也让产品感觉具有时新性，易于接受。
当然，引导并不是解决设计问题的方法，引导只能作为一种点到为止的辅助方式。
文章中所总结的5个要点是我在实际的工作中的一些设计感悟与整理，其中必有一些较为主观和不足的地方，欢迎大家拍砖与交流。本次主要整理了一下前置引导的一些设计技巧，后续我还会继续整理出过程中的引导的设计技巧的内容。感谢大家的关注。
勾搭小编微信号yunyingba,加入91运营官方社群，会运营的人都在这里了移动APP产品的信息都是通过页面来承载的或是加载的，同时APP页面的加载方案设计是交互设计师和移动产品经理需要面对的一个重要的课题。
良好的加载页面设计对于APP来说是非常重要的。直接影响用户的体验和APP的转化率问题。
今天，25学堂跟大家来小议一下3种常见的 APP 页面加载设计方案。这些应该都是不错的分享。值得大家收藏和转载。
移动APP页面加载设计方案一、单页面加载方案
单页面加载方案分为整体加载方案设计和分块加载方案设计。
优点：1、单页面加载方案是比较简单的加载方案设计，一般运用在页面内容比较单一的情况下，所以直接一次性加载完所有数据后再显示内容。
单页面加载失败的状态也比较好处理。直接不显示信息或者是出现加载失败等等。
缺点：这种单页面的加载方式比较传统和简单。对于复杂的APP界面数据应用是不合理的。有一定的局限性。
所以就出现了 单页面分块加载的机制。
2、单页面分块加载的机制
这种方案的特点：是能让用户逐步看到内容，在这个渐进的过程中降低用户的等待的焦虑心理。同时提高用户使用率。然而单页面分块加载方案，其中又可以分为，模块间有关联性的，先加载父内容，再加载子内容。如下图显示。
这种分模块加载的优点：
在需要特别注意加载失败的状态，毕竟每个模块都提示加载失败，点击重试是很挫的一件事，可以根据信息的优先级来决定哪些数据失败了采用默认状态，哪些数据采用失败提示等。也是目前来说采用比较多的app页面加载方式。
分模块加载的缺点：影响了APP界面设计的美观度，在网速不佳的情况下，容易出现加载失败等。
移动APP页面加载设计方案二、跨页面加载方案
跨页面加载的方案就是在父页面&子页面 or 同一app内，页面间字段可以复用的，在加载子页面时不需要重新加载新数据。特别的例子就是jquery moblie 这个移动开发工具。
多个页面直接的跳转，其实都是一个页面先加载完成的。所以，切换起来很流畅很舒服。
或者很多APP 的我的模块 或者是信息中心这块，基本采用的都是跨页面加载方案设计。
比如：微信的个人信息，支付宝的个人信息等等。
移动APP页面加载设计方案三：预加载设计方案
优点是：在加载一个页面内容的同时，预测用户的下一步行为，并为他下一步需要使用的页面加载内容，使得他在下一步的操作中能立刻获取信息而不需要加载等待。比如我们经常看到的一个不停在转动的图标 加上 正在加载中这样的标识。
预加载提供给用户无缝的产品使用体验，使得用户在使用产品的过程中更直接流畅，没有被打断的感觉。
比如：当你浏览图集的时候，当看到第一张的图片时，就自动后台加载第二第三第四张图片，用户浏览完第一张图片切换到第二张时就不会有加载等待的过程。再比如在浏览新闻列表时，就把每篇新闻的内容在后台进行预加载，用户选择看某篇新闻时，能立刻阅读到内容。
这个预加载的模式跟pc端的按需加载方式的是差不多。大家见的最多的就是瀑布流的布局加载。或者是图片的按需加载等等。这些都是属于预加载方案设计。
在移动APP端，比如通过触发滚动条来预加载。这种设计应该说是比较常见的加载方式。
缺点：预加载也需要时间的，他只是不在客户端显示给用户，默默在后台运作而已，需要特殊考虑未加载完用户就使用到那些信息的情况，所以在做预加载设计时需要同时考虑另一种适合该情况的普通加载方式。预加载需要根据具体的场景来进行设计，设定好信息优先级，综合考虑各种类型信息的具体大小流量，整体考虑预加载的方式，这些都是需要经过精心分析思考的。
扩展阅读：成功设计一款
25学堂跟大家分享的是页面加载设计方案。而平常我们所看到的弹出层 ，弹出加载图片，页面刷新等都属于操作加载，不属于页面加载机制！务必请分清楚！
本文标题：
本文地址：/allcode/5770.html
除非注明，本站文章均为原创或编译，转载请注明出处和原文链接，转载同时请务必保留原网站网址。
移动APP设计入门课程
为你推荐的相关文章
Copyright@
All Rights Reserved ICP备案号：桂ICP备号-2本站声明所有资源均是网上搜集或网友上传提供，如有侵犯您的版权，请及时联系我们（），我们将尽快处理。我今年是由零基础开始入门的，刚好我第一家公司入职后就马上让我接手做版的专题了。一入门就是移动端开发，是幸运也是艰辛的开始
我是自学前端的，当然，对，这个框架肯定是熟悉他们是怎么使用，只是没必要再深入了。因为我当时应聘介绍自己懂这些框架都没有一家公司来招我，原因待会解释。
既然是零基础入门的话，那么我先分享下我该怎么学习？
我相信大部分人都了解一个房子的构造建成了吧，那么我用比如的方法来给自己去解释网站到底是个怎么回事？
后台其实就等于房子的地基；前端就是你看到的房子建成后的样子。
前端构成部分由,css,js；就是你想把自己的房子构造成什么样子，比如说哪个位置是主人房，哪个位置是客房等等布局；就是你外观和里面的装修想什么样的风格呢？就是水泥和砖头，没了它们，你的房子很容易毁掉。
先说一个很重要的入门前提；开发工具的推荐：
1，，这个是国外回来的中国团队，目前是免费使用，更新周期快，代码提示多；其他的自己百度；
2，：你的电脑就算卡机也可以照样打开文件来进行编码，当然了，他只适合做小网站；剩下的就是自己百度。
注意：只要你使用的软件是，是处于新手阶段，不要跟我说高手大神会用来写代码，是可以，但是他们会更注重效率；所以想写出高效的代码和提升自己的能力，还是推荐你找找合适你的开发工具吧！
说回刚刚的话题，为什么只懂框架会找不到工作呢？
Bootstrap，，个框架的区别：
Bootstrap：响应式设计布局，端和移动端都；响应式就是你在不同的移动屏幕看到情况会是不一样；比如：在端你看到的导航栏是放到头部的，在，手机上你看到的导航栏是隐藏到右边或左边去了，只是用一个图标提示下给你看。自适应布局是指你在所有的移动屏幕上看到的结果都一样，只是大小发生变化了。
JQuery&mobile：一般只是做移动端。
2个框架的缺点普遍存在的情况：
1，一般情况下企业是会有自己的设计师来做设计布局，假如要求用这些框架的话，设计师必须要了解这个框架里面的组件和插件，再来进行整体布局包括效果颜色。
2，使用过渡状态转到下一页面会出现，我测试过，当时确实是存在的，而且网上你找到的解决方案一般情况下还是不能完全解决这个问题。产生这个问题的，我分析的有种情况：，就是移动设备兼容问题，他的系统版本低，根本不支持该属性；，的缺陷就在这。
3，个框架就算是版的文件大小也大于，企业放弃使用的原因之一，因为文件太大会占用更多的资源。
4，字体图标，他们有好处也有坏处，比如说我现在的公司，个设计师都不愿意使用，因为他们说不合适我们的页面美化方面的。我们做前端考虑到的是性能方面的，还有执行效率。
我所使用到的页面标签：
Section,div,artical,p,ol,ul,li,er,footer,,form,input,label,h1,h2,h3&；详细说明我就不说了，只给新手说下，为什么那么多标签，只使用个就可以把整个项目解决了？
原因是不要以为标签多，我们就一定要使用到它的，我们要的是使用广泛的，易记的。
稍微解释下，块级元素和行内元素是什么意思？
块级元素就是他占满一行的；行内元素就是他的多个同类可以同时在同一行。
下面讲解下，标签里面我们在移动端一般都放什么？
Title,meta,link,3个标签会比较多，解释请看：
Title:该网页的标题，这个标题一般会显示在浏览器打开该网页时，最地址栏上面可以简单文字段。
&meta&content=&width=device-width,&initial-scale=1.0,&maximum-scale=1.0,&user-scalable=0;&&name=&viewport&/&
&meta&content=&yes&name=&apple-mobile-web-app-capable&/&
&meta&content=&black&name=&apple-mobile-web-app-status-bar-&/&
&meta&content=&telephone=no&name=&format-detection&/&
&meta&content=&email=no&name=&format-detection&/&
&meta&content=&initial-scale=1.0,user-scalable=no,maximum-scale=1&&media=&(device-height:&568px)&&name=&viewport&&/&
第一个标签表示：强制让文档的宽度与设备的宽度保持，并且文档最大的比例是，且不允许用户点击屏幕放大浏览；用户是否可以手动缩放
第二个标签是设备中的私有标签，它表示：允许全屏模式浏览；
第三个标签也是的私有标签，它指定的中顶端的状态条的样式；
第四个标签表示：告诉设备忽略将页面中的数字识别为电话号码
第五个标签用于忽略将页面中邮件地址
第六个就是最大的高度限定在以内，这个可以忽略，因为我们都会用滑动来代替；当然了，可以用在页面布局不多的地方！
Link:一般只是引入文件用的，对于大部分前辈都说不好，而且他一般也只写在文件内。我们假如打开一个刚刚下载到本地的网页或框架，浏览页面时很慢，估计也就是在里面引入了谷歌文件，因为我们国内，谷歌是被封杀的！
Javascript呢？一般情况下，把引入文件放到前面的
下面解释放到和个不同地方的区别：
放在就是普遍需要用户进行点击或各种操作才触发的事件。
放在&/body&里面就是用户来看之前就执行了。
现在我们来看看的问题了：
1，我相信做过个项目的人都会了解：重置文件或，名称不一样而已，用途都一样。
我会共享我自己今年所总结积累好的文件写到里面。
@charset &utf-8&;,body{background:#f0f0f0;color:#505050;font-size:62.5%;-webkit-user-select:none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-touch-callout:none;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,quote,th,td,hr,button,article,aside,details,figcaption,figure,footer,er,hgroup,menu,nav,section {margin:0;padding:0;}body,button,input,select,textarea {font:14px /5b8b/4f53,'Helvetica Neue',Arial,'Liberation Sans',FreeSans,'Hiragino Sans GB',sans-serif/&Microsoft YaHei&/&微软雅黑&;line-height:20px;}h1{font-size:24px;}h2{font-size:22px;}h3{font-size:18px;}@media only screen and (min-width:360px) {
h1{font-size:28px;}
h2{font-size:26px;}
h3{font-size:22px;}
body,button,input,select,textarea {font-size:18px;line-height:26px;}}h1,h2,h3,h4,h5,h6 {font-weight:normal;}, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}/*阻止旋转屏幕时自动调整字体大小*/textarea{resize:none;}/*取消按钮在inphone上的默认样式*/input[type=button]{-webkit-appearance:none;outline:none} input::-webkit-input-placeholder{color:#F0F0F0;}textarea::-webkit-input-placeholder{color:#F0F0F0;}input::-webkit-input-speech-button {display:none}table {border-collapse:collapse;border-spacing:0;}th {text-align:inherit;}fieldset,img {border:none;}abbr,acronym {border:none;font-variant:normal;}del {text-decoration:line-through;}ol,ul {list-:none;}caption,th {text-align:left;}sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup {top:-0.5em;}sub {bottom:-0.25em;}ins,a,a:hover {text-decoration:none;}a:focus,*:focus {outline:none;}.clearfix:before,.clearfix:after {content:&&;display:table;}.clearfix:after {clear:both;overflow:hidden;}.clearfix {zoom:1;}.clear {clear:both;display:;font-size:0;height:0;line-height:0;overflow:hidden;}.hide {display:none;}.block {display:block;}.outL{white-space:normal;word-break:break-all;width:100px;}.outH{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; width:100px;}/*布局*/.fl{float:left;display:inline;}.fr{float:right;display:inline;}.cb{clear:both;}.cl{clear:left;}.cr{clear:rigth;}.rel{position:relative;}.abs{position:absolute;}.tac{text-align:center;}.tal{text-align:left;}.tar{text-align:right;}.dib{display:inline-;}.vab{vertical-align:bottom;}.vam{vertical-align:middle;}.vat{vertical-align:top;}/*网格*/.box{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:100%;text-align:center;padding:5px 0;}.grid,.wrap,.grid:after,.wrap:after,.grid:before,.wrap:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.grid{*zoom:1}.grid:before,.grid:after{display:table;content:&&;line-height:0}.grid:after{clear:both}.grid{list--type:none;padding:0;margin:0}.grid&.grid{clear:none;float:left;margin:0 !important}.wrap{float:left;width:100%}/*网格*//*flex*/.col{height:100%;display:-webkit-box;-webkit-box-orient:vertical;display:flex;display:-webkit-flex;flex-direction:column;}.row{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;flex-direction:wrap;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-lines:multiple;width:100%;height:auto;margin:auto;}.flex1{-webkit-box-flex:1;-webkit-flex:1;flex:1;}.flex2{-webkit-box-flex:2;-webkit-flex:2;flex:2;}.flex3{-webkit-box-flex:3;-webkit-flex:3;flex:3;}/*flex*//*容器*/.wrapper{position:absolute;top:0;right:0;bottom:0;left:0;padding:5px 5px 60px 5px;overflow:auto;margin-top:44px;-webkit-overflow-scrolling:touch;}/*头尾*/header,footer{position:fixed;right:0;left:0;z-index:1;text-align:center;background:#CCCCCC;}er{top:0;height:44px;}footer{bottom:0;}/**/.w100p{width:100%}.w20p{width:20%;}/*边距*/.m5{margin:5px;}.p5{padding:5px;}.pt5{padding-top:5px;}
注意事项：
1、你使用浏览器是会有默认边距产生的，所以假如想几个变成行内的而且无边距，那么最好的方法是使用同一方向的浮动，来解决无边距的一列。
2、引入我的文件后，你会发现为什么我在字体上要进行个断点设置，我认真的分析过，页面的由于在，个不同宽度大小的情况下制作，那么字体大小肯定要进行相应的设置，不然你在的情况下看到的效果跟在下看到的是一样。注意：字体是不会自适应的，只有自己进行设置才可以达到预期效果。
3、图标是同样不会自适应的，只有图片可以设置，所以图标假如设置就会影响整体布局，宽度可以在里面写”30”这样是图片的。
4、除了有时，是要求固定定位外，那么中间要做一个容器外套给他，我们需要在er下面使用放内容。这个怎么设置，你可以看我的文件已经做好设置而且包括了案例方便查看。并且可以进行内容过多可以滑动。关于定位的问题，我多次测试的结果发现，在系统以下的低端手机是不支持定位的，是会出现设备兼容问题向下滑动时，固定后也会随着页面移动，以上的系统是可以支持，相对较好的解决方法是：使用；会有卡顿，但是对于低端机来讲是不错的解决方案。我个人是选择放弃系统以下的用户群，因为现在的手机元左右就可以买到系统以上的手机，所以，我有理由相信连手机都不愿意更换的普遍有种情况：，没钱，，根本不可能成为你的用户；我不会像端那样来兼容，我现在唯一兴幸的是公司现在没特定标准要求，所以我可以自由选择，我只需要知道这个解决方法就行；我既然放弃低端机市场，那么我就会以最新的技术来进行布局，所以我不使用，直接用我上面的那个来作为外套就行。
5、我们如果需要将内容实现边留有边距，使用的是而不是。因为设置为的话，会出现左边有空白边距，右边反而是贴边的情况。
6、我们做前端写页面最烦的就是命名，我不喜欢使用下划线，所以我们可以这样来定义命名方式：等情况。还有一种叫意义命名；比如说颜色：红色，我们可以定义为：；模块呢？我们可以这样来做：比如我最近做的一个手机风格的页面项目。大家都应该了解他是色块组成，颜色，大小等都不一样。
我的解决方案是：在销售模块，定义为
sellHead:内容的头部；sellFoot:内容的尾部；
如此类推就有：；；；；；；；；；；&
我相信你们看到英文都容易的理解这个是什么意思，位置对应情况。
7、从有了前端这个职称后，就逐渐开始流行：的写法来布局页面了。是什么意思？就是用面向对象编程的思想来写，因为现在有了这些了，都可以实现编程了，我们前端的压力就越来越大了。最主要的一点就是实行模块化，代码可以重复使用。对于没编程基础的童鞋来说，真心不懂这些专业的术语是个什么东东？大家可以看看下面我的解释：
注意：背景颜色，边框，圆角这些就不要写在里面了
、；在页面的”sellContent&bg”。
一、实现的是组合，同时这个类是哪里需要往哪里放，需要什么呢？当然是他里面的属性，只要是他需要该属性的都可以放到一起组合。组合一般情况下不要超过个
二、以前我们写可能是遇到到哪个需要就给他定义那些属性值，而且整个页面下来重复的特别多；现在我这样方式不需要了，我们可以用并列式选择器：，减少代码重复的情况，同时继承选择器的作用我们就要注意了：一个项目下来，我们写的页面会达到个以上，假如我写&}这样的话，那么你每个页面只要有的，他都会是变成行内元素。
所以，我们写页面前必须要先把整个项目的所有页面看一次，脑袋进行一次布局，这样就不会出现这类的问题了。要全面的去理解这个的写法，建议你去下载框架文件来看他的源码，和页面案例的布局。
8、区分和的区别，英文我们都看懂，但用的话就不一定了；：最小的宽度为多少的时候开始执行下面的断点布局；：最大的宽度为多少的时候停止执行下面的断点布局。
如：就是下面的类只在之间执行。
注意：有时候我们在谷歌或火狐浏览器做测试的，然后放到真机测试时会发现，真机有时候会比浏览器显示的还要小—。
9、做头部的时候我往往最讨厌的就是图片和文字对齐；现在我找到新的解决放案了：
、可以把这个给他一个下边距负值；
、有个属性值可以选择来用。
10、我们做移动端的时候，凡是有标签点击转链接的地方都会系统自带一个透明层的点击效果，取消点击高亮：
11、响应式布局与自适应布局：以下仅为个人理解
(1)、响应式布局，我的理解是在电脑，平板，手机，分别有不同的页面布局。
(2)、自适应布局，我的理解是在电脑，平板，手机页面布局一样，只是文字大小，图片大小会发生变化而已。
在电脑上，使用（伸缩进行换行）这个来进行布局是可以达到响应的，但是在平板和手机就目前来说还不支持这个属性。
我推荐的最佳方案是使用布局。只是不用伸缩换行属性
下面是我做的一个简单案例：
注意：.css引用的是上面提供的common.css文件：
&!DOCTYPE html&&html&&&
&title&首页&/title&
&meta http-equiv=&content-type& content=&text/; charset=UTF-8& /&
&!--开发后删除--&
&meta http-equiv=&Cache-Control& name=&no-store& /&
&meta http-equiv=&refresh& content=&3& /&
&!--开发后删除--&
&meta http-equiv=&X-UA-Compatible& content=&IE=edge,chrome=1&&
&meta name=&HandheldFriendly& content=&true& /&
&meta name=&viewport& content=&width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no& /&
&meta name=&apple-mobile-web-app-capable& content=&yes& /&
&meta content=&black& name=&apple-mobile-web-app-status-bar-style& /&
&meta content=&telephone=no& name=&format-detection& /&
&link rel=&stylesheet& href=&css/style.css& /&
.flexcontent{margin:5px 1px;-webkit-flex:1;flex:1;-webkit-box-flex:1;background:hotpink;}
&/&&/head&
&ol class=&row&&
&li class=&m5&&
&img src=&img/back.png& width=&30& /& &/li&
&li class=&flex3 m5&&
&h1&er&/h1&
&li class=&m5&&
&img src=&img/down.png& width=&30& /&
§ion class=&wrapper&&
&ul class=&row&&
&li class=&flexcontent p5&&1&/li&
&li class=&flexcontent p5&&2&/li&
&li class=&flexcontent p5&&3&/li&
&li class=&flexcontent p5&&4&/li&
&li class=&flexcontent p5&&5&/li&
&ul class=&row&&
&li class=&flex1 flexcontent p5&&1&/li&
&li class=&flex3 flexcontent p5&&2&/li&
&li class=&flex2 flexcontent p5&&3&/li&
&/section&
&footer class=&row tac&&
&ul class=&col w20p&&
&li class=&flex1 pt5&&&img src=&img/back.png& width=&20& /&&/li&
&li class=&flex1&&&span&底部&/&&/li&
&ul class=&col w20p&&
&li class=&flex1 pt5&&&img src=&img/back.png& width=&20& /&&/li&
&li class=&flex1&&&span&底部&/span&&/li&
&ul class=&col w20p&&
&li class=&flex1 pt5&&&img src=&img/back.png& width=&20& /&&/li&
&li class=&flex1&&&span&底部&/span&&/li&
&ul class=&col w20p&&
&li class=&flex1 pt5&&&img src=&img/back.png& width=&20& /&&/li&
&li class=&flex1&&&span&底部&/span&&/li&
&ul class=&col w20p&&
&li class=&flex1 pt5&&&img src=&img/back.png& width=&20& /&&/li&
&li class=&flex1&&&span&底部&/&&/li&
&/body&&/html&
12、的动态的使用介绍：
&!DOCTYPE html&&html&&head&&meta http-equiv=&Content-Type& content=&text/; charset=UTF-8& /&&title&animate.css 使用方法&/title&&link rel=&stylesheet& type=&text/css& href=&css/animate.min.css& media=&screen& /&&style&#bridge{
border-radius: 15px;
background: url('images/bridge.png') no-repeat 50% 50%;
margin: 0 auto;
width: 400px;
height: 250px;
z-index: 20;
position: static;}&/&&/&&body&&div id=&bridge& class=&animated flash&&&!--只需要在相关的块级标签内添加class；例如：class=&animated bounceOutLeft&class=&animated flash&--&&/div&&/body&&/html&
详细可以参考以下网站来获取class名：
http://daneden.github.io/animate.css/
13、移动端开发测试工具：
我做测试一般会同时用个工具来测试页面：
(1)、使用来建立内网：修改文件；下面是我共享的代码：
## This is the main Apache HTTP
configuration file.
It contains the# configuration directives that give the server its instructions.# See &URL:http://httpd.apache.org/docs/2.4/& for detailed information.# In particular, see # &URL:http://httpd.apache.org/docs/2.4/mod/directives.&# for a discussion of each configuration directive.## Do NOT simply read the instructions in here without understanding# what they do.
They're here only as hints or reminders.
If you are unsure# consult the online docs. You have been warned.
## Configuration and logfile names: If the filenames you specify for many# of the 's control files begin with &/& (or &drive:/& for Win32), the# server will use that explicit path.
If the filenames do *not* begin# with &/&, the value of ServerRoot is prepended -- so &logs/access_log&# with ServerRoot set to &/usr/local/apache2& will be interpreted by the# server as &/usr/local/apache2/logs/access_log&, whereas &/logs/access_log& # will be interpreted as '/logs/access_log'.## NOTE: Where filenames are specified, you must use forward slashes# instead of backslashes (e.g., &c:/apache& instead of &c:/apache&).# If a drive letter is omitted, the drive on which httpd.exe is located# will be used by default.
It is recommended that you always supply# an explicit drive letter in absolute paths to avoid confusion.ServerSignature OnServerTokens Full## ServerRoot: The top of the directory tree under which the 's# configuration, error, and log files are kept.## Do not add a slash at the end of the directory path.
If you point# ServerRoot at a non-local disk, be sure to specify a local disk on the# Mutex directive, if file-based mutexes are used.
If you wish to share the# same ServerRoot for multiple httpd daemons, you will need to change at# least PidFile.#ServerRoot &c:/wamp/bin/apache/apache2.4.9&Define APACHE24 Apache2.4## Mutex: Allows you to set the mutex mechanism and mutex file directory# for individual mutexes, or change the global defaults## Uncomment and change the directory if mutexes are file-based and the default# mutex file directory is not on a local disk or is not appropriate for some# other reason.## Mutex default:logs## Listen: Allows you to bind Apache to specific IP addresses and/or# ports, instead of the default. See also the &VirtualHost&# directive.## Change this to Listen on specific IP addresses as shown below to # prevent Apache from glomming onto all bound IP addresses.##Listen 12.34.56.78:80Listen 0.0.0.0:80Listen [::0]:80## Dynamic Shared Object (DSO) Support## To be able to use the functionality of a module which was built as a DSO you# have to place corresponding `LoadModule' lines at this location so the# directives contained in it are actually available _before_ they are used.# Statically compiled modules (those listed by `httpd -l') do not need# to be loaded here.## Example:# LoadModule foo_module modules/mod_foo.so#LoadModule access_compat_module modules/mod_access_compat.soLoadModule actions_module modules/mod_actions.soLoadModule alias_module modules/mod_alias.soLoadModule allowmethods_module modules/mod_allowmethods.soLoadModule asis_module modules/mod_asis.soLoadModule auth_basic_module modules/mod_auth_basic.so#LoadModule auth_digest_module modules/mod_auth_digest.so#LoadModule authn_anon_module modules/mod_authn_anon.soLoadModule authn_core_module modules/mod_authn_core.so#LoadModule authn_dbd_module modules/mod_authn_dbd.so#LoadModule authn_dbm_module modules/mod_authn_dbm.soLoadModule authn_file_module modules/mod_authn_file.so#LoadModule authn_socache_module modules/mod_authn_socache.so#LoadModule authnz_ldap_module modules/mod_authnz_ldap.soLoadModule authz_core_module modules/mod_authz_core.so#LoadModule authz_dbd_module modules/mod_authz_dbd.so#LoadModule authz_dbm_module modules/mod_authz_dbm.soLoadModule authz_groupfile_module modules/mod_authz_groupfile.soLoadModule authz_host_module modules/mod_authz_host.so#LoadModule authz_owner_module modules/mod_authz_owner.soLoadModule authz_user_module modules/mod_authz_user.soLoadModule autoindex_module modules/mod_autoindex.so#LoadModule buffer_module modules/mod_buffer.soLoadModule cache_module modules/mod_cache.soLoadModule cache_disk_module modules/mod_cache_disk.so#LoadModule cern_meta_module modules/mod_cern_meta.soLoadModule cgi_module modules/mod_cgi.so#LoadModule charset_lite_module modules/mod_charset_lite.so#LoadModule data_module modules/mod_data.so#LoadModule dav_module modules/mod_dav.so#LoadModule dav_fs_module modules/mod_dav_fs.so#LoadModule dav_lock_module modules/mod_dav_lock.so#LoadModule dbd_module modules/mod_dbd.soLoadModule deflate_module modules/mod_deflate.soLoadModule dir_module modules/mod_dir.so#LoadModule dumpio_module modules/mod_dumpio.soLoadModule env_module modules/mod_env.so#LoadModule expires_module modules/mod_expires.so#LoadModule ext_filter_module modules/mod_ext_filter.soLoadModule file_cache_module modules/mod_file_cache.so#LoadModule filter_module modules/mod_filter.so#LoadModule ers_module modules/mod_headers.so#LoadModule heartbeat_module modules/mod_heartbeat.so#LoadModule heartmonitor_module modules/mod_heartmonitor.so#LoadModule ident_module modules/mod_ident.so#LoadModule imagemap_module modules/mod_imagemap.soLoadModule include_module modules/mod_include.so#LoadModule info_module modules/mod_info.soLoadModule isapi_module modules/mod_isapi.so#LoadModule lbmethod_bybusyness_module modules/mod_lbmethod_bybusyness.so#LoadModule lbmethod_byrequests_module modules/mod_lbmethod_byrequests.so#LoadModule lbmethod_bytraffic_module modules/mod_lbmethod_bytraffic.so#LoadModule lbmethod_heartbeat_module modules/mod_lbmethod_heartbeat.so#LoadModule ldap_module modules/mod_ldap.so#LoadModule logio_module modules/mod_logio.soLoadModule log_config_module modules/mod_log_config.so#LoadModule log_debug_module modules/mod_log_debug.so#LoadModule log_forensic_module modules/mod_log_forensic.so#LoadModule lua_module modules/mod_lua.soLoadModule mime_module modules/mod_mime.so#LoadModule mime_magic_module modules/mod_mime_magic.soLoadModule negotiation_module modules/mod_negotiation.so#LoadModule proxy_module modules/mod_proxy.so#LoadModule proxy_ajp_module modules/mod_proxy_ajp.so#LoadModule proxy_balancer_module modules/mod_proxy_balancer.so#LoadModule proxy_connect_module modules/mod_proxy_connect.so#LoadModule proxy_express_module modules/mod_proxy_express.so#LoadModule proxy_fcgi_module modules/mod_proxy_fcgi.so#LoadModule proxy_ftp_module modules/mod_proxy_ftp.so#LoadModule proxy__module modules/mod_proxy_html.so#LoadModule proxy_http_module modules/mod_proxy_http.so#LoadModule proxy_scgi_module modules/mod_proxy_scgi.so#LoadModule ratelimit_module modules/mod_ratelimit.so#LoadModule reflector_module modules/mod_reflector.so#LoadModule remoteip_module modules/mod_remoteip.so#LoadModule request_module modules/mod_request.so#LoadModule reqtimeout_module modules/mod_reqtimeout.so#LoadModule rewrite_module modules/mod_rewrite.so#LoadModule sed_module modules/mod_sed.so#LoadModule session_module modules/mod_session.so#LoadModule session_cookie_module modules/mod_session_cookie.so#LoadModule session_crypto_module modules/mod_session_crypto.so#LoadModule session_dbd_module modules/mod_session_dbd.soLoadModule setenvif_module modules/mod_setenvif.so#LoadModule slotmem_plain_module modules/mod_slotmem_plain.so#LoadModule slotmem_shm_module modules/mod_slotmem_shm.so#LoadModule socache_dbm_module modules/mod_socache_dbm.so#LoadModule socache_memcache_module modules/mod_socache_memcache.so#LoadModule socache_shmcb_module modules/mod_socache_shmcb.so#LoadModule speling_module modules/mod_speling.so#LoadModule ssl_module modules/mod_ssl.so#LoadModule status_module modules/mod_status.so#LoadModule substitute_module modules/mod_substitute.so#LoadModule unique_id_module modules/mod_unique_id.so#LoadModule userdir_module modules/mod_userdir.so#LoadModule usertrack_module modules/mod_usertrack.so#LoadModule version_module modules/mod_version.soLoadModule vhost_alias_module modules/mod_vhost_alias.so#LoadModule watchdog_module modules/mod_watchdog.so#LoadModule xml2enc_module modules/mod_xml2enc.soLoadModule php5_module &c:/wamp/bin/php/php5.5.12/php5apache2_4.dll&#PHPIniDir c:/wamp/bin/php/php5.5.12&IfModule unixd_module&## If you wish httpd to run as a different user or group, you must run# httpd as root initially and it will switch.
## User/Group: The name (or #number) of the user/group to run httpd as.# It is usually good practice to create a dedicated user and group for# running httpd, as with most system services.#User daemonGroup daemon&/IfModule&# 'Main'
configuration## The directives in this section set up the values used by the 'main'# server, which responds to any requests that aren't handled by a# &VirtualHost& definition.
These values also provide defaults for# any &VirtualHost& containers you may define later in the file.## All of these directives may appear inside &VirtualHost& containers,# in which case these default settings will be overridden for the# virtual host being defined.### ServerAdmin: Your address, where problems with the
should be# e-mailed.
This address appears on some server-generated pages, such# as error documents.
e.g. admin@#ServerAdmin ## ServerName gives the name and port that the server uses to identify itself.# This can often be determined automatically, but we recommend you specify# it explicitly to prevent problems during startup.## If your host doesn't have a registered DNS name, enter its IP address here.#ServerName localhost:80HostnameLookups Off## DocumentRoot: The directory out of which you will serve your# documents. By default, all requests are taken from this directory, but# symbolic links and aliases may be used to point to other locations.#DocumentRoot &c:/wamp/www/&## Each directory to which Apache has access can be configured with respect# to which services and features are allowed and/or disabled in that# directory (and its subdirectories). ## First, we configure the &default& to be a very restrictive set of # features.
#&Directory /&
AllowOverride none
Require all granted&/Directory&## Note that from this point forward you must specifically allow# particular features to be enabled - so if something's not working as# you might expect, make sure that you have specifically enabled it# below.#&Directory &c:/wamp/www/&&
# Possible values for the Options directive are &None&, &All&,
# or any combination of:
Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
# Note that &MultiViews& must be named *explicitly* --- &Options All&
# doesn't give it to you.
# The Options directive is both complicated and important.
Please see
# http://httpd.apache.org/docs/2.4/mod/core.#options
# for more information.
Options Indexes FollowSymLinks Includes
# AllowOverride controls what directives may be placed in .htaccess files.
# It can be &All&, &None&, or any combination of the keywords:
AllowOverride FileInfo AuthConfig Limit
AllowOverride all
# Controls who can get stuff from this .
# onlineoffline tag - don't remove
#Require local
Require all granted&/Directory&## DirectoryIndex: sets the file that Apache will serve if a directory# is requested.#&IfModule dir_module&
DirectoryIndex index.php index.php3 index. index.htm&/IfModule&## The following lines prevent .htaccess and .htpasswd files from being # viewed by Web clients. #&Files &.ht*&&
Require all denied&/Files&## ErrorLog: The location of the error log file.# If you do not specify an ErrorLog directive within a &VirtualHost&# container, error messages relating to that virtual host will be# logged here.
If you *do* define an error logfile for a &VirtualHost&# container, that host's errors will be logged there and not here.##ErrorLog &logs/error.log&ErrorLog &c:/wamp/logs/apache_error.log&## LogLevel: Control the number of messages logged to the error_log.# Possible values include: debug, info, notice, warn, error, crit,# alert, emerg.#LogLevel warn&IfModule log_config_module&
# The following directives define some format nicknames for use with
# a CustomLog directive (see below).
LogFormat &%h %l %u %t /&%r/& %&s %b /&%{Referer}i/& /&%{User-Agent}i/&& combined
LogFormat &%h %l %u %t /&%r/& %&s %b& common
&IfModule logio_module&
# You need to enable mod_logio.c to use %I and %O
LogFormat &%h %l %u %t /&%r/& %&s %b /&%{Referer}i/& /&%{User-Agent}i/& %I %O& combinedio
&/IfModule&
# The location and format of the access logfile (Common Logfile Format).
# If you do not define any access logfiles within a &VirtualHost&
# container, they will be logged here.
Contrariwise, if you *do*
# define per-&VirtualHost& access logfiles, transactions will be
# logged therein and *not* in this file.
CustomLog &c:/wamp/logs/access.log& common
# If you prefer a logfile with access, agent, and referer information
# (Combined Logfile Format) you can use the following directive.
#CustomLog &logs/access.log& combined&/IfModule&&IfModule alias_module&
# Redirect: Allows you to tell clients about documents that used to
# exist in your server's namespace, but do not anymore. The client
# will make a new request for the document at its new location.
# Example:
# Redirect permanent /foo /bar
# Alias: Maps web paths into filesystem paths and is used to
# access content that does not live under the DocumentRoot.
# Example:
# Alias /webpath /full/filesystem/path
# If you include a trailing / on /webpath then the
# require it to be present in the URL.
You will also likely
# need to provide a &Directory& section to allow access to
# the filesystem path.
# ScriptAlias: This controls which directories contain server scripts.
# ScriptAliases are essentially the same as Aliases, except that
# documents in the target directory are treated as applications and
# run by the
when requested rather than as documents sent to the
The same rules about trailing &/& apply to ScriptAlias
# directives as to Alias.
ScriptAlias /cgi-bin/ &c:/wamp/bin/apache/apache2.4.9/cgi-bin/&&/IfModule&&IfModule cgid_module&
# ScriptSock: On threaded s, designate the path to the UNIX
# socket used to communicate with the CGI daemon of mod_cgid.
#Scriptsock cgisock&/IfModule&## &c:/wamp/bin/apache/apache2.4.9/cgi-bin& should be changed to whatever your ScriptAliased# CGI directory exists, if you have that configured.#&Directory &c:/wamp/bin/apache/apache2.4.9/cgi-bin&&
AllowOverride None
Options None
Require all granted&/Directory&&IfModule mime_module&
# TypesConfig points to the file containing the list of mappings from
# filename extension to MIME-type.
TypesConfig conf/mime.types
# AddType allows you to add to or override the MIME configuration
# file specified in TypesConfig for specific file types.
#AddType application/x-gzip .tgz
# AddEncoding allows you to have certain browsers uncompress
# information on the fly. Note: Not all browsers support this.
AddEncoding x-compress .Z
AddEncoding x-gzip .gz .tgz
# If the AddEncoding directives above are commented-out, then you
# probably should define those extensions to indicate media types:
AddType application/x-compress .Z
AddType application/x-gzip .gz .tgz
AddType application/x-httpd-php .php
AddType application/x-httpd-php .php3
# AddHandler allows you to map certain file extensions to &handlers&:
# actions unrelated to filetype. These can be either built into the
# or added with the Action directive (see below)
# To use CGI scripts outside of ScriptAliased directories:
# (You will also need to add &ExecCGI& to the &Options& directive.)
#AddHandler cgi-script .cgi
# For type maps (negotiated resources):
#AddHandler type-map var
# Filters allow you to process content before it is sent to the client.
# To parse .shtml files for -side includes (SSI):
# (You will also need to add &Includes& to the &Options& directive.)
AddType text/ .html
AddOutputFilter INCLUDES .html&/IfModule&## The mod_mime_magic module allows the
to use various hints from the# contents of the file itself to determine its type.
The MIMEMagicFile# directive tells the module where the hint definitions are located.##MIMEMagicFile conf/magic## Customizable error responses come in three flavors:# 1) plain text 2) local redirects 3) external redirects## Some examples:#ErrorDocument 500 &The server made a boo boo.&#ErrorDocument 404 /missing.#ErrorDocument 404 &/cgi-bin/missing_handler.pl&#ErrorDocument 402 /subscription_info.html### MaxRanges: Maximum number of Ranges in a request before# returning the entire resource, or one of the special# values 'default', 'none' or 'unlimited'.# Default setting is to accept 200 Ranges.#MaxRanges unlimited## EnableMMAP and EnableSendfile: On systems that support it, # memory-mapping or the sendfile syscall may be used to deliver# files.
This usually improves
performance, but must# be turned off when serving from networked-mounted # filesystems or if support for these functions is otherwise# broken on your system.# Defaults: EnableMMAP On, EnableSendfile Off##EnableMMAP offEnableSendfile off# AcceptFilter: On Windows, none uses accept() rather than AcceptEx() and# will not recycle sockets between connections. This is useful for network# adapters with broken driver support, as well as some virtual network# providers such as vpn drivers, or spam, virus or spyware filters.AcceptFilter http noneAcceptFilter https none# Supplemental configuration## The configuration files in the conf/extra/ directory can be # included to add extra features or to modify the default configuration of # the , or you may simply copy their contents here and change as # necessary.# Server-pool management (MPM specific)#Include conf/extra/httpd-mpm.conf# Multi-language error messages#Include conf/extra/httpd-multilang-errordoc.conf# Fancy directory listingsInclude conf/extra/httpd-autoindex.conf# Language settings#Include conf/extra/httpd-languages.conf# User home directories#Include conf/extra/httpd-userdir.conf# Real-time info on requests and configuration#Include conf/extra/httpd-info.conf# Virtual hosts#Include conf/extra/httpd-vhosts.conf# Local access to the Apache HTTP Server Manual#Include conf/extra/httpd-manual.conf# Distributed authoring and versioning (WebDAV)#Include conf/extra/httpd-dav.conf# Various default settings#Include conf/extra/httpd-default.conf# Configure mod_proxy_ to understand HTML4/XHTML1&IfModule proxy_html_module&Include conf/extra/proxy-.conf&/IfModule&# Secure (SSL/TLS) connections#Include conf/extra/httpd-ssl.conf## Note: The following must must be present to support#
starting without SSL on platforms with no /dev/random equivalent#
but a statically compiled-in mod_ssl.#&IfModule ssl_module&SSLRandomSeed startup builtinSSLRandomSeed connect builtin&/IfModule&## uncomment out the below to deal with user agents that deliberately# violate open standards by misusing DNT (DNT *must* be a specific# end-user choice)##&IfModule setenvif_module&#BrowserMatch &MSIE 10.0;& bad_DNT#&/IfModule&#&IfModule ers_module&#RequestHeader unset DNT env=bad_DNT#&/IfModule&#IncludeOptional &c:/wamp/vhosts/*&Include &c:/wamp/alias/*&
直接在盘安装的话就直接复制就行。
(2)、国内虚拟机：靠谱助手完整版；下载后先安装引擎，然后在软件内下载浏览器就行。
(3)、可以尝试使用手机助手这类软件来帮助你做真机测试，不过，要是你没其他作为测试机的话，你的手机应该很容易坏！
(4)、怎么混合使用呢？方法在这：
你的电脑先开个出来，然后你的手机得连上这个；这样就是内网；
只要你是有需要测试的时候，双击打开，加上按照我的配置文件就可以了，用户直接在“开始栏——输入——”然后往下看看，无线网络：这样的你在手机浏览器地址栏输入就行。
上面的是手机，现在给你谈谈靠谱助手；它不需要人工连，只要你打开了一般都可以直接上网了。然后你可以去查下怎么改配置把相关的分辨率大小给改下；同样的方法在靠谱助手的浏览器上输入地址就行。
14、分析开发的断点：
(1)、国内市场普遍的是和，像才；分辨率，像素这些词语一般是告诉给设计师，我们前端要明白的是；
(2)、字体大小：我相信有部分童鞋会认为浏览器会自适应让你页面的字体随着不同的屏幕大小而自动适应，我告诉你，你错了！
这些字体自适应都是人为设置出来的，我推荐的方案是：
body{font:14px&line-height:20px}//网页整体字体以为主。
h1,h2,h3,h4,h5,h6&{font-size:100%;font-weight:500;}
h1{font-size:24px}
h2{font-size:22px}
h3{font-size:18px}
@media&only&screen&and&(min-width:360px)&{
body,button,input,select,textarea&{font-size:18line-height:26}
h1{font-size:28px}
h2{font-size:26px}
h3{font-size:22px}
(3)、类控制分析：
看到上面大概也了解怎么使用了吧；
另外，定义类名的第一个重要性就在这里了：因为你要控制一个类在或不同的屏幕上有适应屏幕大小的样式结构！
(4)、我们开发时，一般要做到兼容的浏览器普遍是国内的浏览器苹果的浏览器都是内核：，，，百度，这些浏览器是国内使用用户量最大的浏览器厂商，虽然不是内核都一样，但是普遍的兼容问题还不是很多，所以我们优先选择兼容的是内核的。
(5)、前端开发性能优化个人总结建议：
一、单个文件大小不要超过；插件不要超过。
二、优先选择使用字体图标，非要用上图片的话，就使用方法。同时，将整合到一张图片的图标集合和在网站或不常用的图片进行压缩。
三、优化问题：我们常写代码时会经常忽略这个标签会带上等这些可以填上关键词的地方，这个是必须要说明下，不过在手机端的话，这个好像还真用不上吧。
四、，文件尽量以合并的方式，少以分开来写样式。
五、利用技术，减轻空间资源；对企业来讲，这个风险有点大；但手机用户的网络差时会出现文件不能及时加载等问题。
六、图片多使用来达到优化效果。
七、少对图片进行硬性设置宽高。
八、减少页面请求：图片数量的多少会对请求有影响；同时要注意类组合一般情况下不要超过个，超过的尽量以取个新的类名来定义会好点。
九、减少访问次数，加载数量多了就影响访问速度。
十、不要出现页面，避免重定向。
十一、减少体积，设置合理的过期时间。
十二、缓存，用方式提交；以方式提交。
&-----------------------------------------------------------------------------------------------------------------------------------
还有其他的，因为我还没用上，所以就不知道怎么解释了，先用着吧！JavaScript方面的我还没熟悉就不做太多共享了，明年再分享吧
------------------------------------------------------------------------------------------------------------------------------------
现在我给大家来谈谈的问题包括框架：
关于数据交互的框架：
这个框架学习起来不是特别难，不过要运用的话，还得花心思多练习和熟悉基本的语法。网上有他的文档，都是翻译，不过看完这个后，你还是得重新去看看官方的。
最近公司要求我们学习的框架是AngularJs:
他在国内专门的社区，现在我用的是1.3.9版本；这个框架有angular-ui有基于Bootstrap框架的(是自带ng指令的---开心吧)；
给你自己定好一个学习时间，定一个学习路线等等规划，对我来说，难点在于交互，我还没搞懂！
JS是所有前端人员的难点和重点，我之前之所以学不懂的主要原因是顾虑太多，基础不稳定，自然要去补习，所以我这次是以稳定的基础后再去学习的话，应该会轻松很多。同时给自己定的时间长点，学习技术不懂就不懂急不来的，不懂就上网查和问就是了。
JS的面向对象：面向对象是一个思想，他归根到底就是让你写函数封装起来。这个跟是一个意思，目的为了让你以后轻松管理代码。虽然描述得不清晰，我说这个主要是告诉新手，面向对象不难，难的是你练习了吗？学习的过程中不要心烦气躁，保持头脑清晰，冷静的面对逻辑问题；所有的技术由入门到精通都是熟能生巧。
在这里我要说的是 各位童鞋，千万不要去害怕学你现在以为很难的知识和新知识；否则，当你公司真正要用上的时候，你会很痛苦。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：12025次
排名：千里之外
转载：39篇
(1)(1)(1)(8)(6)(7)(22)(2)}
我要回帖
更多关于 页面title 的文章
更多推荐
- ·求书名，小时候看的，8年前以前看过的小说忘记书名怎么找了吧 估计是没人知道的，只是不知道为啥老是在记忆里出现一些片段，好难
- ·深圳市前海金融是什么贷款平台共享科技互联网技术有限公司怎么样怎么与前海金融是什么贷款平台易贷是一个地址。是一个地址两张牌吗？
- ·现在小物流公司靠什么盈利行业竞争越来越激烈。有没有靠谱的网络货运，可以帮我们这种中小型小物流公司靠什么盈利企业成功转型的？
- ·一朵未经雕琢的赞美路边野花的诗句，在湘西的田野间自由生长，她的笑容如同清晨的露水，清新而纯净出自哪个网站？
- ·砸黄家驹墓碑被破坏 嫌犯落网热的墓碑，会被以什么罪名起诉？
- ·当图象是何种cmyk模式下调色滤镜时，所有的滤镜都不可以使用
- ·qq的聊天记录字体突然变得很奇怪成了奇怪的字符 大概是：λα这类，希腊文。为什么
- ·网上药店太多了，想买点好药，朋友推荐了亮健好药网，大家觉得我水太多怎么样
- ·潮人服装怎么苹果手机如何连接电脑连接不上电脑
- ·openmp的库函数和编译错误缺少语句结束指导语句的区别
- ·杀手5赦免视频解说需要多大硬盘空间
- ·中专报物联网技术及应用应用要电脑吗?
- ·欧也妮葛朗台读书笔记pdf葛朗台pdflol多久没打排位会掉word中怎么搜索段
- ·mac os x el capitan dmg更新需要备份吗
- ·黄钻绿钻点亮星钻跟绿钻都是开的年费为何星钻不显示年费？？？
- ·求virtualbox增强工具包5.0.24扩展增强包
- ·app广告如何怎么玩出彩中国人玩彩虹圈
- ·有没有一个可以看台湾挑战新闻土豆视频的手机软件？
- ·开通了腾讯微博的蚂蚁聚宝基金怎样退定
- ·移动端app 切换页面时title不js改变title是怎么回事
- ·edm平台的技术架构 云平台数据库架构.开发语言 有哪几种
- ·百度云帐号如何加好友求电影 百度帐号加好友
- ·求日在校园ova百度云六集版百度云
- ·高压开关筒体双路电源自动切换开关最大是多少安
- ·请问我这个美国1084弹簧钢带稳压管用什么能够替换呢？因为没有标识输出为几v，请各
- ·上缘网络语言沙发什么意思网络语言
- ·求这张海棠依旧剧情介绍的清晰大图 出自央视3套《海棠依旧剧情介绍》的片尾 去视频app看
- ·电脑怎么备份一部分软件，怎么手动ghost备份选择备份。
- ·jsp和thymeleaf jsp哪个好
- ·求盗墓笔记百度云盘下载电影的百度云盘
- ·我qq克隆好友怎么弄 先克隆后付款 500好友10元
- ·为什么苹果录屏软件（recscreen不能录屏）现在不能用了？
- ·谁有qq飞车紫钻cdkCDK啊，只想要提车，求大神帮忙，免费的
- ·谁有用宠你一辈子txt百度云说我爱你txt百度云
- ·联想手机用不了自拍杆916为什么自拍杆用不了
