欢迎来到天天文库
浏览记录
ID:22373705
大小:64.50 KB
页数:7页
时间:2018-10-28
《不用图像也能构造圆角框.》由会员上传分享,免费在线阅读,更多相关内容在学术论文-天天文库。
1、不用图像也能构造圆角框.本篇详细介绍了不用图像也能构造圆角框的文章主题,由于未翻译,阅读起来有点困难~~~。StripeittogetitroundedThebasicideaofNiftyCornersistogetsomecouloredlinestogettheroundedeffect.Thisisthemarkuptogetaroundeddiv:<divid="container"><bclass="rtop"><bclass="r1"></b><bclass="r2"></b><bcla
2、ss="r3"></b><bclass="r4"></b></b><!--contentgoeshere--><bclass="rbottom"><bclass="r4"></b><bclass="r3"></b><bclass="r2"></b><bclass="r1"></b></b></div>Andhere'sitthebasicCSS:.rtop,.rbottom{disp
3、lay:block}.rtop*,.rbottom*{display:block;height:1px;overfloargin:05px}.r2{margin:03px}.r3{margin:02px}.r4{margin:01px;height:2px}Youcanseethefinaleffectonthissimpleexample.Afeent.Ineededaninlineelementtoobtaintheroundedcorners,sinceitcouldbenestedinalmosteverykindoftagmaintingthemarkupvalid.
4、Sothechoicefellonbbecauseitdoesn'thavesemanticalmeaningandit'sshorterthanspan,likeEricMeyersaid.Thetechniqueents.ItfailsonelementcouldbeeasilysolvedentthathasbeenroundedinOpera,andIE(bothMacversion6PC)essuponfloatedelementsodernbrouchbetter.Lookingforpleages,sparingabout6-8Kbofpageanticmarku
5、pandaintaintheHTMLcleanandlight.NiftyCornersentsakingsomefunctionstogetroundedcornersonalmosteveryelementonthepagethebasicrulesplethesourcecode,noextramarkupisinit.ThesolutionisabinationofCSSandJavascript.Thetechniqueismadeupoffouressentialparts:1.CSSfileforthescreen2.CSSfilefortheprint3.Jav
6、ascriptlibrarytogetNiftyCorners4.thejavascriptcallstoroundtheelementsyouwantThefirstthreeponentsjustdon'tneedchanges,whatever1234下一页[这篇文章来自..,]youedia="print"><scripttype="text/javascript"src="nifty.js"></script>Tounderstandhoplementthefourthpart,youneedfirsttounderstandhoplem
7、ented.Don'tple,you'llnoticethatIleftembeddedtheCSSandpartofthejavascripttoshobeddedjavascriptcode:<scripttype="text/javascript">sacheckforDOMsupportandexcludesIE5.xPCforrunningthescript.Ifthetesthaspassed,theRoundedfunctioniscalled.Itacceptsf
此文档下载收益归作者所有