1. 您所在位置：首页 > 建筑设计 > 建筑规范 > web前端开发规范手册图文稿

web前端开发规范手册图文稿

  • 37.80 KB
  • 27页

web前端开发规范手册图文稿

  • 27页
  • 当前文档由用户上传发布，收益归属用户
  1. 1、本文档共5页，可阅读全部内容。
  2. 2、本文档内容版权归属内容提供方，所产生的收益全部归内容提供方所有。如果您对本文有版权争议，可选择认领，认领后既往收益都归您。
  3. 3、本文档由用户上传，本站不保证质量和数量令人满意，可能有诸多瑕疵，付费之前，请仔细先通过免费阅读内容等途径辨别内容交易风险。如存在严重挂羊头卖狗肉之情形，可联系本站下载客服投诉处理。
  4. 文档侵权举报电话：19940600175。
'web前端开发规范手册Companynumber[1089WT-1898YT-1W8CB-9UUT-92108] Web前端开发规范手册一、规范目的i.i概述1二、文件规范2.1文件命名规则...12.2文件存放位置22.3css书写规范32.4html书写规范72.5JavaScript书写规范112.6图片规范122.7注释规范132.8css浏览器兼容13一、规范目的1.1概述为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档，特制订此文档.本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发.本文档如有不对或者不合适的地方请及时提出，经讨论决定后可以更改此文档.二、文件规范 2.1文件命名规则文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。a.HTML的命名原则引文件统一使用index,htmindex.htmlindex,asp文件名（小写）各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如：关于我们aboutus信息反馈feedback产品"product如果栏目名称多而复杂并不好以英文单词命名，则统一使用该栏目名称拼音或拼音的首字母表示；每一个目录中应该包含一个缺省的html文件，文件名统一用index,htmindex.htmlindex,asp；b.图片的命名原则图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质例如：广告、标志、菜单、按钮等等。放置在页面顶部的广告、装饰图案等长方形的图片取名：banner标志性的图片取名为：log。 menu在页面上位置不固定并且带有链接的小图片我们取名为button在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：装饰用的照片我们取名：pic不带链接表示标题的图片我们取名：title范例：banner_sohu.gifbanner_sina.gifmenu_aboutus.gifmenu_job.giftitle_news•giflogo_police.gif1ogo_national.gifpic_people.jpg鼠标感应效果图片命名规范为〃图片名+_+on/off〃。例如：menul_on.gifmenul_off.gifc.javascript的命名原则例如：广告条的javascript文件名为ad.js弹出窗口的javascript文件名为pop.jsd.动态语言文件命名原则以性质_描述，描述可以有多个单词，用隔开，性质一般是该页面得概要。，也例：register_form.aspregister_post,asptopic_lock.asp2.2文件存放位置规范_Rootcn存放中文HTML文件en存放英文HTML文件flash存放Flash文件images存放图片文件imagestudio存放PSD源文件flashstudio存放flash源文件inc存放include文件library存放DW库文件media存放多媒体文件project存放工程项目资料temp存放客户原始资料 js存放JavaScript脚本css存放CSS文件2.3CSS书写规范基本原则：CSS样式可细分为3类：自定义样式、重新定义HTML样式、链接状态样式。1.样式为设计师自定义的新CSS样式，影响被使用本样式的区域，用于完成网页中局部的样式设定。样式名+“相应样式效果描述的单词或缩写”例:shadow02.文字样式样式名”.n。”+“字号”+“行距”+“颜色缩写”例：“.nol2"、“.nol2-24”2.义HTML样式为设计师重新定义己有的HTML标签样式，影响全部的被设定标签样式，用于统一网页中某一标签的样式定义。样式名“HTML标签”例：hr{border:lpxdotted4333333}3.态样式为设计师对链接不同状态设定特殊样式，影响被使用本样式区域中的链接。该样式写法有2种：a.:link.a:link第一种只能修饰＜a＞标签中；第二种可以修饰所有包含有标签的其他标签。页面内的样式加载必须用链接方式注意细则：1.协作开发及分工：i会根据各个模块，同时根据页面相似程序,事先写好大体框架文件,分配给前端人员实现内部结构&表现&行为;共用CSS文件base,css 由i书写，协作开发过程中，每个页面请务必都要引入,此文件包含reset及头部底部样式,此文件不可随意修改；1.class与id的使用：id是唯一的并是父级的,class是可以重复的并是子级的,所以id仅使用在大的模块上,class可用在重复使用率高及子级中;id原则上都是由我分发框架文件时命名的,为JavaScript预留钩子的除外；2.为JavaScript预留钩子的命名，请以js_起始，比如:js_hide,js_show;3.class与id命名：大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由小写英文&数字&_来组合命名，如i_comment,fontred,width200;避免使用中文拼音,尽量使用简易的单词组合;总之,命名要语义化,简明化.4.规避class与id命名（此条重要,若有不明白请及时与i沟通）：a,通过从属写法规避,示例见d;b,取父级元素id/class命名部分命名，示例见d;c,重复使用率高的命名，请以自己代号加下划线起始，比如i_clear;d,a,b两条,适用于在2中已建好框架的页面,如,要在2中已建好框架的页面代码〈divid二〃mainnav〃X/div>中加入新的div元素，按a命名法则：...
,样式写法:#mainnav.firstnav{}按b命名法则：〈divid二〃mainnav">
, 样式写法:.main_firstnav{}6.css属性书写顺序,建议遵循布局定位属性一〉自身属性一〉文本属性一》其他属性.此条可根据自身习惯书写，但尽量保证同类属性写在一起.属性列举:布局定位属性主要包括：margin、padding、float（包括clear）、position（相应的top,right,bottom,left）、display、visibility、overflow等；自身属性主要包括:width&height&background&border;文本属性主要包括：font>color、text-align>text-decoration、text-indent等；其他属性包括：list-style（列表样式）、vertical-vlign、cursor>z-index（层叠顺序）、zoom等.我所列出的这些属性只是最常用到的，并不代表全部；7.书写代码前,考虑并提高样式重复使用率；8.充分利用html自身属性及样式继承原理减少代码量，比如：〈ulclass二〃list">
  • 这儿是标题列表201.0-09T5定义ul.listli{position:relative；ul.listlispan（position:absolute;right:0;即可实现口期居右显示9.样式表中中文字体名，请务必转码成unicode码，以避免编码错误时乱码;10.背景图片请尽可能使用sprite技术,减小http请求,考虑到多人协作开发,sprite按模块制作;11.使用table标签时（尽量避免使用table标签），请不要用width/height/cellspacing/cellpadding等table属性直接定义表现,应尽可能的利用table自身私有属性分离结构与表现,如thead,tr,th,td,tbody,tfoot,colgroup,scope;（cellspaing及 cellpadding的css:table{border:0;margin:0;bordercollapse：collapse;}tableth,tabletd{padding:0;},base,css文件中我会初始化表格样式）6.杜绝使用〈metahttp-equiv=〃乂-明-0311^21:让16"%01116]1廿〃正=7〃/＞兼容ie8;7.用png图片做图片时，要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果,请为ie6单独定义背景：src="img/bg.png"）;8.避免兼容性属性的使用，比如text-shadow|css3的相关属性；9.减少使用影响性能的属性，比如position：absolutefloat;10.必须为大区块样式添加注释，小区块适量注释；11.代码缩进与格式:建议单行书写，可根据自身习惯，后期优化i会统一处理;命名规则：头：header内容：content/container尾：footer导航：nav wrapper栏目：column页面外围控制整体布局宽度:左右中：leftrightcenter登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download力立导所I：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签页:tab 文章列表：list提小信息：msg小技巧：tips栏目标题:title加入：joinus指南：guild服务：service注册：regsiter状态：status投票：vote合作伙伴：partner（二）注释的写法：/"Footer*/内容区/*EndFooter*/（三）id的命名：（1）页面结构容器：container页头：header内容：content/container页面主体：main 页尾：footer导航：nav栏目：column页面外围控制整体布局宽度：wrapper左右中：leftrightcenter⑵导航导航：nav主导J沆：mainbav子导®t：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题:title摘要:summary⑶功能标志：logo广告：banner登陆:login 登录条:loginbarii:regsiter搜索：search功能区：shop标题：title力口入：joinus状态：status按钮：btn滚动:scroll标签页：tab文章列表：list提小信息：msg当前的：current小技巧：tips图标：icon注释:note指南：guild服务：service热点：hot新闻:news下载：download 投票：vote合作伙伴：partner友情链接：link版权：copyright基本样式:/*CSSDocument*/body{margin:0;padding:0;font:12px〃5B8B4F53〃，sanserif;background:ftfff;)div,dl,dt,dd,ul,ol,li,hl,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0;margin:0;}table,td,tr,th(font-size:12px;}litlist-style-type：none;}img{vertical-align:top;border:0;}ol,ul{list-style：none;}hl,h2,h3,h4,h5,h6(font-size:12px;font-weight:normal;}address,cite,code,em,th{font-weight：normal;font-style:normal;}.fB{font-weight:bold;}.f12px(font-size:12px;),f14px{font-size:14px;}.left{float：left;}.right(float:right;}a{color:#2b2b2b;text-decoration:none;} a:visited(text-decoration:none;}a:hover{color:#ba2636;text-decoration:underline;}a:active{color:#ba2636;}重定义的最先，伪类其次，自定义最后，便于自己和他人阅读! 不同浏览器上字号保持一致，字号建议用点数pt和像素PX来定义，pt一般使用中文宋体的9pt?和llpt,px一般使用中文宋体12px?和14.7px?这是经过优化的字号，黑体字或者宋体字加粗时，一般选用Hpt?和14.7px?的字号比较合适。中英文混排时，我们尽可能的将英文和数字定义为verdana?和arial?两种字体。2.4html书写规范1.网页制作细节一一head区代码规范head区是指HTML代码的＜head＞和＜/head＞之间的内容。必须加入的标签a）公司版权注释＜!ThesiteisdesignedbyEHM,Inc07/2005＞b）网页显示字符集简体中文：＜METAHTTP-EQUIV=Z/Content-Type"CONTENT二〃text/html;charset=gb2312〃＞繁体中文：＜METAHTTP-EQUIV=z，Content-Type，，CONTENT=，，text/html;charset=utf-8，z＞英语：＜METAHTTP-EQUIV=，，Content-Type/，CONTENT=/，text/html;charset=utf-8〃＞c）网页制作者信息〈METAname二〃author”d）网站简介＜METANAME=，，DESCRIPTION/，CONTENT=，，xxxxxxxxxxxxxxxxxxxxxxxxxx，，＞e）搜索关键字＜METANAME二〃keywords"CONTENT二〃xxxx,xxxx,xxx,xxxxx,xxxx,”＞ f）网页的css规范g）网页标题xxxxxxxxxxxxxxxxxx〈/title>可以选择加入的标签a）设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。<METAHTTP-EQUIV=//expires//CONTENT=，，Wed,26Febl99708：21：57GMT〃>b）禁止浏览器从本地机的缓存中调阅页面内容。<METAHTTP-EQUIV=，，Pragma/，CONTENT="no-cache，，>c）用来防止别人在框架里调用你的页面。<METAHTTP-EQUIV=/，Window-target，，CONTENT=z，_top//>d）自动跳转。<METAHTTP-EQUIV=，，Refresh"C0NTENT=z，5;URL=http：5指时间停留5秒e）网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。<METANAME=，，robots，/CONTENT=，，nonez/>CONTENT的参数有all,none,index,noindex,follow,nofollowo默认是allof）收藏夹图标<linkrel二〃Shortcutlcon〃href二〃favicon.ico〃>g）所有的javascript的调用尽量采取外部调用.〈SCRIPTLANGUAGE二〃JavaScript〃SRC二〃script/xxxxx.jsz/X/SCRIPT>h）附<body>标签： <body>标签不属于head区，这里强调一下，为了保证浏览器的兼容性，必须设置页面背景〈bodybgcolor二〃#FFFFFF〃>2.网页制作细节一一字体3.1.在设定字体样式时对于文字字号样式和行间距应必须使用CSS样式表。禁止在页面中出现〈fontsize二＞标记。4.5.2.在网页中中文应首选使用宋体。英文和数字首选使用verdana?和arial?两种字体。一般使用中文宋体的9pt?和llpt或12px?和14.7px?这是经过优化的字号，黑体字或者宋体字加粗时，一般选用llpt?和14.7px?的字号比较合适。6.7.3.为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用＜br＞来人工干预分段。8.9.4.不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外，汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。10.11.5.请不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用text-indent,padding,margin,hspace,vspace以及透明的gif图片来实现。12.13.6.行距建议用百分比来定义，常用的两个行距的值是line- height:120%/150%. 14.15.7.排版中我们经常会遇到需要进行首行缩进的处理，不要使用或者全角空格来达到效果，规范的做法是在样式表中定义p{text-indent:2em;}然后给每一段加上<p>标记，注意，一般情况下，请不要省略</p>结束标记。16.网页制作细节一一链接17.1.网站中的链接路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样：<ahref="aboutus/index.htmM>而应该这样:<ahref=naboutus/，^>,所有内页指向首页的链接写成〈ahref二"/">18.19.2.在浏览器里，当我们点击空链接时，它会自动将当前页面重置到首端，从而影响用户正常的阅读内容,我们用代码“javascript:void(mill)”代替原来的标记20.21.网页制作细节---表格22.Ipx表格style="border-collapse:collapse”23.实例如下：24.〈tableborder二〃1"cellspacing=〃0"width=〃32〃height=〃32"style二〃border-collapse：collapse"25.bordercolor=〃#000000"cellpadding=〃0〃>26.<tr>27.<td></td> 28.</tr>29.</table>30.设置亮、暗边框颜色31.表格有亮边框(bordercolorlight)和暗边框(bordercolordark)两个属性可以对表格样式设置。32.<tableborder=，，l，，width=，，500，，bordercolorlight=，，#000000，，bordercolordark=//#FFFFFF//>33.34.在写〈table》互相嵌套时，严格按照的规范，对于单独的一个〈table)来说，<tableXtr>对齐，<td>缩进两个半角空格，<td>中如果还有嵌套的表格，〈table》也缩进两个半角空格，如果<td>中没有任何嵌套的表格，</td>结束标记应该与<td>处于同一行，不要换行，35.如我们注意在源代码中不应有这样的代码：36.<td><imgsrc=w../images/sample,gif”>37.</td>38.而应该是这样的：39.<td><imgsrc=w../images/sample.gifw></td>40.这是因为浏览港认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写：41.<td><imgsrc=^../images/sample,gifw></td>42.43.一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张 网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用<tbody>标记，以便能够使这个大表格分块显示43.网页制作细节-一下载速度44.首页Flash网页大小应限定在200K以下，尽可能的使用矢量图形和Action来减小动画大小。非首页静态页面含图片大小应限定在70K左右，尽可能的使用背景颜色替换大块同色图片。45.网页制作细节include46.asp标准写法。一ftincludefile=，，inc/index_top.asp〃-->47.jsp标准写法@includefile=〃../inc/index_top..jsp〃%>48.网页制作细节——Alt和Title50,都是提示性语言标签，请注意它们之间的区别。在我们浏览网页时，当鼠标停留在图片对象或文字链接上时，在鼠标的右下角有时会出现一个提示信息框。对目标进行一定的注释说明。在一些场合，它的作用是很重要的。alt用来给图片来提示的。Title用来给链接文字或普通文字提示的。用法如下：〈pTitle—给链接文字提示〃>文字</p>〈ahref=〃二〃给链接文字提示〃>文字</a>〈imgsrc二〃图片.二〃给图片提示〃》51.网页制作细节一一缓存网页不会被缓存 HTM网页<METAHTTP-EQUIV=z，pragma，，CONTENT=//no-cache，，><METAHTTP-EQUIV=z，Cache-Control，，CONTENT=，zno-cache,must-revalidate//><METAHTTP-EQUIV=z，expiresz/CONTENT=，，O/，>ASP网页Response.Expires=TResponse.ExpiresAbsolute=Now()-1Response.cachecontrol=〃no-cache〃51.网页制作细节一一浏览器兼容性52.创建站点时，应该明白访问者可能使用各种Web浏览器。在已知的其他设计限制下，尽可能将站点设计为具有最大的浏览港兼容性。53.目前使用的Web浏览器有二十多种，大多数已发行了多个版本。即使您只针对使用NetscapeNavigator和MicrosoftlnternetExplorer的大多数Web用户，但您应明确并不是每个人都在使用这两种浏览器的最新版本。54.您的站点越复杂(在布局、动画、多媒体内容和交互方面)，跨浏览器兼容的可能性就越小。例如，并非所有的浏览器都可以运行JavaScript。不使用特殊字符的纯文本页面或许能够在任何浏览器中正确显示，但比起有效地使用图形、布局和交互的页面，这样的页面在美感上可能要差得多。所以，应尽量在最佳效果设计和最大浏览器兼容性设计之间取得平衡。55.所有的HTML标签的属性都要用单引号或者双引号括起，即我们应该写<ahref=nurln>而不是<ahref=url>. 51.图片处理细节banner52.全尺寸banner为468X60px,半尺.寸banner为234X60px,小banner为88X31pxo53.另外120X90,120X60也是小图标的标准尺寸。全尺寸banner不超过14K。54.普遍的banner尺寸760X100,750X120,468X60,468X95,728X90,585X14055.次级页的pip尺寸360X300,336X28056.游标：100X100或120X12057.图片处理细节一一LOGO的国际标准规范58.为了便于INTERNET上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO,目前有三种规格：59.88*31这是互联网上最普遍的LOGO规格。60.120*60这种规格用于一般大小的LOGO。61.120*90这种规格用于大型LOGO。62.图片处理细节一一页面修饰图片处理63.图片经过优化以加快下载的速度，有较佳的视觉空间效果，用图要与页面风格、页面内容相符；制作精美，细节处理得当。2.5JavaScript书写规范1.书写过程中，每行代码结束必须有分号；原则上所有功能均根据XXX项目需求原生开发，以避免网上down下来的代码造成的代码污染(沉冗代码I与现有代码冲突||.一)；2.库引入:原则上仅引入jQuery库,若需引入第三方库，须与团队其他人员 讨论决定；1.变量命名：驼峰式命名.原生JavaScript变量要求是纯英文字母,首字母须小写,如iTaoLun;jQuery变量要求首字符为,其他与原生JavaScript规则相同，如:_iTaoLun;另，要求变量集中声明，避免全局变量.2.类命名：首字母大写,驼峰式命名.如ITaoLun;3.函数命名：首字母小写驼峰式命名.如iTaoLun();4.命名语义化,尽可能利用英文单词或其缩写；5.尽量避免使用存在兼容性及消耗资源的方法或属性，比如eval()&innerText;6.后期优化中，JavaScript非注释类中文字符须转换成unicode编码使用，以避免编码错误时乱码显示；7.代码结构明了，加适量注释.提高函数重用率；8.注重与html分离,减小reflow,注重性能.2.6图片规范1.所有页面元素类图片均放入img文件夹,测试用图片放于img/demoimg文件夹；2.图片格式仅限于gifIpngIijpg;3.命名全部用小写英文字母||数字UJI勺组合，其中不得包含汉字||空格|特殊字符；尽量用易懂的词汇,便于团队其他成员理解;另，命名分头尾两部分，用下划线隔开，比如ad_left01.gifbtn_submit.gif;4.在保证视觉效果的情况下选择最小的图片格式与图片质量，以减少加载时间； 1.尽量避免使用半透明的png图片（若使用，请参考css规范相关说明）；2.运用csssprite技术集中小的背景图或图标,减小页面http请求，但注意,请务必在对应的spritepsd源图中划参考线,并保存至img目录下.2.7注释规范1.html注释:注释格式。一这儿是注释一＞,"-」只能在注释的始末位置,不可置入注释文字区域；2.css注释:注释格式/*这儿是注释*/;3.JavaScript注释，单行注释使用’〃这儿是单行注释"，多行注释使用/*这儿有多行注释*/;2.8浏览器兼容性CSShack一、标识区别：区别IE6,IE7,IE8,FFoLIE都能识别*;标准浏览器（如FF）不能识别*;2.IE6能识别*，但不能识别!important;IE6在样式前面加_3.IE7能识别*,也能识别!important;4.IE8能识别9例如:background:red9;5.firefox不能识别*,但能识别!important;1.IE6和firefox的区别：background:orange;*background：blue;意思就是火狐浏览器的背景颜色是橙色，而IE浏览器的背景色是蓝色. 1.IE6和IE7的区别:background:green!important;background:blue;意思指的是:IE7的背景颜色是绿色,IE6的背景颜色是蓝色2.IE7和FF的区别:background：orange;*background:green;意思指的是:火狐浏览器的背景颜色是橙色,而IE7的背景颜色是绿色3.FF,IE7,IE6的区别：background:orange;*background:green!important;*background:blue;意思是火狐浏览器的的背景橙色，IE7浏览器的背景颜色是绿色，面IE6浏览器的颜色是蓝色.二、实践建议(1).开发平台的选择在Firefox上编写CSS,同时兼容其他浏览器的.这样做肯定会比在IE做好再到别的浏览器兼容来得容易，因为IE对老标准支持还是很不错的，而IE的一些特有功能人家却不支持.所以推荐以Firefox结合Firebug扩展作为平台。(2).CSSHack的顺序使用Firefox作为平台，只要代码写得够标准,其实要Hack的地方不会很多的，IE以外的浏览器几乎都不会有问题,所以可以暂时忽略， 顺序如下：Firefox->IE6->IE7->其他(1).Hack的方法说到方法有两种，一种是在不同文件中处理,另一种则是在同一个文件中处理.其实作用是相同的，只是出发点不一样而已.1.同一文件中处理.如：id二〃bgcolor〃的控件要在IE6中显示蓝色，IE7中显示绿色,Firefox等其他浏览器中显示红色。IE6不认！important,也不认*+html.所以IE6只能是blue.IE7认！important,也认*+html,优先度：(*+html+!important)>!important>+html.IE7可以是red,blue和green,但green的优先度最高.Firefox和其他浏览器都认！important.!important优先，Firefox可以是red和blue,但red优先度高.上述的优先符号均是CSS3标准允许的,其他浏览器也还有其他的Hack方法,但我迄今还没遇到过Firefox正常，IE以外的其他浏览器不正常的情况,所以无可分享.只要代码规范,相信这种情况的发生应该是很罕见（JavaScript除外）.2.不同文件中处理.为什么同一文件中可以处理还要写在多个文件里面针对不同的浏览器这是为了欺骗W3C的验证工具,其实只需要两个文件,一个是针对所有浏览器的，一个只为IE服务.将所有符合W3C的代码写到一个里面去，而一些IE中必须的，又不能通过W3c验证的代码(如:cursor:hand;)放到另一个文件中，再用下面的方法导入.' </div> </div> </div> </div> <!--下载提示 end--> <!--您可能关注的文档 start--> <div class="relate"> <div class="hd"><h3>您可能关注的文档</h3></div> <div class="bd"> <ul class="list"> <li><a href="/paper/17465.html" title="业之峰装饰公司装修施工标准规范手册(38" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0"> <i class="icon-font icon-format icon-format-docx"></i> <span>业之峰装饰公司装修施工标准规范手册(38</span></a> </li> <li><a href="/paper/17466.html" title="业之峰装饰公司装修施工标准规范手册" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0"> <i class="icon-font icon-format icon-format-docx"></i> <span>业之峰装饰公司装修施工标准规范手册</span></a> </li> <li><a href="/paper/17467.html" title="中国移动某分公司营业厅服务规范手册" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0"> <i class="icon-font icon-format icon-format-docx"></i> <span>中国移动某分公司营业厅服务规范手册</span></a> </li> <li><a href="/paper/17468.html" title="会议营销规范手册(doc 30)" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0"> <i class="icon-font icon-format icon-format-docx"></i> <span>会议营销规范手册(doc 30)</span></a> </li> <li><a href="/paper/17469.html" title="会议营销规范手册(doc30)" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0"> <i class="icon-font icon-format icon-format-docx"></i> <span>会议营销规范手册(doc30)</span></a> </li> <li><a href="/paper/17470.html" title="会议营销规范手册" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0"> <i class="icon-font icon-format icon-format-docx"></i> <span>会议营销规范手册</span></a> </li> <li><a href="/paper/17471.html" title="瑞驰新天地销售人员行为规范手册doc23" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0"> <i class="icon-font icon-format icon-format-docx"></i> <span>瑞驰新天地销售人员行为规范手册doc23</span></a> </li> <li><a href="/paper/17472.html" title="销售案场物业服务规范手册范本" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0"> <i class="icon-font icon-format icon-format-docx"></i> <span>销售案场物业服务规范手册范本</span></a> </li> <li><a href="/paper/17473.html" title="销售案场物业服务规范手册" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0"> <i class="icon-font icon-format icon-format-docx"></i> <span>销售案场物业服务规范手册</span></a> </li> <li><a href="/paper/17475.html" title="低压开关柜及动力配电箱技术经验协议规范手册" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0"> <i class="icon-font icon-format icon-format-docx"></i> <span>低压开关柜及动力配电箱技术经验协议规范手册</span></a> </li> <li><a href="/paper/17476.html" title="公司员工规范手册(实战版)" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0"> <i class="icon-font icon-format icon-format-docx"></i> <span>公司员工规范手册(实战版)</span></a> </li> <li><a href="/paper/17477.html" title="江西省城镇立体绿化技术导则(试行)" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0"> <i class="icon-font icon-format icon-format-doc"></i> <span>江西省城镇立体绿化技术导则(试行)</span></a> </li> <li><a href="/paper/17478.html" title="海洋倾倒区选技术导则" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0"> <i class="icon-font icon-format icon-format-doc"></i> <span>海洋倾倒区选技术导则</span></a> </li> <li><a href="/paper/17479.html" title="煤炭行业贯彻实施《环境影响评价技术导则 地下水环境》" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0"> <i class="icon-font icon-format icon-format-doc"></i> <span>煤炭行业贯彻实施《环境影响评价技术导则 地下水环境》</span></a> </li> <li><a href="/paper/17480.html" title="环境影响评价技术导则与标准2" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0"> <i class="icon-font icon-format icon-format-doc"></i> <span>环境影响评价技术导则与标准2</span></a> </li> <li><a href="/paper/17481.html" title="环境影响评价技术导则与标准1" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0"> <i class="icon-font icon-format icon-format-doc"></i> <span>环境影响评价技术导则与标准1</span></a> </li> <li><a href="/paper/17482.html" title="环境影响评价技术导则与标准基础过关800题" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0"> <i class="icon-font icon-format icon-format-doc"></i> <span>环境影响评价技术导则与标准基础过关800题</span></a> </li> <li><a href="/paper/17483.html" title="环评技术导则大纲" target="_blank" owa-bind="had" data-sm="spm,1.2.5.10,0"> <i class="icon-font icon-format icon-format-doc"></i> <span>环评技术导则大纲</span></a> </li> </ul> </div> </div> </div> <div class="side"> <!--相关文档 start--> <div class="similar" style="display: block;"> <div class="hd"><h3>相关文档</h3> </div> <div class="bd"> <ul class="list"> <li> <a href="/paper/15652.html" title="中房地产住宅电梯设计选型标准" target="_blank" owa-bind="had" data-sm="spm,1.2.6.0,0"><strong> <i class="icon-font icon-format icon-format-doc"> </i> <small>中房地产住宅电梯设计选型标准</small></strong></a> </li> <li> <a href="/paper/15653.html" title="中房地产住宅电梯设计选型标准(20191017230909).pdf" target="_blank" owa-bind="had" data-sm="spm,1.2.6.0,0"><strong> <i class="icon-font icon-format icon-format-pdf"> </i> <small>中房地产住宅电梯设计选型标准(20191017230909).pdf</small></strong></a> </li> <li> <a href="/paper/15654.html" title="中房地产住宅电梯设计选型标准.doc" target="_blank" owa-bind="had" data-sm="spm,1.2.6.0,0"><strong> <i class="icon-font icon-format icon-format-doc"> </i> <small>中房地产住宅电梯设计选型标准.doc</small></strong></a> </li> <li> <a href="/paper/15655.html" title="sql复制实施手册(最全顾)" target="_blank" owa-bind="had" data-sm="spm,1.2.6.0,0"><strong> <i class="icon-font icon-format icon-format-doc"> </i> <small>sql复制实施手册(最全顾)</small></strong></a> </li> <li> <a href="/paper/15656.html" title="美的集团-2009届校园招聘实施手册-30页" target="_blank" owa-bind="had" data-sm="spm,1.2.6.0,0"><strong> <i class="icon-font icon-format icon-format-doc"> </i> <small>美的集团-2009届校园招聘实施手册-30页</small></strong></a> </li> <li> <a href="/paper/15657.html" title="广告促销计划流程实施手册" target="_blank" owa-bind="had" data-sm="spm,1.2.6.0,0"><strong> <i class="icon-font icon-format icon-format-ppt"> </i> <small>广告促销计划流程实施手册</small></strong></a> </li> <li> <a href="/paper/15658.html" title="广告促销计划流程实施手册" target="_blank" owa-bind="had" data-sm="spm,1.2.6.0,0"><strong> <i class="icon-font icon-format icon-format-ppt"> </i> <small>广告促销计划流程实施手册</small></strong></a> </li> <li> <a href="/paper/15659.html" title="鲁南片区6s管理实施手册" target="_blank" owa-bind="had" data-sm="spm,1.2.6.0,0"><strong> <i class="icon-font icon-format icon-format-doc"> </i> <small>鲁南片区6s管理实施手册</small></strong></a> </li> <li> <a href="/paper/15660.html" title="安全文化建设实施手册" target="_blank" owa-bind="had" data-sm="spm,1.2.6.0,0"><strong> <i class="icon-font icon-format icon-format-doc"> </i> <small>安全文化建设实施手册</small></strong></a> </li> <li> <a href="/paper/15661.html" title="劳动关系统计报表实施手册" target="_blank" owa-bind="had" data-sm="spm,1.2.6.0,0"><strong> <i class="icon-font icon-format icon-format-doc"> </i> <small>劳动关系统计报表实施手册</small></strong></a> </li> </ul> </div> </div> <!--相关文档 end--> <!--最近下载 start--> <div class="favorite"> <div class="hd"><h3>最近下载</h3></div> <div class="bd"> <ul class="list"> <li><a href="/paper/269433.html" title="GB50086-2015岩土锚杆与喷射混凝土支护工程技术规范.pdf" target="_blank" class="" owa-bind="had" data-sm="spm,1.2.7.0,0"> <i class="icon-font icon-format icon-format-pdf"></i> <span>GB50086-2015岩土锚杆与喷射混凝土支护工程技术规范.pdf</span></a> </li> <li><a href="/paper/14.html" title="建筑施工企业竞争力评价指标体系的建立" target="_blank" class="" owa-bind="had" data-sm="spm,1.2.7.0,0"> <i class="icon-font icon-format icon-format-docx"></i> <span>建筑施工企业竞争力评价指标体系的建立</span></a> </li> <li><a href="/paper/200481.html" title="GB50517-2010 石油化工金属管道工程施工质量验收规范（附条文说明）.pdf" target="_blank" class="" owa-bind="had" data-sm="spm,1.2.7.0,0"> <i class="icon-font icon-format icon-format-pdf"></i> <span>GB50517-2010 石油化工金属管道工程施工质量验收规范（附条文说明）.pdf</span></a> </li> <li><a href="/paper/291200.html" title="成都220kv室内变电站施工组织设计" target="_blank" class="" owa-bind="had" data-sm="spm,1.2.7.0,0"> <i class="icon-font icon-format icon-format-doc"></i> <span>成都220kv室内变电站施工组织设计</span></a> </li> <li><a href="/paper/80046.html" title="六层框架结构住宅毕业设计论文" target="_blank" class="" owa-bind="had" data-sm="spm,1.2.7.0,0"> <i class="icon-font icon-format icon-format-doc"></i> <span>六层框架结构住宅毕业设计论文</span></a> </li> <li><a href="/paper/232415.html" title="医药中间体废水处理工艺设计及运行控制技术" target="_blank" class="" owa-bind="had" data-sm="spm,1.2.7.0,0"> <i class="icon-font icon-format icon-format-pdf"></i> <span>医药中间体废水处理工艺设计及运行控制技术</span></a> </li> <li><a href="/paper/48193.html" title="建筑毕业设计总结" target="_blank" class="" owa-bind="had" data-sm="spm,1.2.7.0,0"> <i class="icon-font icon-format icon-format-docx"></i> <span>建筑毕业设计总结</span></a> </li> <li><a href="/paper/10228.html" title="住宅施工现场防中毒措施范本" target="_blank" class="" owa-bind="had" data-sm="spm,1.2.7.0,0"> <i class="icon-font icon-format icon-format-docx"></i> <span>住宅施工现场防中毒措施范本</span></a> </li> <li><a href="/paper/10236.html" title="住宅施工重点难点与对策" target="_blank" class="" owa-bind="had" data-sm="spm,1.2.7.0,0"> <i class="icon-font icon-format icon-format-doc"></i> <span>住宅施工重点难点与对策</span></a> </li> <li><a href="/paper/10242.html" title="混凝土结构梁式转换层住宅施工技术及其可靠性探讨" target="_blank" class="" owa-bind="had" data-sm="spm,1.2.7.0,0"> <i class="icon-font icon-format icon-format-docx"></i> <span>混凝土结构梁式转换层住宅施工技术及其可靠性探讨</span></a> </li> </ul> </div> </div> <!--最近下载 end--> <!-- </div>--> </div> </div> <!-- 模态框 --> <!-- 充值Modal --> <div class="modal fade" id="rechargeModal" data-backdrop="static" tabindex="-1" data-keyboard="false" aria-labelledby="rechargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title text-center flex-grow-1 font-weight-bold " style="font-size: 18px; padding-left: 34px;" id="rechargeModalLabel">免费下载</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="bg-light px-3 py-2 mb-4"> <div style="font-size: 16px;">web前端开发规范手册图文稿</div> <div class="text-secondary" ><span class="mr-4">文档大小：37.80 KB</span> <span>文档价格：<span class="price"></span></span></div> </div> <div class="mb-3 text-center">需支付金额：<span class="price text-danger" style="font-size:18px;font-weight:700"></span></div> <div class="d-flex justify-content-center mb-2"> <div class="qrcode-box border border-primary rounded" style="border-width: 2px!important;"> <div class="px-3 py-3"> <div class="qrcode" id="wx-qrcode-box" style="width: 190px;height: 190px;"> </div> </div> <div class="py-2 text-white bg-primary d-flex justify-content-center align-items-center"><img class="mr-2" src="/static/pc/img/wechatpay-icon.png" alt=""> <img class="mr-2" src="/static/pc/img/alipay-icon.png" alt="">微信/支付宝扫码支付下载</div> </div> </div> <div class="text-center text-secondary mb-4">扫码支付即表示接受<a href="/help/wenti/chongzhixieyi/" class="text-primary" target="_blank">《用户下载须知》</a></div> <div class="border-top py-2"> <ul class="pl-4 mb-0"> <li style="list-style:inherit">使用微信或支付宝扫码付费完成后即可下载当前文档</li> <li style="list-style:inherit;">如果您已付费完成但是无法下载文档，请<button class="text-primary bg-white border-0" id="checkPayStatus" style="text-decoration: underline!important;">点击此处</button></li> </ul> </div> </div> </div> </div> </div> <!-- download模态框 --> <!-- Modal --> <div class="modal fade" id="downloadModal" tabindex="-1" aria-labelledby="downloadModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title text-center flex-grow-1 font-weight-bold " style="font-size: 18px; padding-left: 34px;" id="rechargeModalLabel">免费下载</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="bg-light px-3 py-2 mb-4"> <div style="font-size: 16px;">web前端开发规范手册图文稿</div> <div class="text-secondary" ><span class="mr-4">文档大小：37.80 KB</span> <span>文档价格：<span class="price"></span></span></div> </div> <div class="text-center"> <div class=""><button class="btn btn-primary mb-4" id="download-btn">立即免费下载</button></div> <div class="text-secondary" style="font-size: 14px;">如果您已付费完成但是无法下载文档，请联系客服处理</div> </div> </div> </div> </div> </div> <!-- 分享分类列表--> <div class="d-none" id="shareBox"> <div class="share-box" id="share"></div> </div> <script src="/e/public/onclick/?enews=donews&classid=14&id=17474"></script><div id="sidebar"> <ul class="list"> <li class="sidebar-item sidebar-qq"> <a class="sidebar-item-on" href="javascript:;" title="联系客服"><i class="icon-sidebar"></i></a> <div class="slip"> <div class="icon-triangle"></div> <div class="panel"> <div class="auto"> <a href="javascript:;"" title="自助客服在线"> <strong>客服QQ</strong> </a> </div> <ul class="qq"> <li><a href="javascript:;" data-qq="3005891076"><i class="icon-font icon-common icon-common-qq"></i> <span>403074932</span></a></li> </ul> <div class="group"> <span>工作时间：9:00 - 18:00</span> </div> </div> </div> </li> <li class="sidebar-item sidebar-wechat"> <a class="sidebar-item-on" href="javascript:;" title="关注微信公众号"><i class="icon-sidebar"></i></a> <div class="slip"> <div class="icon-triangle"></div> <div class="panel"> <img alt="关注微信公众号" src="/static/pc/img/wechat-qrcode.jpg"> <span>关注微信公众号售出明细实时看</span> </div> </div> </li> <li class="sidebar-item sidebar-top" style="display: none" id="goToTop"> <a class="sidebar-item-on" href="javascript:;" title="返回顶部"><i class="icon-sidebar"></i></a> <div class="slip"> <div class="icon-triangle"></div> <div class="panel"> <p>回到顶部</p> </div> </div> </li> </ul> </div> <div id="footer"> <div class="container"> <div class="copyright"> <p><a href="/" style="color: #0a8ddf">建筑工程网</a>声明：本站点发布的文章作品均来自用户投稿或网络整理，部分作品未联系到知识产权人或未发现有相关的知识产权登记</p> <p>如有知识产权人不愿本站分享使用所属产权作品，请立即联系我们会立即处理。</p> </div> </div> </div> <!--toast列表区域--> <div aria-live="polite" aria-atomic="true" class="toast-area"></div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?426255543a233eb8e3b2a601dec59324"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript" src="/static/pc/js/global.min.js"></script> <script type="text/javascript" src="/static/pc/js/jquery.share.min.js"></script> <script type="text/javascript" src="/static/pc/js/main.js"></script> <!--<script type="text/javascript" src="/static/pc/js/loginWindow.js"></script>--> <script type="text/javascript" src="/static/pc/js/downloadFile.js"></script> <script> previewMoreCon.init(); initEmptyBox(); </script> </body> </html>