网页制作的有谁知道这种网页效果怎么实现吗？急急急急-中国学网-中国IT综合门户网站-提供健康,养生,留学,移民,创业,汽车等信息
> 信息中心 >
网页制作的有谁知道这种网页效果怎么实现吗？急急急急
来源：互联网 发表时间： 7:15:17 责任编辑：王亮字体：
为了帮助网友解决“网页制作的有谁知道这种网页效果怎么实现吗？急急急急”相关的问题，中国学网通过互联网对“网页制作的有谁知道这种网页效果怎么实现吗？急急急急”相关的解决方案进行了整理,用户详细问题包括:RT,我想知道:网页制作的有谁知道这种网页效果怎么实现吗？急急急急，具体解决方案如下：解决方案1：
JS源码&quot懒人建站; 应该也能找出很多哦,里边有很多JS特效,这是基本JS效果,也有你需要的;DIV层的渐隐&quot,或者直接去度娘& 你如果百度&quot,下载个网页特效精灵; 或者 &JS广告源码&quot
解决方案2：
//js.com/s/pfad_1://jshttp.alixixi
1个回答3个回答2个回答2个回答3个回答1个回答5个回答3个回答1个回答1个回答1个回答1个回答1个回答1个回答1个回答1个回答1个回答1个回答1个回答
相关文章：
<a href="/cse/search?q=<inputclass="s-btn"type="submit"text="<inputclass="s-btn"type="submit"text="<buttonhidefocusclass="s-btnjs-ask-btn"text="我要提问
<a href="/cse/search?q=利用CSS3制作动画效果
在CSS3中新增了几个很好玩的东东：CSS Animation，CSS Transition 和 CSS Transform，顾名思义就是通过CSS来实现动画，过渡和变形。
它们与HTML5中的能绘制动画图形不同，这些只能应用在已存在的元素上，但这足以让我很兴奋了，我不必要在去写那些复杂的JS代码，运用它们我能更简单的创建自己的想要的动画。
伴随着CSS3的普及，这些特性被各大支持也只是时间上的问题。有消息称在Internet Explorer 9 中将更好的支持HTML5和CSS3。所以各位围观群众不必担心这只是昙花一现。以下是我就目前的支持状态统计的一个表格：
chrome&safair
firefox 3.5.5 *(3)
opera 10.10- *(4)
CSS Transiton
CSS Animation
2D Transform
3D Transform
*(1)：IE可以通过滤镜来实现部分变形
*(2) : Windows下的chrome和safair支持部分3D Transform。mac和iphone下的safair支持全部3D Transform(未验证)
*(3)：firefox3.7同IE9一样称将支持更多CSS3特性，不过最终是否支持Animation和3D Transform还不是很确定
*(4)：oprea已经在表示在Presto2.3(opera内核)中将支持Transtion。可查看
接下来要开始了，各位看官准备好chrome或safair，演示和代码使用webkit的私有属性，let&s 干吧。
CSS Transition
这个能实现很舒服的过度效果，先看CSS代码片段：
width: 200
height: 200
background: #
-webkit-transition: all 1s ease-in- /*实现hover状态是backround的过渡*/
.box:hover {
background: #333;
你可以在看到这个演示，务必请用基于webkit的chrome或safair（以下同）。看完演示是不是很有兴趣想去学如何去使用了？transiton属性有这几个值：
transition-property :* //指定过度的性质，比如transition-property：backgrond 就是只指定backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过度类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
linear&& //线性过度
ease-in&& //由慢到快
ease-out& //由快到慢
ease-in-out //由慢到快在到慢
timing-funciton的几种过度类型都是基于cubic-bezier的某些特定数值。比如ease-in-out的类型它也可以写成cubic-bezier(0.42, 0, 0.58, 1.0)。你可以在看到 cubic-bezier曲线图
Transiton和下面的Animation都是支持CSS伪类
同样的，这些我们可以简写，拿上面的代码& -webkit-transition: all 1s ease-in- 包含了property , duration ,timing-fuction。
参考资料：
（这个是w3c的官方文档，英语好的可以详细看看）
（这个webkit官方博客上的讲解，也有例子）
怎么样，赶紧打开编辑器自己写写吧
CSS Animation
顾名思义，这个就能实现元素的动画效果，那时我就被震惊了，无数次那尼感叹。可以先看下，代码如下
@-webkit-keyframes title {
text-shadow:0px 0px 15px #000;
text-shadow: 0px 0px 30px #3995
color: #aac7d4;
margin-top:200
text-shadow: 0px 0px 15px #000;
-webkit-animation: title infinite ease-in-out 3s;
animation有这几个属性：
animation-name//属性名，就是我们定义的keyframes
animation-duration //持续时间
animation-timing-function //同上面的transition-timing-function
animation-delay // 设置动画延迟
animation-iteration-count //定义循环次数，infinite为无限
animation-direction //定义动画方式
这些同样是可以简写的。但真正让我觉的很爽的是keyframes 这个似乎有点象里面的function，它能定义一个动画的转变过程供调用，过程为0%到100%或from(0%)到to(100%)，简单点说，只要你有想法，你想让元素在这个过程中以什么样的方式改变都是很简单的。
你是不是已经开始蠢蠢欲动了？
参考资料：
transform就是实现元素的变形，为什么放到最后？如果跟上面的CSS Animation结合起来是不是更酷呢？先看看这样一个，相信你不敢相信这只用CSS写出来的效果吧。
transform有几种类型：
scale(num,num) //尺寸，scale(2,3)即x轴方向放大两倍，y轴方向放大3被，同样的可单独写scaleX(2),scaleY(3)
rotate(*deg) //旋转的角度
在2d& transform中 旋转角度俺当前的平面顺时针或逆时针旋转 。在3d transform中新增了 rotateX 和rotateY它们分别以y轴或x轴为中心进行旋转，同样可以简写称rotate(*,*)。目前已被chrome和safair支持
skew（*deg）//倾斜角度，同样的有skewX和skewY 可简写为skew（*,*）
translate //移动
在2d transform中 分为translateX 和translateY 简而言之就是元素网x轴或y轴的移动距离，而在3dtransform中新增了一个translateZ 及实现Z轴的移动，实现透视效果。目前在Windows系统上还没有浏览器支持，同样的这些可以简写。
了解完这些用法后在去看看那个演示的源码，相信你肯定会惊叹transform和animation配合的动画效果了吧
参考资料：
（w3c文档）
（webkit博客上的文章，所以在Windows下没法看到，不过那里有截图过过瘾，并有一个很酷在Windows下打了折扣的哦）
(这个就是用transfrom实现的立方体)
看到这些，你是否跟我一样期待HTML5和CSS3的快点普及呢？在运用这些新特性能快速而简单的创建原本需要复杂js来实现的动画效果，这是多么让人兴奋的。
不过这些还是有那么些缺点的，CSS Animation的确很酷，但不得不提及它的资源占用问题，CSS transform的确很神奇，但不得不提及它的锯齿问题，当然了这些问题相信浏览器的开发者会逐渐改善的。 ()
------分隔线----------------------------我急需知道网站美工图是怎么做出来的_百度知道你用过几款？给新手的ADOBE软件不完全科普指南！
&：Adobe的软件是大家日常使用频率非常高的软件，Adobe旗下都有些什么软件，这些东西是拿来干嘛的？对你的工作也没有帮助？今天就给各位简（话）略（唠）的说明一下！内含各种小技能小知识 &&&
文章为个人见解（上班码字QAQ），欢迎交流，拒绝&友军之围&。文章偏长且经常跑题，建议收藏后慢慢吐槽。
首先，在开始之前回答两个重心问题：
Q：我要不要买正版？
A：2014年10月，Adobe属于中国的研发团队逐步解散,中国区的研发工作将交予Adobe印度公司负责。
大意就是，Adobe退出中国。想要了解的可以百度一下，有非常多的分析文章，我总结一下：Adobe在中国赚不到钱不单单是因为个人使用盗版，更是因为包括大企业和政府机关都会使用盗版（外国也是如此），重点是Adobe对中国市场的定位太高！价格贵得飞起且变动不灵活。（额，跑题了&）所以，你可以登录Adobe中国官网看看，现在最新的版本是CS6！而且价格是定死的！你可以再去Adobe香港看看，软件都是最新的，还可轻松登录云系统！软件也有多种套餐和优惠。所以即使你需要购买正版，也不要购买中国地区的。（个人见解，请勿随意参考）
Q：盗版跟正版功能上有什么区别？
A：这个问题挺多人问的，答案是：没有区别！有的同学发现自己安装的盗版有些功能不能用（比如PS的3D）其实是因为安装出错或者缺少需要的插件，建议下载大师版安装。Adobe的产品非常良心，导致盗版可以使用正版的全部功能，包括云系统！！！你完全可以使用盗版的云同步（感动得我合不拢腿）【给各位介绍一下这个非常神的功能，登录Creative&Cloud后可以上传个人预设跟软件设置，特别是PS和AI，可以上传图层，比如你要把PSD中某个元素发给同事改改，你们可以登录同一个账号，按一个按钮，你的PS图层就会出现在他的电脑AI上，完全不需要其他操作&】极其建议Adobe公司建立一个官方支付宝账号，方便被感动的人们自愿捐赠！（网络因人而异，有些版本或者地区可能会使用不了这个功能）
好的，=&=，终于要开始正文了，本文完全没有鼓励大家使用盗版的意思，请各位也勿围绕盗版展开讨论。以下软件排名为乱序：
说到PS，这玩意就是Adobe的发家致富之物，在很久很久之前，星球大战的特效师约翰&诺尔和他的弟弟在一个黑暗的房&停停停，不能扯历史了QAQ。各位感兴趣的可以自己上维基百科查看&
PS就是一个图片处理软件，这个应该是不用介绍的，因为PS已经成为了一切修改图片的代言（曾经有师妹问我：师兄你是用什么软件PS的？）PS是一直领跑全球的图片处理软件，没有之一。
现在还有大量的人在使用CS3甚至7.0版本（那颗大眼睛），ADOBE的软件是不是越更新越好用，明确告诉你：是的。（同时硬件要求也会稍微上升，但是同等硬件售价一直在下降，所以不存在投入很大的说法！）所以有空还是尽快更新吧。最新版本应该是拥有3D打印功能的那一个CC 2014，在帮助-系统信息下可查看具体版本。
如果你要问我新版本最让人感动的地方的话，个人认为是内容识别（shift+F5），其次才是裁剪什么的&
了解CC 2014的强大功能右戳：,,,,,,,
Photoshop Elements&
最新的版本是Photoshop&elements&13，可以理解为这是PS的简化版本，这玩意可以打开PSD格式文件并编辑，但使用起来就会发现跟PS似乎区别也没那么大，该有的功能都有，简单好用易上手，推荐给&觉得美图秀秀不够好，但PS又不想学&的妹子们。至于好用程度，机智的我发现了还有英国大叔用这个软件做假车票被抓的悲剧。这个软件更新很快，Adobe打算攻坚低端市场？干得漂亮！&PS：盗版用户请谨慎更新。）
LR是一个照片处理软件，人称摄影师的必备后期工具（然而很多摄影师还是坚持使用PS&），LR有几个特点，它有一套自己的存储、备份与分类、管理文件方案（这点PS望尘莫及），而且调色预设非常方便，可以随时预览跟对比照片修改方案和预设，自己可以创造预设和使用其他人的预设是最热门的功能。说白了LR就是调色快速方便，如果要精修还是得用PS。还有，Camera&Raw&（新版本PS内置插件）和LR的功能可以说是&一个模子印出来的&。如果你不需要文件管理与套预设的话，用Camera&Raw&基本可以代替LR。（个人见解，请勿随意参考）
Adobe&Illustrator
窝觉得AI也不用介绍诶&Adobe&Illustrator是矢量绘图软件，最大的特点就是基本靠钢笔操作。输出、链接到各种格式、软件都非常好用，网络上有千千万万的AI工作者，特别是插图，UI，LOGO，矢量花纹、背景、图案、3D&嗯，好像除了图片所有都可以经AI很好的处理，AI涉及非常多的领域贴别是印刷方面，熟练的人可以用AI创造任何东西（拟物化大神），AI技巧有非常多，字体3D和潮流的扁平跟低面风格都很让人喜爱，学好AI也对平面设计师有很多好处。
低面风格教程：
Adobe Premiere
Adobe Premiere，用起来最爽的视频剪辑工具之一。PR剪辑视频非常精准，声音跟画面同步预览和修改，易学高效，跨行业最广的必备的剪辑工具，而且除了剪辑，它还可以制作非常多的影视特效！除了它跟AE共用的大量外部插件以外，自带的效果也不算少，调色、转场、遮罩、调音、滤镜、扭曲等等，Youtube上就有不少视频使用简单剪辑特效制作神奇效果以假乱真，网上教程也非常多，这是我最满意的软件之一，除了字幕（吐血中&）这软件还是非常完美的，它跟AE相互可以完美连接工程，两个软件配合使用天下无敌。可以使用显卡CUDA加速（下面会有一段专门讲解硬件姿势）它跟AE的流畅度对比起来就好像老硬盘对比SSD一样。
PR Element：
跟PS&element一样，也出到了13版本。本以为简化版不会有太多的功能，但我错了，它有快速和专家模式，专家模式也提供了多轨编辑。滤镜跟转场也非常多，还有预设图像和自动调色，有这些就算了，居然还有抖动稳定器和运动跟踪！这还是剪辑软件吗=&=，让会声会影情何以堪啊。。。非常建议&想快速做一个简洁可爱视频但不想费劲学软件&的妹子使用PR&element，同样的，这个软件更新也非常快，如果将来支持插件的话，会声会影压力会大。。。（什么是运动跟踪？你可看过有码动作片？：）
粗剪软件，界面跟PR没什么区别，但是对应时间轴跟多视频时更加方便。
Bridge是一个平面素材管理软件，它可以直接查看PSD文件（虽然很多第三方看图软件也可以做到，但是经常颜色会失真和出现噪点）也可以调用Camera&Raw来编辑图片，最重要的是管理、归类、打分系统非常全面，快速的就可以找到想要的东西，可能刚刚开始接触平面不会太觉得，但当你工作半年以后，你会觉得电脑里面乱糟糟的，每次找东西发给别人简直要命。
使用方法看：
Adobe&InDesign
Adobe&InDesign简单的说是一个排版软件，用于杂志、周刊、报纸、出版物、海报等。可以将文档直接导出为Adobe的PDF格式，可以与AI、PS完美结合，包容性强大，纸上媒体都爱它，说到ID就不得不吐槽CDR（CorelDraw，Corel公司出的综合型平面软件，常用来排版）&这口苦水我怎么都要吐CDR一脸！CDR到底是不是一个已经完成的WINDOS软件？各种卡顿延迟，鼠标失踪，高兴的时候卡你两分钟，不高兴直接让你死机，自动保存失灵，文件图片丢失，图片有色差，图层难选中，无论你配置多高用的是X4X5X6X7都照样崩溃！用过CDR的人都被它虐过！你看看人家Adobe，稳定又流畅，简直就是微软生的娃&(再次呼吁Adobe开设支付宝捐赠&.)
Incopy，是搭配ID使用的排版软件，用这个软件的人实在是少，下图看界面就明白了，虽然跟ID相像，但更加注重于文字排版，对于ID支持不好的文字选项它都得心应手，在官方介绍（）中看得出，几乎就是一个ID的插件&..
Audition是Adobe产品里面唯一的音频编辑软件。主攻混音、剪辑、录音等，也可以用来降噪、去噪、提取人声、处理均衡等，这个软件我并没有用过多少次，没有我一开始想象般那样厉害，不能凭空创造音乐，也很难通过调音来将普通声音创造音乐，感觉效果不多，对入门用户也不大友好，但大神的作品还是非常棒的。接触不多，吐槽不能，见谅。
After&Effects
终于说到After&Effects了，这是一个最为著名的非线性编辑合成软件，也是我工作主要使用的软件之一，其强大的功能霎时间让我无从下口，其自身除了剪辑以外添加了大量的合成特效，像是一个容器可以装载各种各样的工具，你可能使用AE一两年都不能熟练掌握它的各种特效，为什么？一，每种效果的可调节性强，不像PR，拖效果进入轨道调一下关键帧就完事，AE的效果普遍滑块长、数值乱、颜色多，并且几种特效可以同时叠加起作用！经常想要重现效果还要拿笔记一下。二，第三方插件越来越多，体积跟内容也越来越多，比如蓝宝石插件自带上百种特效真是虐够我了，粒子光效和运动感觉就是无穷无尽的大坑，AK大神的E3D跟光效更是把AE的3D加强到了一个新境界，C4D的插件直接建模型进行操作&..
AE的教程书别提有多厚了，网上教程极多，素材极多，模板极多。关于模板我要说一件事情，用套模板可以说是AE最为广泛的使用方法，甚至很多人对AE并不熟悉的人利用套模板混优质工作岗位，或者倒卖模板获利！我不评判这种现象，但的确是有些许不公平，因为这并不是你的作品，不是你的能力体现，你不应该获得这份自豪和收获，但这也正是现实的残酷，很多刚毕业的特效师都被只会套模板的同学逼到转职你造吗。但毕竟很多爱好者都是这样过来的，努力做到，套一次模板学到一个新技能便是一个好目标，很多模板都有值得学习的东西，现在我已经可以差不多做到看一遍分析得出是怎么做的，图层关系跟特效运用有是怎么实现的，自己再努力临摹，这还是挺好的（看着硬盘里500G模板都不好意思称自己为特效师了（捂脸wigger(100,5））
很多人经常会问，我想搞平面设计、影视后期、三维建模的工作，需要什么硬件？
我先避开苹果系统，苹果系统在某些方面的确是有着一定的优势，但如果是需要个人掏腰包、或者在校学生和家庭共用时，我并不推荐苹果系统。但干这一行的，显示器都需要稍微大一点的，分辨率也尽量以高为好，记得关闭显示器那些乱七八糟的自动功能。
PS、AI、CDR等软件，平面软件并不吃显卡，所以并不需要在显卡上投入多少。（除非玩游戏）CPU，推荐i5-3470或者以上型号，Adobe软件对多核优化还是挺好的，i5足够。内存8G或者以上，内存是一个重大条件，经常PS内存吃满后就开始略卡，内存尽量多投入。
视频最重要也是最耗费时间的地方在于渲染，像是AE/PR之类的，渲染主要还是靠CPU，很明显I7的主频得天独厚，有钱的就上I7-4790K，没钱的就借钱上E3-V2/3，切记不能超频使用，稳定为上。那显卡呢？因为Adobe拥有CUDA加速预览（特别是PR）所以选择显卡需要拥有CUDA功能的（现在N卡基本都有）但实测并没有理想中的效果，显卡利用率不高，所以GTX660/760就已经完全足够使用了。
内存：越大越好，16G够吗？我只能说32G都觉得吃力。内存尽力而为，毕竟这个东西不贵也保值，并且对渲染和预览有很大影响。硬盘：做视频的1T、2T、5T..不在话下，素材也是很大的。那需不需要SSD？其实输出来说SSD并没有瓶颈，但是读取素材的时候最好还是放SSD里面，这个不是必须的，但有是最好了，用着也舒心。（在影视后期中，双屏幕非常实用。）
三维是业界最耗硬件的，特别是灯光复杂，全局光照，环境吸收，高分辨率等的情况下，吃显卡非常厉害，公司项目找渲染农场，富豪请用专业卡（丽台Quadro&系列），普通显卡的话，一分钱一分货，我也推荐不来，不如就把预算权重投入到CPU中更为划算，同样是尽量上E3，努力上I7，内存和SSD需求不大。（如果只是日常渲染物件静帧的话，其实普通配置也能撑得起）（注意部分建模软件不吃显卡，渲染器吃显卡）
有的同学问：我经常打开软件会很卡，鼠标不听使唤乱闪。这一般都是硬盘读不过来，特别是插件或者字体多的同学，解决方法是删掉那些没用的东西，检查硬盘有没有坏道，坏道只能屏蔽没法修。建议把软件放在SSD内，机械硬盘尽量挑选缓存大和转速高的（希捷别选三碟的，西数别选绿盘）机械硬盘同时也是电脑里面最容易坏的东西，记得定时备份。
*CAD：据说CAD的硬件要求比较特殊，没有考究不作参考。
Edge Animate
说完AE必须说一说AN，AN可以说是H5网页动效神器，主要是拿来制作网页动画与效果甚至网页游戏的，从时间轴和舞台界面来看，真的很像AE和FL的合体！转换代码后的图形动态效果明显要比FLASH更为流畅易控，而且带有缓动曲线，虽然看起来强大，但现在还是刚刚起步不久，有人就要问了&这不是要取代FLASH的节奏吗&不一定！很明显这是一个针对移动端（移动端对FLASH兼容和体验太差）的网页，对于桌面网页FLASH还取代不来，而且这个软件还有很多缺陷（下图），现在官网上已经放出很多模板和样式，也越来越多的人踏入这个坑，你为什么不用H5建一个手机个人网页玩玩呢？这个软件支持插件，将来必成大器！
一开始接触MU的时候，上网找资料搜索出来全是&奇迹MU&&极品装备，一秒刷爆&。。。MU是一个建站工具，是专门给设计师建站用的，但一直没有什么起色，因为根本没几个设计师会自己建站，这个工具还是很好用的，兼容PS、AI、ID，还带有一点交互特效。但让我觉得奇怪的是居然打不开HTML，它支持AN的oam格式，但我在AN里面找了半天都不知道怎么输出oam&谁知道这两个软件怎么配合的告诉我一下&
Flash就是Flash啊，不想作介绍。。从CS6开始Flash开始支持HTML5，cc版本做了更加全面的优化，对网络的支持那是极好的，你现在点开一个下载站，你会被无数的FLASH窗口淹没，Flash简单易用（..）传统，掌握FLASH的人非常多，但毕竟还是因为体积大加载慢不稳定等问题坐等淘汰
对了，有一点要强调一下，曾经火爆全球的FLV网络视频格式，在CC2014版本中已经被完全淘汰，是的，所有的Adobe软件都没办法导出FLV文件，我安装了接近十个解码器后放弃了&
SpeedGrade
SpeedGrade是一个调色软件，似乎是Adobe最年轻的软件。但我不得不吐槽，它没有中文啊！！（其他都是自带中文的）没有中文就算了，连中文路径都不支持！你打开文件夹只会看见一堆IIIIIII，这我还都忍了，但它界面是固定的啊！低分辨率（笔记本）下简直难受，但是仅仅作为一个调色软件还是不错的，调色选项很多，自带预设也不少，完美链接PR，而且完全不卡，还有很多我看不懂的色度表，改天看教程学习一下（主要是看不懂英文。。。）
Dreamweaver
Dreamweaver是所见即所得网页编辑器，师必备的工具之一，Adobe为网页真是操碎了心，功能强大，入门也不简单，曾经去上过一节DW的课，出来时晕头转向我就已经决定放弃当师了，给用DW的同学点个赞，你们来吐槽吧。。。
Edge&Reflow
Edge&Reflow是可视化响应式设计工具，简单的是就是响应式网页排版工具，什么是响应式网页？打开花瓣，按住Ctrl建滚动鼠标中键，看见没有，我花瓣里面的美女图重新放大排序了，这就是响应式。这软件界面真是高大上啊，打开以为自己用上了苹果系统&
Media&Encoder
Media&Encoder是视频渲染软件，无缝连接到所有Adobe视频制作软件，非常推荐使用这家伙来渲染：案例一：当你AE做完一个视频，按了渲染，渲染到一半，然后卡死了，啊悲剧啊（这是一个真实的故事）如果直接放进ME里面渲染，AE这边不但不会死，还能继续操作。案例二：做一个视频渲染一次，渲染要等20分钟才行，再做第二个视频，多费时间啊。用ME把AE队列导进去，做一个导一个，晚上睡觉统一挂机渲染~爽
*关于ADOBE这几个能输出视频的软件，请务必要安装QUICKTIME，再安装个完美解码和格式工厂，要不然格式不支持，怎么哭都没有用。
这两好像是围绕基于FLASH的软件开发的管理和分析工具，跟踪和调查运行状况，似乎跟设计师一点关系都没有，不作深入了解，这是官方介绍：
好像已经不更新了，是一个用作网页制图、编辑、动图编辑的软件。
不知道为啥fw排到后面来了，关于FW不得不说有点伤感。还记得当年红红火火的&网页三剑客&，FL、DW、FW三个就想璀璨巨星一样闪耀，我还在读初中，想改一张图，按成龙的话说，就是加特效。便顺其自然的用上了著名的FW，操作简单，效果易控，图层关系清晰明了，还有对GIF输出控制非常方便！那天起我就卸载了美图秀秀。你可知道贴吧签名档里面曾经那些字闪闪的GIF基本都是出自于FW之手？之后那几年地位基本都被PS给取代了，没落的辉煌岁月。。。。。我初中用了两年，之后上大学被迫转到PS（PS的确好用啊QAQ）现在给别人说我精通FW，别人会反问我：FW啥？
Adobe&Captivate
嗯，Adobe&Captivate可能是比较边缘化的软件了，是用来录屏和演示的软件。年前用过一次，从此我就爱上他了！！真的是录屏神器！录完以后会自动添加鼠标轨迹，按键提示等，而且是一种类似PPT的可修改格式，还能导入PPT！也可以输出视频，想给客户演示你的节目、软件、UI使用效果？操作也是傻瓜的，快下载CP啊，比那些破录屏软件好用一百倍。
EN是一个视频制作软件，界面跟PR非常相似，版本越更新就越没用，也是一个面临淘汰的软件，基本可以被PR取代，现在好像是拿来当视频发布和封装的软件。
[相关日志]移动端H5/CSS3（15）
我所使用到的HTML页面标签：
Section,div,artical,p,ol,ul,li,header,footer,span,form,input,label,h1,h2,h3&；详细说明我就不说了，只给新手说下，为什么W3C那么多标签，只使用16个就可以把整个项目解决了？
原因是不要以为标签多，我们就一定要使用到它的，我们要的是使用广泛的，易记的。
稍微解释下，块级元素和行内元素是什么意思？
块级元素就是他占满一行的；行内元素就是他的多个同类可以同时在同一行。
下面讲解下，head标签里面我们在移动端一般都放什么？
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-style&/&
&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&&/&
第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；user-scalable:&用户是否可以手动缩放
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码
第五个meta标签:用于忽略将页面中邮件地址
第六个就是最大的高度限定在568Px以内，这个可以忽略，因为我们都会用滑动来代替；当然了，可以用在页面布局不多的地方！
Link:一般只是引入css文件用的，对于import大部分前辈都说不好，而且他一般也只写在css文件内。我们假如打开一个刚刚下载到本地的网页或框架，浏览页面时很慢，估计也就是在css里面引入了谷歌文件，因为我们国内，谷歌是被封杀的！
Javascript呢？(一般情况下，把引入文件放到&/body&前面的)
下面解释放到head和&/body&2个不同地方的区别：
放在head就是普遍需要用户进行点击或各种操作才触发的事件。
放在&/body&里面就是用户来看之前就执行了。
现在我们来看看CSS的问题了：
1，我相信99%做过1个项目的人都会了解：reset.css(重置文件或common.css,base.css，名称不一样而已，用途都一样。)
我会共享我自己今年所总结积累好的文件写到common.css里面。
@charset &utf-8&;
html,body{background:#f0f0f0;color:#505050;font-size:62.5%;-webkit-user-select:-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:-webkit-user-select:-webkit-touch-callout:-webkit-touch-callout:}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,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:20}
h1{font-size:24}
h2{font-size:22}
h3{font-size:18}
@media only screen and (min-width:360px) {
h1{font-size:28}
h2{font-size:26}
h3{font-size:22}
body,button,input,select,textarea {font-size:18line-height:26}
h1,h2,h3,h4,h5,h6 {font-weight:}
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:}/*阻止旋转屏幕时自动调整字体大小*/
textarea{resize:}
/*取消按钮在inphone上的默认样式*/
input[type=button]{-webkit-appearance:outline:none}
input::-webkit-input-placeholder{color:#F0F0F0;}
textarea::-webkit-input-placeholder{color:#F0F0F0;}
input::-webkit-input-speech-button {display:none}
table {border-collapse:border-spacing:0;}
th {text-align:}
fieldset,img {border:}
abbr,acronym {border:font-variant:}
del {text-decoration:line-}
ol,ul {list-style:}
caption,th {text-align:}
sub,sup {font-size:75%;line-height:0;position:vertical-align:}
sup {top:-0.5}
sub {bottom:-0.25}
ins,a,a:hover {text-decoration:}
a:focus,*:focus {outline:}
.clearfix:before,.clearfix:after {content:&&;display:}
.clearfix:after {clear:overflow:}
.clearfix {zoom:1;}
.clear {clear:display:font-size:0;height:0;line-height:0;overflow:}
.hide {display:}
.block {display:}
.outL{white-space:word-break:break-width:100}
.outH{overflow:text-overflow:white-space: width:100}
.fl{float:display:}
.fr{float:display:}
.cb{clear:}
.cl{clear:}
.cr{clear:}
.rel{position:}
.abs{position:}
.tac{text-align:}
.tal{text-align:}
.tar{text-align:}
.dib{display:inline-}
.vab{vertical-align:}
.vam{vertical-align:}
.vat{vertical-align:}
/*网&#26684;*/
.box{-webkit-box-sizing:border--moz-box-sizing:border-box-sizing:border-height:100%;text-align:padding:5px 0;}
.grid,.wrap,.grid:after,.wrap:after,.grid:before,.wrap:before{-webkit-box-sizing:border--moz-box-sizing:border-box-sizing:border-box}
.grid{*zoom:1}
.grid:before,.grid:after{display:content:&&;line-height:0}
.grid:after{clear:both}
.grid{list-style-type:padding:0;margin:0}
.grid&.grid{clear:float:margin:0 !important}
.wrap{float:width:100%}
/*网&#26684;*/
.col{height:100%;display:-webkit--webkit-box-orient:display:display:-webkit-flex-direction:}
.row{display:-webkit-display:-webkit-flex-wrap:flex-wrap:flex-direction:display:-webkit--webkit-box-orient:-webkit-box-lines:width:100%;height:margin:}
.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;}
.wrapper{position:top:0;right:0;bottom:0;left:0;padding:5px 5px 60px 5overflow:margin-top:44-webkit-overflow-scrolling:}
header,footer{position:right:0;left:0;z-index:1;text-align:background:#CCCCCC;}
header{top:0;height:44}
footer{bottom:0;}
.w100p{width:100%}
.w20p{width:20%;}
.m5{margin:5}
.p5{padding:5}
.pt5{padding-top:5}
注意事项：
1、你使用display:inline-block浏览器是会有默认边距产生的，所以假如想几个div变成行内的而且无边距，那么最好的方法是使用同一方向的浮动(float)，来解决无边距的一列。
2、引入我的css文件后，你会发现为什么我在字体上要进行个断点设置(@media)，我认真的分析过，webapp页面的由于在320px,360px,480px，3个不同viewport宽度大小的情况下制作，那么字体大小肯定要进行相应的设置，不然你在320px的情况下看到的效果跟在480px下看到的是一样。注意：字体是不会自适应的，只有自己进行设置才可以达到预期效果。
3、图标是同样不会自适应的，只有图片可以设置100%，所以图标假如设置100%就会影响整体布局，宽度可以在Img里面写width=”30”这样(30是图片的宽度30px)。
4、除了有时header，footer是要求固定fixed定位外，那么中间要做一个容器/外套给他，我们需要在header下面使用wrapper/container放内容。这个怎么设置，你可以看我的css文件已经做好设置而且包括了案例方便查看。并且可以进行内容过多可以滑动。(关于fixed定位的问题，我多次测试的结果发现，在2.3系统以下的低端手机是不支持fixed定位的，是会出现设备兼容问题:向下滑动时，固定后也会随着页面移动，4.0以上的系统是可以支持，相对较好的解决方法是：使用iscoll.js；会有卡顿，但是对于低端机来讲是不错的解决方案。)我个人是选择放弃2.3系统以下的用户群，因为现在的手机1000元左右就可以买到4.0系统以上的手机，所以，我有理由相信连手机都不愿意更换的普遍有2种情况：1，没钱，2，根本不可能成为你的用户；我不会像PC端那样来兼容IE6-8，我现在唯一兴幸的是公司现在没特定标准要求，所以我可以自由选择，我只需要知道这个解决方法就行；我既然放弃低端机市场，那么我就会以最新的技术来进行布局，所以我不使用iscoll.js，直接用我上面的那个wrapper来作为外套就行。
5、我们如果需要将内容实现2边留有边距，使用的是padding而不是margin。因为设置为margin的话，会出现左边有空白边距，右边反而是贴边的情况。
6、我们做前端写页面最烦的就是class命名，我不喜欢使用下划线，所以我们可以这样来定义class命名方式：asideContent等情况。还有一种叫意义命名；比如说颜色：红色，我们可以定义为：.red:color:red；模块呢？我们可以这样来做：比如我最近做的一个WP手机风&#26684;的webapp页面项目。大家都应该了解他是色块组成，颜色，大小等都不一样。
我的解决方案是：(在销售模块，定义为sell)
sellHead:内容的头部；sellFoot:内容的尾部；
如此类推就有：sellMain；sellContent；sellTitle；sellList；sellTab；sellMenu；sellBtn；sellMsg；sellBanner；sellCol；&
我相信你们看到英文都容易的理解这个是什么意思，位置对应情况。
7、从有了前端这个职称后，就逐渐开始流行：OOCSS的写法来布局CSS页面了。是什么意思？就是用面向对象编程的思想来写CSS，因为现在有了Less,Sass这些了，CSS都可以实现编程了，我们前端的压力就越来越大了。最主要的一点就是实行模块化，代码可以重复使用。对于没编程基础的童鞋来说，真心不懂这些专业的术语是个什么东东？大家可以看看下面我的解释：
(1)、.sellContent{width:200height:200margin:10padding:10px}
注意：背景颜色，边框，圆角这些就不要写在里面了
(2)、.bg{background:#00CC66}；在HTML页面的class=”sellContent&bg”。
(一)、实现的是class组合，同时这2个class类是哪里需要往哪里放，需要什么呢？当然是他里面的属性，只要是他需要该属性的都可以放到一起组合。(组合一般情况下不要超过4个)
(二)、以前我们写css可能是遇到到哪个div需要就给他定义那些属性&#20540;，而且整个页面下来重复的特别多；现在我这样方式不需要了，我们可以用并列式选择器：.sellMain,.sellContent,.sellTitle{border:1px&solid&#cccccc}，减少代码重复的情况，同时继承选择器的作用我们就要注意了：一个项目下来，我们写的页面会达到100个以上，假如我写&ul&li{display:inline-block}这样的话，那么你每个页面只要有li的，他都会是变成行内元素。
所以，我们写页面前必须要先把整个项目的所有页面看一次，脑袋进行一次布局，这样就不会出现这类的问题了。要全面的去理解这个OOCSS的写法，建议你去下载Bootstrap框架文件来看他的源码，和页面案例的布局。
8、区分min-width和max-width的区别，英文我们都看懂，但用的话就不一定了；min-width：最小的宽度为多少的时候开始执行下面的断点布局；max-width：最大的宽度为多少的时候停止执行下面的断点布局。
如：min-width:360px&and&max-width:480px,就是下面的类只在360px-480px之间执行。
注意：有时候我们在谷歌或火狐浏览器做测试的，然后放到真机测试时会发现，真机有时候会比浏览器显示的viewport宽度还要小3px—5px。
9、做头部的时候我往往最讨厌的就是图片和文字对齐；现在我找到新的解决放案了：
(1)、可以把这个img给他一个下边距:负&#20540;；
(2)、有3个属性&#20540;可以选择来用vertical-align:top/middle/bottom&&。
10、我们做移动端的时候，凡是有a标签点击转链接的地方都会系统自带一个透明层的点击效果，取消点击高亮：-webkit-tap-highlight-color:&rgba(0,0,0,0);-webkit-tap-highlight-color:&
11、响应式布局与自适应布局：(以下仅为个人理解)
(1)、响应式布局，我的理解是在电脑，平板，手机，分别有不同的页面布局。
(2)、自适应布局，我的理解是在电脑，平板，手机页面布局一样，只是文字大小，图片大小会发生变化而已。
在电脑上，使用flex-wrap:wrap（伸缩进行换行）这个来进行布局是可以达到响应的，但是在平板和手机就目前来说还不支持这个属性。
我推荐的最佳方案是使用flex布局。(只是不用伸缩换行属性)
下面是我做的一个简单案例：
注意：style.css引用的是上面提供的common.css文件：
&!DOCTYPE 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 1-webkit-flex:1;flex:1;-webkit-box-flex:1;background:}
&ol class=&row&&
&li class=&m5&&
&img src=&img/back.png& width=&30& /& &/li&
&li class=&flex3 m5&&
&h1&header&/h1&
&li class=&m5&&
&img src=&img/down.png& width=&30& /&
&section 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&底部&/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&底部&/span&&/li&
　　CSS3的animate.css动态的使用介绍：
&!DOCTYPE html&
&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& /&
border-radius: 15
background: url('images/bridge.png') no-repeat 50% 50%;
width: 400
height: 250
z-index: 20;
&div id=&bridge& class=&animated flash&&
&!--只需要在相关的块级标签内添加class；
class=&animated bounceOutLeft&
class=&animated flash&
分析开发的断点：
(1)、国内市场普遍的viewport宽度是320px和360px，像Note2才400px；分辨率，像素这些词语一般是告诉给设计师，我们前端要明白的是viewport；
(2)、字体大小：我相信有部分童鞋会认为浏览器会自适应让你页面的字体随着不同的屏幕大小而自动适应，我告诉你，你错了！
这些字体自适应都是人为设置出来的，我推荐的方案是：
body{font:14px&line-height:20px}//网页整体字体以14px为主。
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)、class类控制分析：
看到上面大概也了解怎么使用@media了吧；
另外，定义类名的第一个重要性就在这里了：因为你要控制一个class类在320px或360px不同的屏幕上有适应屏幕大小的样式结构！
(4)、我们开发时，一般要做到兼容的浏览器普遍是国内的浏览器(苹果的浏览器都是webkit内核)：UC，QQ，360，百度，这些浏览器是国内使用用户量最大的浏览器厂商，虽然不是内核都一样，但是普遍的兼容问题还不是很多，所以我们优先选择兼容的是webkit内核的。
(5)、前端开发性能优化(个人总结建议)：
一、单个文件大小不要超过14KB；插件不要超过25KB。
二、优先选择使用字体图标，非要用上图片的话，就使用CSS&Sprite方法。同时，将整合到一张图片的图标集合和在网站或webapp不常用的图片进行压缩。
三、seo优化问题：我们常写代码时会经常忽略这个标签会带上title,alt等这些可以填上关键词的地方，这个是必须要说明下，不过在手机端的话，这个好像还真用不上吧。
四、CSS，JS以模块化形式来做项目，CSS:我们可以用@import url('form.css')这样的形式来操作，把多个不同的css来分开写，然后逐个引入；问题是：@import是页面先加载完html再加载css，所以这个你得考量，这个文件是在什么情况下才使用好;JavaScript：我们可以使用sea.js或require.js来操作，网上有相关的指导教程，你可以百度或谷歌一下。
五、利用CDN技术，减轻空间资源；对企业来讲，这个风险有点大；因为手机用户的网络差时会出现文件不一定能及时加载等问题。
六、图片多使用PNG8来达到优化效果。
七、少对图片进行硬性设置宽高。
八、减少页面请求：CSS，JS，图片数量的多少会对请求有影响；同时要注意class类组合一般情况下不要超过4个，超过的尽量以取个新的class类名来定义会好点。
九、减少DOM访问次数，加载数量多了就影响访问速度。
十、不要出现404页面，避免重定向。
十一、减少cookies体积，设置合理的过期时间。
十二、缓存ajax，用get方式提交；form以post方式提交。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：53100次
积分：2383
积分：2383
排名：第11328名
原创：192篇
转载：101篇
(1)(6)(1)(15)(9)(17)(107)(31)(60)(5)