css3个人总结.docx

《css3个人总结.docx》由会员分享，可在线阅读，更多相关《css3个人总结.docx（9页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、css3个人总结min-widthmax-width*overflowoverflow-Xoverflow-yscroll滚动条auto*背景*backgruond-imag*background-repeat*background-position*background-color*background-arrachment固定方式scroll背景图滚动fixed背景相对于视口定位*background-clip截取位置*background-orgin定位原点*background-size*定位*position：absoluterelativefixed*left*z-index*bo

2、rder-radius*outline外边框*box-shadowtext-shadow可以设置多组值*渐变图案*liner-gradient*repeating-liner-gradient重复线性渐变*radial-gradient*repeating-radial-gradient*过渡属性transition*转换2d/3dlocal滚动元素背景图滚动*transform*translate()translateX()translateY()translateZ()translate3d()*rotate*scale*skew*transform-origin*perspective*

3、transform-style：preserve-3d*perspective-origin设置观察者的位置*动画animationkeyframescsskeyframesname0%30%100%*animation：名称动画方式时间延迟次数播放方式播放状态播放结束时的状态*infinite无限播放*响应式*mediascreenand（）*自定义栅格化系统*移动端布局*百分比*响应式*rem*弹性盒模型*display：flex*flex-self自己的对齐方式flex-growflex-shirnk*移动端布局使用css3的时候一*浮动属性和定位属性一定不要乱加*浮动多个属性在一行显示

4、*多个元素需要在同一个位置叠加显示的时候*a标签包裹图片定要加-webkit-前缀*a转化为块元素需要设置宽高*img默认边框去掉在ie有蓝色边框*浮动引发的问题HTML5总结HTML5总结前些天看了IT最新动向，发现HTML5发展非常之快，所以这两天花了些时间学了一下，在网上查到的东西一般都很琐碎，我在这里稍微整理一下。起步首先，先了解一下HTML5的发展起步。HTML5是W3C和WHATWG合作的结果。注：W3C指WorldWideWebConsortium，万维网联盟。WHATWG指WebHypertextApplicationTechnologyWorkingGroup。网络超文本应用

5、技术工作组他们对HTML5建立了一些规则：新特性应该基于HTML、CSS、DOM以及JavaScript减少对外部插件的需求（比如Flash）更优秀的错误处理更多取代脚本的标记HTML5应该独立于设备开发进程应该对公众透明HTML5中一些有趣的新特性：用于绘画的canvas元素用于媒介回放的video和audio元素对本地离线存储的更好的支持新的特殊内容元素，比如article、footer、header、nav、section新的表单控件，比如：calendar、date、time、email、url、search最新版本的Safari、Chrome（谷歌浏览器）、Firefox以及Oper

6、a支持某些HTML5特性，IE9将支持某些特性。Web视频现如今，大多数的视频都是插件（比如Flash）来显示的，但是并非所有的浏览器都拥有同样的插件。HTML5规定了一种通过video元素来包含视频的标准方法（不需要插件的哦！强大吧）！当前，video元素支持三种视频格式：Ogg、MPEG4、WebM在HTML5中显示视频，您所需的只是这样写：您的浏览器不支持该功能！与之间插入的内容是供不支持video元素的浏览器显示的。video元素允许多个source元素。source元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：您的浏览器不支持该功能！标签的属性Web音频和视频一样，大多

7、数音频都需要插件（比如Flash）才能播放，HTML5规定了一种通过audio元素来包含音频的标准方法。Audio元素能够播放声音文件或者音频流。Audio元素支持三种音频格式：OggVorbis、MP3、Wav使用方法和video标签的方法一摸一样，超像的！标签的属性Canvas（在网页上绘制图形）（在网页上绘制图形）HTML5的canvas元素使用Javascript在网页上绘制图形。画布是一个矩形区域，您可以控制其每一像素Canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。向HTML5中添加canvas元素，方法如下：另外需要声明的是canvas元素本身没有绘图能力，所有的

8、绘制工作必须在JavaScript内部完成。现在绘制一个红色的矩形红色的矩形，如下：红色的矩形varc=document.getElementById(myCanvas);varcxt=c.getContext(2d);cxt.fillStyle=#FF0000;cxt.fillRect(0,0,150,75);现在对这段代码进行解析：JavaScript使用id寻找canvas元素varc=document.getElementById(myCanvas);然后，创建context对象varcxt=c.getContext(2d);getContext(2d)对象是内建的HTML5对象，拥有

9、多种绘制路径、矩形、圆形、字符以及添加图像的方法。下面的两行代码绘制一个红色的矩形：cxt.fillStyle=#FF0000;cxt.fillRect(0,0,150,75);fillStyle方法将其染成红色，fillRect方法规定了形状、位置和尺寸。想看更多例子，请上W3School的HTML5课程！在客户端存储数据HTML5的这个功能是让我感到最不可思议的，HTML5提供了两种在客户端存储数据的新方法localStorage-没有时间限制的数据存储sessionStorage-针对一个session的数据存储之前，这些存储工作都是由cookie完成的，现在cookie看来要换人了，c

10、ookie不适合存储大量的数据，因为它们由每个对服务器的请求来传递，这使得cookie的速度慢而且效率低。在H5中数据不是由每个服务器请求传递的，而是只有在请求时使用数据，他使在不影响网站性能的情况下，存储大量数据成为可能。对于不同的网站，数据存储在不同的区域，而且一个网站只能访问其自身的数据。H5使用JavaScript存储和访问数据。发现了没，H5的很多功能都需要利用JS来实现，呵呵，看来还是离不了Java现在，首先介绍第一种存储方式，localStoragelocalStorage方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。创建和访问localStoragelo

11、calStorage.lastname=Smith;document.write(localStorage.lastname);这样就OK了，是不是很简单哈！第二个，sessionStoragesessionStorage方法针对一个session进行数据存储。当用户关闭浏览器窗口后，数据会被删除。创建和访问sessionStorage的方法和localStorage的差不多一样，只是名称不一样，效果不一样而已。sessionStorage.lastname=Smith;document.write(sessionStorage.lastname);HTML5新的Input类型H5拥有多个新的

12、表单输入类型，这些新特性提供了更好的输入控制和验证。现在介绍的输入类型有以下几种：emailurlnumberrangeDatepickers(date,month,week,time,datetime,datetime-local)searchcolor看张截图EmailEmail类型用于应该包含email地址的输入域，在提交表单时，会自动验证email域的值。E-mail:是不是很简单，就跟HTML的普通标签是一样的。URLUrl的用法好Email的一样，用于包含Url地址的输入域，在提交表单时，会自动验证url域的值。Numbernumber类型用于应该包含数值的输入域。您还能够设定对所

13、接受的数字的限定：Points:这个应该不用解释了吧Number的属性如下Rangerange类型用于应该包含一定范围内数字值的输入域。range类型显示为滑动条。您还能够设定对所接受的数字的限定：Range的属性和number的是一样的，相互借鉴以下就OK了DatePickers（数据检出器）（数据检出器）HTML5拥有多个可供选取日期和时间的新输入类型：date-选取日、月、年month-选取月、年week-选取周和年time-选取时间（小时和分钟）datetime-选取时间、日、月、年（UTC时间）datetime-local-选取时间、日、月、年（本地时间）下面的例子允许您从日历中选取

14、一个日期：Date:MyGod！我现在才发现文笔不好的时候，文字显得是那么的苍白，我实在是描绘不出H5的效果，实在是太炫了，还是亲自试一下就知道了，在这里我表示很无力searchsearch类型用于搜索域，比如站点搜索或Google搜索。search域显示为常规的文本域。HTML5新的表单元素HTML5拥有若干涉及表单的元素和属性。datalistkeygenoutputdatalist元素datalist元素规定输入域的选项列表。列表是通过datalist内的option元素创建的。如需把datalist绑定到输入域，请用输入域的list属性引用datalist的id：Webpage:其最终

15、效果就像是百度中的搜索下拉框一样，想象以下。keygen元素keygen元素的作用是提供一种验证用户的可靠方法。keygen元素是密钥对生成器（key-pairgenerator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（privatekey）存储于客户端，公钥（publickey）则被发送到服务器。公钥可用于之后验证用户的客户端证书（clientcertificate）。目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。Username:Encryption:以上关于keygen的用法我是全盘复制，因为我看不懂他是什么意思，想着可能也不会用了。output元

16、素output元素用于不同类型的输出，比如计算或脚本输出：其效果就像是动态计算器，你直接输入数字，结果立马就会发生变化，神吧还有一些H5的新的表单属性，实在是太多了，我写不下去了，呵呵，等用到的时候，再搜，我觉得这是一个不错的学习方法，可以加深印象。前端工程师下面，就具体从这个项目中学习的东西进行一次总结。首先，这次项目的开发环境是基于,引入了npm包管理工具来对各种js插件进行管理。这种方式避免了以前引入js插件时分别到各自的官网网站去下载，用了npm后只需要在终端进行全局安装或者局部安装，后续只需要在js文件中require就能进行调用。这种统一管理的方式不仅使开发变的更加简单，减少了很多

17、无谓的操作，也分离了一些开发人员不需要关注的关注点。其次，项目引用了gulp+webpack，基于构建工具的开发更接近现代web开发，一套流程走下来，自动打包，自动对html，css,js，图片文件进行压缩，合并和版本号管理以及对文件的改动进行自动监控。这样不仅仅是方便了开发人员，更重要的是极大地提升了客户端页面性能。在不同的交互方式上绑定不同的事件用以来响应用户的行为，具体体现在个体的组件数据变化不会影响到页面上其他组件，这样就做到了页面性能的提升和用户体验的双赢。另外，在页面布局和html，css实现页面的时候，如何能够绘制出更规范，更有结构化的页面也是一个考验。从前期的id,class命

18、名不规范，html结构混乱到现在一点点的提升，终于也领会到了前端开发的细致活。这次的前后端分离和后端开发人员进行了接口联调。不得不承认前期花费了很多时间在沟通上面。基于QQ工具的一问一答低效率的沟通和问题表述不清都会花费时间和打断工作中的思维，使人不能专注很长一段时间。另外,接口文档编写不规范，格式不美观等都是不能忽视的问题。当然，这些沟通技巧和提升效率的工具需要花费时间去慢慢的提升，包括我,包括团队里面所有的人员，只有这样，每个开发人员才能专心有效率的进行项目开发。新的一年开始了，希望自己能够保持良好的学习态度和状态继续迎接新的挑战。尤其感谢同事和领导的厚爱，才能让自己不断成长，不断进步。在

19、此，祝愿公司所有开发人员快乐生活，生活快乐。二、前端工程师年末总结今天是20xx年的第4天，长沙多数公司上班了。跟夏总偶尔聊了项目及文字沟通的事儿，忽然想起，自己也应该写写年末总结了。先列大纲：1、操作了几个真正有协作、有成就感的项目。2、认识了几个能坦诚交流的新朋友。3、在前端技术上，基本放弃了AS3编程，坚持HTML+CSS3+JQUERY的方向，把前几年的积累做进了真实的项目，产生了收益。XX-XX年，上房房地产系列的项目，带来前端编程技术方向的磨练。4、在手机微场景的技术追寻过程中，感悟一个新产品品类的学习过程。5、互联网健身联盟，篮球队的兄弟们让我懂得协作与沟通，人脉进一步拓展。七月

20、份的“有心思”电商项目，周总的执行力给我印象很深。他只用了几天时间，找到我-劝说我加入项目-邀请王老师加入-打预付款给我们-准备机票-全组人到达大理-开工。整个过程就象他的性格一样透明、爽朗。有心思项目较严谨，有全套的项目文档、原型设计-这也是当初打动我的原因。项目各阶段总能看到牛人的平面、影视宣传作品，老板们在项目投入上很是舍得。人员方面，大家也紧密配合，任劳任怨，有压力但是无戾气-这让我见识到一个电商项目的真实推进。很惭愧，周总高估了我在设计上的实力，我没有能帮到项目组，只是在bootstrap等前端开发层面，做了一些小小的工作。与“有心思”项目组一起在大理度过愉快一个月。早起跑步、洗完澡

21、开始工作、比较健康的小食堂餐饮，没有太多生活琐事的打扰。空气好，心情也好。还认识了新来、小胖、刘先生、小术、中亮、俊哥这些新生代的开发年轻人，在项目完成后，大家也成了好朋友，经常交流。小胖是一个前后端均通的小牛人，之后参加了我介绍的诸多健身活动。他也给我介绍了另外的资源。从他身上，我体会到了乐观和进取。大理之行跟王老师较多交流。每天早上，我6点出门跑步，回来洗完澡，老王就起来跑步了，虽然有点晚，但是略胜于其它根本不起床的人。有一天，他早起了，我又跟着他跑了5公里，那是我生平第一个10公里.我们可能是同类人，有普通的生活，有幸福的家庭，有弱弱的艺术和事业追求，意气相投。八月，一个机缘认识了夏总-

22、他给我的运动生活带来了转变-把我带进了互联网健身联盟篮球队。夏总又给我介绍了云咖啡项目。年底，他的“芒果游”项目碰到了小小难题，我们终于有了携手的机会。他是一个勇敢和坦白的人，我很少看到一个带头人，在不太熟的朋友面前，直陈己失-相信他的努力必有回报。健身联盟篮球队的经历，虽然跟工作并没有太多关系，但是其中得失，有益身心。这个组织，至少给我增加了二十个密切互动的圈内人脉，还有更多时有关注的外围人群。组队比赛的过程，也更新了我自己一些陈旧的观念，与年轻人更能相处相容。特别感谢老丁、明祥的付出，其它同队兄弟不一一罗列，新的一年，有新的配合、合作的机会。我从XX年开始，在上房科技的房地产系列网站，担任

23、一段时间的前端制作。写了不少奇奇怪怪的模块，并且居然都搞成了，并上线运行了。这系列项目，推动我的前端技术，真正从学习到应用。谢谢、刘焱、小肖、张威、黄杉、国栋等各位兄弟。上房是真正做事情的节奏，永远向前破冰而行。看过“华中心”项目那一列出来近200条的修改清单，以后还有什么小修小改不能承受？九月份的时候，司马丢给我一个手机微场景滑动模板的演示，问我能不能做，什么价位。从此开始，就不断有人问起这个东西的制作。当然现在我们知道了，这就是一个的主框架+一些时间线动画。可是当时，想做出这样一个东西，还是太急促了。有几天时间，我边分析边陷入两难，是购买，还是破解，还是自行开发？各方面得到的信息都不太对称

24、。接着几个月，象恋爱一样，追寻这个框架的进展，技术思路渐渐清楚：1、先是有朋友的公司可以提供收费的简单框架，一千多。2、有大牛团队可以提供定制。4、广电的小黄拿他的新作给我炫耀，这才看到了完全没混淆的版本，果然就是swiper。接下来几天，他又给了我更多的信息，带声音的版本，带3Dflow的版本。5、我自己写了一个测试，至此，这个技术完全掌握。虽然一分钱没赚到，但感觉很开心，如同炸完珍珠港的那个返航-总有一天搞定你。对技术的追求体验，大体如是。还有一个能力也得到了提升，那就是，接单的判断能力。不再象早两年，什么单都想接，花了不少的时间在一些不相干的事情上。现在，很明确，询单电话过来，不出5句话，基本就能判断，这是不是我的菜，有没有档期，如果做不了，要转给哪个朋友。非我特长，就不拖泥带水。移动互联网来势汹汹，用了十年的老知识，已经明显不够用了，前端已经变成最热门的开发点。新的一年，我的小工作室诚意滔滔，为所有需要我们的客户提供服务。我儿已经五岁，月前，教他背的那首诗，多年之后，仍会在他心中响起：百川到东海，何时复西归，少壮不努力，老大徒伤悲。