web前端每月工作总结.docx

《web前端每月工作总结.docx》由会员分享，可在线阅读，更多相关《web前端每月工作总结.docx（29页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、web前端每月工作总结篇一：web前端学习总结（精华版）Web总结一.名词解释1 .横切在固定页面的宽度（按栅格化进行）并且对高度没有限制的容器称 为一个标准横切2 .留白两个容器或碎片之间的上、下、左、右的空白距离3 .继承元素可以从其父级元素中获得一些可为自己使用的属性或值。4 .图片定位把图片元素放置到一个静态的、相对的、肯定的、或固定的位置中，利用CSS中对图片进行遮罩属性，多用于页面中的修饰图5 .底图页面中在标签中使用的背景图6 .齐底（图）线用于区分横切或碎片结束的线或图7 .页面结构页面的基础框架，由横切、布局元素组成8 .焦点区（图）最易留意的区域10 .特别状况下要求表现和

2、内容分别，代码中不要涉及任何表现的元素,例如：style font等；11 .双标记签都要有开头和结束标签，单标记标签的后面肯定要 加“/，例如：br/等，并且有正确的层次；12 .其它特别符号：1)()2)()八.命名空间8.1 外挂样式名称全局：public.css全局样式为全站公用，为页面样式基础，页面中必需包含。结构：layout.css页面结构类型简单，并且公用类型较多时使用。多用在首页级页 面和产品类页面中。私有：style.css独立页面所使用的样式文件，页面中必需包含。模块 module.css产品类页面应用，将可复用类模块进行剥离后，可与其它样式协 作使用。默认 defaul

3、t.css文章 article.css图片 photo.css下载 soft.css主题 themes.css实现换肤功能时应用。补丁 mend.css基于以上样式进行的私有化修补。8.2 常用名称(1)页面结构容器:container页头：header内容：content/container/content(A)页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围掌握整体布局宽度：wrapper篇二：Web前端基础总结l.Js的基本类型：Undefined:只有一个值undefined,它是变量未被赋值时的值，在 JS中全局对象有一个undefine

4、d属性表示undefined,事实上undefined 并非JavaScript的关键字,可以给全局的undefined属性赋值来转变它 的值。Null:只有一个值null,但是JavaScript为它供应了一个关键字 null来表示这个唯一的值。Null类型的语义是“一个空的对象引用。Number:NaN 是其一个特别的属性值，typeof NaN number);String:其正式解释是一个16位无符号整数类型的序列，它实际上 用来表示以UTF-16编码的文本信息。Boolean:有两种取值true和 fa Ise o 0、NaN、空字符串、null undefined转化为false,

5、其余的全 部为true。Object:最为简单的类型就是Object,它是一系列属性的无序集合, Function是实现了私有属性call的Object, JavaScript的宿主也可以 供应一些特殊的对象。typeof*3,344+/zObject关于null和undefined： null是关键字;undefined不是关键字， undefined是Global对象的一个属性。运算时null与undefined都可以被类型转换为false,但不等值于 false：document.writeln(!nullz !undefined); / true,truedocument.writel

6、n(null=false); / falsedocument.writeln(undefined=false); / falsedocument.writeln(undefined=null); / truenull instanceof Object /falsetypeof null/Object2JS的类型转换手动的转换有：Number(x);Boolean(x);String(x);以及 parselntparseFloattoStringalueOf 等等。自动的转换：假如+操作符的一个操作数是字符串，则会将另一 个操作数转换为字符串，一元操作符*、-将操作数转换为数字， 一元操作符

7、“！ 将操作数转换为布尔值并取反。/hello,+5/hello5,hello+null / hellonulKS*525十ello，*5NaNX+等价于 String(x)+X或者X-0等价于Number(X)!X等价于 Boolean(X)3 .margin 属性四个参数：上右下左三个参数：上、左右、下两个参数：上下、左右一个参数：四周4 .关于float问题，浮动元素后跟非浮动元素的状况。后边非浮动 元素若为行内元素且由于定位产生重叠时，行内元素边框、背景和内 容都在该浮动元素”之上显示，若为块级元素且由于定位产生重叠时, 该块级元素边框和背景在该浮动元素之下显示，只有内容在浮动元 素之

8、上显示。【有示例】。Clear属性规定元素的哪一侧不允许其他浮动元素。clear属性定 义了元素的哪边上不允许消失浮动元素。在CSS1和CSS2中，这是通过自动为清除元素（即设置了 clear属 性的元素）增加上外边距实现的。在CSS2.1中，会在元素上外边距之上 增加清除空间，而外边距本身并不转变。不论哪一种转变，最终结果 都一样，假如声明为左边或右边清除，会使元素的上外边框边界刚好 在该边上浮动元素的下外边距边界之下。5 .肯定定位、相对定位与浮动定位肯定定位：absolute生成肯定定位的元素，相对于static定位以 外的第一个父元素进行定位。设置为肯定定位的元素框从文档流完全 删除，

9、并相对于其包含块定位，包含块可能是文档中的另一个元素或 者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就似 乎该元素原来不存在一样。元素定位后生成一个块级框，而不论原来 它在正常流中生成何种类型的框。相对定位：relative生成相对定位的元素，相对于其正常位置进行 定位。设置为相对定位的元素框会偏移某个距离。元素仍旧保持其未 定位前的外形，它原本所占的空间仍保留。浮动定位：浮动的框可以向左或向右移动，直到它的外边缘遇到 包含框或另一个浮动框的边框为止。由于浮动框不在文档的一般流中, 所以文档的一般流中的块框表现得就像浮动框不存在一样。示例代码就是最外层的div是relative,里

10、面的就是absolute。6 .关于DOM元素利用DOM, JS可以相对简洁地查找、访问和操纵HTML元素，从 而动态地转变HTML页面的内容和外观。节点常用的属性有 parentNode, childNodes, firstChild, lastchild,previousSibling, nextSiblingo7 .关于函数定义挨次：函数的定义与其他的语句的定义不再同一个时间轴上 面，计算机在开头执行语句之前，会先查找全部的function的定义, 然后保存。所以在函数后面定义的调用语句可以调用到定义在前面的 函数。局部变量与全局变量：局部变量只适合于函数的参数和函数内部 已var关键字

11、定义的变量。假如没有定义同名的局部变量，函数内部 则可能访问全局变量。闭包：首先要知道在js中，函数在一旦定义的时候就会产生自己 的一个作用域，而此后这个函数的执行也是要依靠于这个作用域的。 闭包的最常用的编程模式就是在一个函数中嵌套另一个函数，然后将 这个嵌套的函数作为返回值返回，当然外部函数中的局部变量也就存 在于这个返回函数的作用域中的，这样就起到了对局部变量的一个访 问掌握。但是缺点在于增大了内存的开支。而且其所派生的子类将不 能访问其私有属性，破坏了继承性。因此还是需要三思而行。闭包 可以用在很多地方。它的最大用处有两个，一个是前面提到的爱护函 数内部的变量，另一个就是让在内存中维持

12、变量。我写的闭包主要用于实现一些插件，由于有一些变量需要避开被 全局变量污染。可选参数：JS不会限制传入函数的参数数目。假如传入的参数过 多，多余的参数会被忽视掉。假如过少，缺失的参数会默认为 undefinedoapply和call的区分：相同点:两个方法产生的作用是完全一样的。不同点：方法传递的参数不同，apply(obj,argl,arg2.) call(obj,argl,arg2)原型：全部对象都有一个原型，对象可以共享其原型的属性，但 是这种共享是单向的，即原型的属性影响对象，转变对象确不会影响 到原型。原型污染：使用for/in遍历对象的时候，会同时得到原来的 属性和原型的属性，可

13、以使用HasOwnPorperty方法来推断。匿名函数：一般用来写已加载就需马上执行的函数。同时为了避 开受全局变量的影响，在一个不是很熟识的页面增加Javascript时特 别有效。8 .Div和Span有何区分?答：两者最明显的区分在于DIV是块元素，而SPAN是行内元素(也 译作内嵌元素)。所谓块元素，是以另起一行开头渲染的元素，行内 元素则不需另起一行，当然这一点也可以通过设置display (block,inlinejnline-block)来转 变。9 . CSS+DIV开发Web页面的优势有哪些?答:1）2）3） CSS+DIV,这个网页设计模式中，DIV担当了网页的内容，CSS

14、 担当了网页的样式。这样就使网页的内容和样式的分别开来。有利于 页面的维护升级。有助于提高搜寻引擎亲和力（快速找到需要的数 据，而不是像在TABLE中一层层的查找）有助于页面的重构（换皮肤 如blog,直接套用另外一套样式就可以实现，而不用改动网页脚本。）4） .setinterval 与 setTimeout 的区分？ 答：setTimeout 方法是定时 程序，也就是在什么时间以后干什么。干完了就拉倒。setinterval 方法则是表示间隔肯定时间反复执行某操作。11） Ajax 及其优缺点： 答：Asynchronous JavaScript and XMLn （异 步JavaScri

15、pt和XML）O在扫瞄器中使用js进行服务器的恳求与响应, 使得可以在不更新整个页面的前提下维护数据。其名字中的xml并非 指只支持xml这一种文本格式，xml只是一个选择而已，其他还可以 是表单与json。这样做只是xml流行时的遗迹。优点：使用Ajax的最大优点就是可以实现页面的局部刷新，提高 用户体验质量。其他优点有使用异步方式与服务器通信，不需要打断 用户的操作，具有更加快速的响应力量。3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端 闲置的力量来处理，减轻服务器和带宽的负担，节省空间和宽带租用 成本。并且减轻服务器的负担，ajax的原则是按需取数据，可以最 大程度的削减冗余

16、恳求，和响应对服务器造成的负担。4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程 序。缺点：L干掉了 back按钮。由于在未刷新页面的时候是无法使用 back按钮的。2 .平安问题，将一些数据、规律暴露在了前台。3 .对搜寻引擎的支持较弱。4 .违反了 Uri资源定位的初衷。12.Prototype属性的相关留意问题13.call与apply的使用常用于实现继承。Call与apply的作用相同，只是参数的形式不一样而已。如 f u nc. ca 11 (f u ncl, va r 1, va r2, va r3)对应的 apply 写法为： func.apply(funcl,varl

17、,var2,var3)Call的使用Apply的使用14.JS中大事绑定，什么时候有前缀。n,什么时候没有？兼容性问 题。答：下图显示了采纳三种方式注册的大事。兼容性问题可见：留意这两句写法：篇三：WEB前端开发阅历总结ASP.NET前端开发阅历总结通过此次大作业的设计到完成，我负责的是web前端的开发，经过此次作业和结合W3C上的自学，我慢慢有了一些对前端开发的小 小阅历（仅为个人看法）。WEB标准是什么？说是WEB标准，不过我这里主要是对HTML5和CSS3.0的一些阅 历总结。由于WEB含盖的内容实在是太多了，WEB标准是一系列 标准的总称，包括 HTML5.0、HTML4.0、XHTM

18、L1.1、CSS3.0、CSS2.1、 XML1.0、RSS2.0、ECMAScriptl.l DOM1.0 等等。所以这里要跟大家 指出来一下，WEB标准不是我们所说的DIV+CSS。刚刚上面提到了一一DIV+CSS,这里要说明下，这样说其实是不正 确的。DIV+CSS精确 的说法（个人的理解）应当是：采纳W3C 推举的WEB标准中的HTML5结合CSS3.0样式表制作页面的方法,DIV 应当指的是HTML标签，而CSS显示是指的CSS样式表了。采纳WEB标准开发的好处那么W3C为什么会推举这样的页面制作方法呢？下面我们就简 洁的看看采纳WEB标准开发（个人理解的）相对以前TABLE布局的

19、优势有哪些？1、节省运营成本看看我们的WEB标准制作方法是如何做到的？采纳WEB标准制作，我们可以做到表现很形式的分别，我们用 XHTML来表现（数据），用CSS来掌握（页面元素呈现的）形式。写 的好的页面，XHTML代码中基本上都是用户要看的数据，还其他修饰 性的东西，全部由我们的CSS来掌握。这样一来我们的（XHTML）页9 .导航在页面中具有导向性的链接集合10 .头图页面主题图片11 .间距碎片或文字间的距离12 .行高文字段落中行与行之间的距离13 .首行缩进文字段落首行缩进14 .浮动使被定义的区域脱离正常的页面文档流15 .碎片由文字、图片组合成的内容区域16 .通栏广告与页面内

20、容区同宽的广告区域17 .功能按钮具有交互属性的按钮18 .私有样式当前页面独立使用的样式，不具备公用性19 .水平（垂直）居中在页面中的某个元素处于父级的上下或左右的相同距离 面的体积就大大减小了，这样你在带宽上的费用就会大家降低了，这 个怎么降低的，你可以想象一下，YAHOO的首页小IK, 100W个人一 起访问，那么带宽节省了多少？而且可以更充分的利用带宽。而我们的CSS掌握了，全部的页面元素的样式，现在想改网站的 整体风格，你只需要花几分钟修改一下一个CSS文件，就可以轻松搞 定了。维护的成本也下来了，省了不少钱了吧？还有，你开这个页面 的速度会快许多啊，一个让你等半分钟的页面，除非里

21、面的信息对你 很有用，不然我们大家基本都没有太多的时间去用来等待的。2、对用户友好更友好，且有机会获得更多的用户现在来说说用户友好。首先我想把我们的用户来分下类。第一类：一般用户（每个访问我们网站的人）；其次类：搜寻引擎；采纳WEB标准开发的页面，结构清楚，页面体积小，扫瞄器兼容 性好。一般用户访问的时候，页面打开速度快，而且不管用户使用那 种扫瞄器，都能够正常访问（显示）页面，且页面的结构清楚，要找 的数据可以很便利的扫瞄到。而对搜寻引擎来说，一个好的采纳WEB标准开发的页面，都是做 过SEO优化的，它访问起来很友好，很简单理解你的页面中哪里是标 题（H1H6标签），哪里是段落（p标签），哪

22、里是段落里要强调的内 容（strong标签）等，它可以很简单的分析出来。而一个SEO好的 站点，大家都知道，被搜寻引擎收录的机会更多，这个也意味着您的 网站会被更多的一般用户访问到，给你的站点带来更多的用户。一个能帮我们省下大笔费用，提高工作效率。同时又能够提高页 面扫瞄速度，对用户友好，甚至能够不花钱宣扬，就能给你带来更多 用户的技术。你说你会不会去使用它？这个也正式我们的W3C推举使用WEB标准开放网站的缘由啊。而 这个技术也得到了我们广阔用户的认可，所以现在需要学习WEB标 准啊。合理的布局前面我提到了一些学问点一一结构清楚、SEO优化、页面体积小、 HTML代码中基本上都是用户要看的数

23、据。这些东西，都是我做了合 理布局的结果。而且我个人觉得，我们采纳WEB标准制作的一切都 是从这个学问点开头的，所以我这里就先来说这个话题。或许有人会问，怎样的一个页面，才算是合理的布局的呢？这个 问题问题问得好，也是我们大家刚开头学用WEB标准的问得最多的 问题之一，我也曾常常被这个问题所困扰，这里就说说我对合理布局 的一些理解。在开头讲合理布局的页面要达到的要素前，我们还是用个实例来 讲解会更直观些。先来看看这个图片：不错，这个是一个文章具体页，没有左右两栏布局，不过这里我 重点要讲的是合理的布局。这是此次试验中customer （前端的一项）部分的完整代码：% PageLanguage二

24、C#AutoEventWireup=truelnherits=Customer % % Register Src=Controllers/Bottom.ascxTagName=Bottom TagPrefix=uc4 % % Register Src=Controllers/Top.ascxTagName=Top TagPrefix=ucl % Register Src=Controllers/Left.ascx TagName=Left TagPrefix=uc2 % htmlheadtitle%=Titlep %/titlemeta http-equiv=Content-Type cont

25、ent=text/html; charset=gb2312 /meta content=%= Descriptionp% name=description/meta content=%=Keywordsp % name=keywords /link href = Images/css.css rel=stylesheet type=text/css /headbody style=text-align: centerform id=forml runat=servertable border=0 align=center cellpadding=O cellspacing=O style=wi

26、dth: 778pxtrtd style=width: lOOpxucl:Top ID=Topl runat=server /td/tr/tabletable border=0 align=center cellpadding=O cellspacing=O style=width:778px; background-color: #ffffff;trtd style=height: 395pxtable border=0 cellpadding=O cellspacing=O style=width: 778pxtrtd width=183 align=left valign=toptabl

27、e width=183 border=0 cellspacing=O cellpadding=Otrtddiv align=leftuc2:Left ID=Leftl runat=server /div/td/tr/table/tdtd width=595 valign=topdiv align=centertable width=100% border=0 cellspacing=O cellpadding=Otrtdnbsp;/td/tr/tabletable width=100% border=0 cellspacing=O cellpadding=Otrtdimg src=lmages

28、/a4.jpg height=37/td/tr/tabletable width=100% border=0 cellspacing=O cellpadding=Otrtd style=height: 12pxnbsp;asp:DataGrid ID=NewGrid runat=serverAllowPaging=True AutoGenerateColumns=FalseBorderWidth=Opx CellPadding=O GridLines=None Height=lpxOnPagelndexChanged=DataGridl_PagePagerStyle-HorizontalAli

29、gn=Right PageSize=4 ShowHeader=FalseWidth=237pxColumnsasp:TemplateColumnItemTemplatetable border=0 cellpadding=O cellspacing=10 width=560 trtd style=height: 24px width=20div align=centerimg height=13 src=lmages/35.jpg width=ll/div/tdtd class=textO3 style=height: 24px width=403ahref=Customer_More.asp

30、x?ID=%#DataBinder.Eval(Container.Dataltem,id )%#DataBinder.Eval(Container.Dataltem,title)%/a/tdtd class=textO3 style=height: 24px width=77%#DataBinder.Eval(Container. Data Item,pub_date, 0:d)%/td/tr/table/ItemTemplateHeaderStyle Width=12px /asp:TemplateColumn/ColumnsPagerStyle HorizontalAlign=Right

31、NextPageText= 下 一 页PrevPageText=上一页 /asp:DataGrid/td/tr/table/div/td/tr/table/td/trtrtd style=width: lOOpxuc4:Bottom ID=Bottoml runat=server /td/tr/table/form/body/html看出来什么没有？（代码是许多）可能大家已经发觉，整个页面 里基本上都是用户要看的数据，其中只包含了很少（必要）的布局 （XHTML）标签（请允许我这么说）。整个页面基本都是由最基础的 hlh6 p、ul、ol、li、form div 标签来实现的。说到这里就要讲到

32、我在前面提到的“结构清楚、SEO优化、页面体 积小、XHTML代码中基本上都是用户要看的数据，看看我的这个例 子做到了没有？结构清楚-也就是我们常说的，HTML标签要结构化。什么叫结构化？由于个人认为这个学问点是非常重要的，我采纳WEB标准的方法 制作页面的优势就体现在页面结构清楚。我以前用table布局的时候, 我的表现（数据）和形式（布局样式）是混在一起的，有许多冗余的 数据混杂在一起，而我上面给大家展现的代码，很明显，结构非常清 楚。hlh6-假如你要显示的数据是作为标题显示的时候，就用这些标 签，由于这个标签的意思就是说，这个是一个标题，不仅我们的用户 很简单理解h-head的英文字母

33、缩写，我们的另外一个用户搜寻引擎 也可以很简单理解它。呵呵，看到了吧，一个充分结构化的页面，对用户是非常友好的。p-Paragraph （段落）ul-unorglized list（无序的列表）ol-orglized list（有序的列表）li-list item（列表项）form一表单div-division（区域）我写成这样就便于理解了，原来HTML标签是有着自己的意义的 （至于其他的标签的语意义，大家可以自己到W3C看看它的解释， 也可以查看语义化你的HTML标签和属性），所以我们讲要语意化的 意思，就是用合理的标签来显示数据，比如前面提到的，是标题，就 应当用hlh6标签，假如是一个段

34、落的介绍文字，那么就应当使用p 标签，假如是显示的一个没有挨次的列表，就应当用ul标签，如此所以看这个例子里h2标签导航实例详解/h2这么写就是很合理的，h2标签就说明这里是个标题。而这么写: 复制内容到剪贴板代码：.titlefont-size:18px; )div class=titlestrong 标签导航实例详解/strong/div虽然用了 strong来强调说明这部分文字，但是还是没有h2标签 来的直接明白。还有这么写div class=ariticle-titleh2Ajax 标签导航实例详解/h2/div我并不喜爱写成这样，可以不用嵌套层的地方，我们尽量不要去 过多的嵌套层，削

35、减嵌套会让扫瞄器解析起来会更简单，速度更快。所我们使用WEB标准开发页面，肯定不是单纯的把以前的table 换成DIV就OK 了。而采纳标准制作页面，也不意味着我们就不使用 tableo只要把握我刚才说的原则，使用合理的标签显示相应特征的数 据。其实我的table标签是一个很好的用来显示二维数据的标签，而 table标签也的确是设计出来用来显示数据的，而不是用来布局的， 只是许多人都会用table标签来布局了 o。20.标准头（尾）定义相同的页面头或尾元素集合二.文本格式化1 .段落：P2 .斜体:address （联系信息）em （强调）i （突出不同）cite （引 用）dfn （首次定义

36、术语）3 .粗体：strong （重要）b （提示）4 .图片块:figure5 .引述文段，段落缩进：blockquote6 .背景颜色：mark7 .虚线下划线：abbr8 .上标下标：sub/sup9 .下划线：ins10 .删除线：del （标记已删除内容）s （标记不精确 内容）11 .等宽字体：code12 .预格式化:pre13 .字号减小，表解释:small14 .时间：time15 .换行：br16 . html5 定义区块：header nav article section aside footer div span三.表单表格1.1.formmethod=postact

37、ion=show.phpenctype=multipart/form-data./form2 .表单元素的组织:fieldset./fieldsetfieldset./fieldset3 .仓ll建各种框:input type=text id=name name=name class=zky required=required placeholder= 请 输 入 value=http:/ autofocus=autofocus size=12 maxlength=20 pattern二 /注：textpassword/url/tel/emailId:为了让对应的标签识别，添加CSSName：

38、为了让服务器和脚本识别，通常与id设为一样Size：文本框大小Maxlength：能输入的最大字符数Pattern：正则表达式4 .添加标签：label for=idname?/label5 .单侈）选按钮：input tupe=radio/checkbox id=aaa name=zky value=beijing /label for=aaa 北京/labelinput tupe=radio/checkbox id=bbb name=zky value=shanghai /label for=bbb 上海/label注：id各自唯一，name必需相同。checked：默认选择6 .下拉框：

39、select id=zky name=zky size=12 multiple=multipleoption value=beijing 1 匕京/optionoption value=shanghai 上海/optionoption value=chengdu 成都/option/select注：size:选择框的高度multiple：允很多选selected：默认选择用 optgroup label;东北?/label对选择框进行分组7 . 上传文件：input type=file id=zky name=zky size=5 /注：size：输入路径和文件名的字段的宽度8 .禁用表单元素

40、：input ? disabled9 .创建提交按钮：input type二submit value二点此提交/创建带图像的提交按钮：button type=imageimg src=l.jpg点击这里/button 创建图像按钮：input type=image alt=提交 src=l.jpg/Submitreset 重置10 . 文本区域：textarea name=zky maxlength=30 rows=5 cols=5 请 在此输入字符/textarea11 .表格：tablecaption/captiontheadtrth scope=rowgroup./thth scope=

41、col./th/tr/theadtbodytrth scope=row./thtd rowspan=3./tdtd./td/tr/tbody/table四.文本格式化1 . font：（斜体粗体小型大写字母）字体大小（必有）行距字体 集（必有）；2 .文本背景： background： #foc url （l.jpg） repeat-x scroll 0 0； 3 .字间距：word-spacing:12px;4 .字偶距：letter-spacing:12px;5 .缩进增加：text-indent:12px;6 .小型大写字母：font-variant:small-caps;7 .文本对齐

42、：text-align:left；适用于 block, inline-block8 .单词大小写:text-transform:capitalize（单词首字母大 写uppercase（大写lowercase（小写）9 .文本上的线：text-decoraion:underline/overline/line-through;11 .空格：white-space:pre（显示全部空格回车）/nowrap （非断行空 格）;12 . h316px; h512px; verdana,Geneva,sans-serif;13 .列表属性：lilist-style:url(l.jpg) inside

43、square;五.CSS布局1 . width： 不包括 padding, border, margin； max-width 设置夕卜围 限制；2 .浮动：float:left;清除浮动:clear:both;3 .设置边框：border:dotted 4px red;(dotted 点状、dashed 虚线、 solid实线)4 .使元素对齐：vertical-align:baseline/middle/text-bottom.5 .显示：display:black/inline/inline-block;6 .显示：visibility:visible/hiddle;7 .相对定位：po

44、sition:relative; top:5px;相对于该元素的原始位 置8 .肯定定位：position:absolute; top:5px;相对于 body 或离他最 近定位的祖先元素9 .三维位置：z-index:50;越大的在最上面10 .厂商前缀：-webkit-(safari) -moz-(firefox) -ms-(IE) -o-(opera)11 .创建圆角：-moz-border-radius-topleft:50px;-webkit-border-top-left-radius:50px;border-top-left-radius:50px;(左上角,角的半径是 50px

45、)border-radius:50px;(全部角简写)12 .创建椭圆角：? ? border-radius:40px/20px; （x 半径/y 半径）13 .创建圆形：? ? border-radius:50px; 50px为元素半径大小14 .文本加阴影：text-shadow: 2px 5Px 5px #999; x/y/模糊半径15 .元素加 阴影：1moz-/-webkit-）box-shadow:（inset 内阴影）2px 5px 5px #999; 5px lOpx 2px #555（多重阴影）;16 .多重背景：background:#000 url（l.png） 50%

46、102% no-repeat,#222 url（2.png） 12px -150px repeat-x;17 .透亮 度：opacity:.5; 01透亮好不透亮18 .渐变背景：background:linear-gradient（left,#000,#999）; （left ： 渐变线沿逆时针方向转至水平线的角度）六.html5视频音频1 . html5 支持 3 种视频：.ogg/.ogv .mp4/.m4V .webm2 .添力口视频：video src=l.webm/video视频属性：src autoplay controls muted loop poster width height preload3 .为视频添加多个来源：video controls=controlssource src=l.mp4 type=video/mp4source src=l.webm type=video/webmobjecttype=application/x-shockwave-flashdata=l.swf?videourl=l.mp4control=trueparam name=movie value=l.swf?videourl=l.mp