来看看：匡助你进修CSS的在线CSS工具网站
如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。网页制造poluoluo文章简介：Web前端开辟之CSS工具列表。
用户界面
[*]ILikeYourColor
输出URL然后它会抓出个中的色彩并用16进制暗示。
[*]CSSMulti-elementRolloverGenerator
利用CSS和一个图片创立出一个翻转按钮的款式。
[*]CSSRoundedBoxGenerator
[*]RuthsarianLayouts
6个CSS页面结构模板，包含色彩、题目等。
[*]BluerobotLayoutReservoir
2栏和3栏的CSS结构框架
[*]GlishCSSLayouttechniques
2、3、4栏的CSS结构框架
[*]TheLayout-o-matic
输出页宽、栏数和padding，它会主动天生CSS和HTML的结构框架。
[*]LittleBoxes
w3cn.org上供应的那些结构模板
[*]OpenSourceWebDesign
各类收费的完全页面模板
[*]WebBuilders’Toolkit
更多的模版资本
[*]IconicoOnlineCSSScrollbarColorChanger
[*]List-u-Like
一个CSS菜单天生器：轻松创立接纳li并兼容各类扫瞄器的导航菜单。
[*]NiftyCorners:无需图片的圆角矩形
[*]RoundCornerStone/Icon(rcsi)V1.0
加强的圆角矩形
[*]Xylescope
无需下载其他站点就可以轻松剖析其CSS代码。
[*]W3CCoreStyles
[*]ChecklistezurWebseitengestaltung
[*]TestseitezurZeilenbreite
易用性反省
[*]AccessibilityValetDemonstrator
[*]BobbyOnlineService
[*]CynthiaSays
[*]OCAWAWebAccessibilityExpert
[*]Torquemada
利用工具对页面举行一个完全的易用性剖析办法测试，以疾速分辨页面中哪些部分存在毛病。
[*]UISitecheck
一个站点反省工具，只必要输出你的网址，即可以列出几十个考证器和易用性工具。
[*]WAVE3.5AccessibilityTool
能够供应你页面上的易用性细节和毛病方面的有效信息。他会用红黄绿蓝等几种图标来暗示必要改善的页脸部分。这些图标代表了你页面上有关布局、内容、可用性和易用性方面的成绩细节。你能够分明地看到以后页面上哪些地位存在成绩。
[*]Web-basedSiteUsabilityChecker
[*]WebXACTQuality&AccessibilityCheck
一个收费的在线服务，让你对单个页面举行质量、易用性和保密性成绩的测试。
[*]Willthebrowserapplytherule(s)?
[*]TAW-Testaccessibilidadweb
收拾和优化
[*]CSSFormatterandOptimiser
能让你选择你的CSS更容易读仍是更小。
[*]CSSCompressor
利用这个工具能够紧缩你的CSS使之进步载进速率和勤俭带宽。
[*]OnlineCSSCompressor
多种路子来清算并紧缩你的CSS，就义了可读性来取得相称水平的优化和尺寸的削减。
[*]CSSCompressor
[*]CSSSyntaxCheckerforBBEditandTextWrangler
[*]CSSTidy
CSSTidy是一个开源的CSS注释器和优化工具
[*]CSSTweak~WebBasedCSSTweaker!
CSSTweak会优化你的CSS以削减文件巨细和下载工夫。
[*]CleanCSS-OptmizeandFormatyourCSS
[*]FormatCSSOnline
主动格局化你的CSS使之便于浏览和编纂
[*]OnlineCSSOptimizer
CSSOptimizer优化并削减CSS的文件尺寸
[*]OnlineCSSOptimiser/Optimizer
这个工具用于优化CSS代码。
[*]Tabifier
使HTML和CSS代码变大度。
[*]Webucator
有一个CSS参考手册，你还能够在下面测试你的CSS代码
[*]CSSCentricle
CSShack扫瞄器兼容一览表（就是w3cn.org上的谁人）
字体
[*]CSSFontandTextStyleWizard
你能够在这里测试用分歧的字体和款式来天生CSS源代码。
[*]EmCalculator
转换字体巨细到em的工具
[*]textsizing-upthegardenpath
分歧扫瞄器下字体体现的研讨，共有264个截图。
表单
[*]AccessibleFormBuilder
悄悄松松天生切合XHTML尺度的表单。
[*]CSSFormCodeMaker
表单天生器
[*]JotForm
所见即所得的表单天生器
[*]korhoentypeviewer
帮你检察CSS的排版效果，帮你调剂使之易读。
结构
[*]CssCreator->PageLayout:
thisgeneratorwillcreateaCSSlayoutthathasfixedwidthleftand/orrightcolumnswithadynamicwidthcentercolumn,allthesameheightwithheaderandfooter.
[*]CSSHTMLPHPWebsiteTemplateMaker
一个PHP-HTML-CSS模板天生器，能够天生包含页头和页尾的两栏结构的模板。
[*]Firdamatic
Firdamatic?是一个无表格的结构天生器。
[*]FreeCSSTemplateCodeGenerator
天生三栏的结构
[*]Layout-o-Matic
也是一个无表格的结构天生器。
[*]QrONECSSDesigner
在线CSS天生器
[*]Scriptomizers
一个CSS款式天生器
[*]TheGeneratorFormv2.90
1-3栏可定制的CSS页面熟成器。
酷站
[*]CSSElite
[*]openwebdesign.org
计划师和站长在这里分享网页计划模板和资讯。
[*]CSSthesis
[*]Wow-Factor
[*]WebStandardsAwards
[*]W3CompliantSites
[*]UnmatchedStyle
[*]TheWeeklyStandards
[*]CSS-Mania
[*]CSSDrive
[*]CSSImport
[*]CSSZenGarden
[*]CSSVault
[*]CSSBeauty
[*]Stylegala
匡助导游/Hacks/进修资本
[*]SelectOracle
ExplainsthestructureofCSS-andHTML-documents.Entersemi-colonseparatedselectorsorjustpasteinyourexistingrulesetsintothe“DirectInputarea,orprovidetheURLofastylesheetoranHTMLdocumentwithanembeddedstylesheetinthe“URLInputarea.English,Spanish,GermanandBulgarianversionsareavailable.
[*]TomLeehasatutorialonMax-widthinIEUsingaCSSExpression.Wordofcaution:Ihearusingthismethodcanberatherhairy,insomecasescrashingthebrowser.
[*]Future-proofyourCSSwithConditionalCommentsfromBruceLawsonisagreatcomprehensivecollectionofCSS’sthat,whencombined,addressesmostofCSSissueswithdifferentbrowsers.
[*]IEWordWrapDoppelgangerBug
这个站点展现了题目(heading)元素在IE6中换行时会留个小尾巴的bug。
[*]Images,Tables,andMysteriousGapsseemslikesomethingIshould’veknownalreadyaboutthebehaviorofinlineelementsinstrictmode.Butofcourseittookmeanhourofagonybeforefinallyrealizingtheultimatetruth:I’mnotthatsmart.
[*]EasyCSShacksforIE7—IE7下能够用的CSSHacks。
[*]针对IE7,Firefox1.5和Opera8.5的Web扫瞄器CSS撑持一览表。
[*]snook.caonthe“+CSShackwhichyoucanusetotargetIE6andIE7only.
[*]Onhavinglayout
供应了良多信息环绕IE其独有的“衬着观点：hasLayout—oneofthemajorcausesforheadachewhenitcomestohowIEdecidestopaintheboundariesofcertainHTMLelements:
[*]“InternetExplorer中有良多奇异的衬着成绩能够经由过程付与其“layout失掉办理。JohnGallant和HollyBergevin把这些成绩回类为“尺寸bug(dimensionalbugs)，意义是这些bug能够经由过程付与响应元素某个宽度或高度办理。这便引出关于“layout的一个成绩：为何它会改动元素的衬着特征，为何它会影响到元素之间的干系？这个成绩问得很好，但却很难回覆。在这篇文章中，我们专注于这个庞大成绩会有那些方面的体现，某一方面的详细会商和典范请参考文中给出的相干链接。
这篇文章的中文翻译拜见承志的SharkUI：Onhavinglayout
[*]Negativetext-indentandunderline—Nomatterhowfaronthelefttherealtextis,theunderlinewillbestretchedallthewaytotherightinsomePCbrowsers,namelytheFirefox.
[*]IE6MultiClassBug—Again,somethingthatcould’vebroughttomyattentionlastweek!
[*]…InternetExplorerfailstorenderbackgroundsforelementsthathavebothanIDandaclassdefined.Forinstance,#photos.background1willdisplaythecorrespondingbackgroundinIE6forWindows,butoncethathasbeendefined,#photos.background2,#photos.background3,etc.willnotbedisplayed.
[*]TenmoreCSStricksyoumaynotknow
包含大批的IEbug修复手腕
[*]The“HollyHack—出名的tamingIE/WinCSSdisplaybugbyassigningadimensionalvaluesuchasheight:1%;
[*]CSStests
很不错的一系列CSS测试页面
[*]max-widthinIE
用IE的expression来摹拟max-width
[*]http://imfo.ru/csstest/css_hacks/import.php
用@import来针对分歧的扫瞄器埋没CSS的一系列办法。
[*]EssentialsofCSSHackingForInternetExplorer
助你凑合IE的一系列倡议。
[*]Web扫瞄器尺度撑持
用图表来对照IE6,Firefox1.0,和Opera8.
[*]TheperilsofusingXHTMLproperly
准确利用XML声名和MIME范例。
[*]IEDoubleFloatMarginBug.
小贴士
[*]CSS-BasedForms:ModernSolutions款式表界说的各类大度注册与登录表单的搜集。
[*]HotDateswithCSS教你如何使blog的日期看起来像日历页。
[*]AnicedemoofexperimentingwithCSS-onlysolutiontoimagemapwithpopupsusingunorderedlist.
[*]ClagnutshowsyouhowtohaveLinebreaksintooltipsbyusingthecarriagereturnentity.Howutterlysimple!
[*]StylingcheckboxesandradiobuttonsonlywithCSSuses100%CSSsolution(viaattributevalueselectorandpositionedbackgroundimages)toserveupcustomizedformelements.It’ssemanticallycorrectanddegradeswellforbrowsersthatdoesn’tsupportthismethod(IE),butisitalsoaccessible?
[*]StuartRobertson’sCSStextshadowtechniqueseemslikeoneoftheeasiest-to-implementtechniquesI’vecomeacross.Ituses:beforepseudoelementandsupportsbothSafariandFirefoxbrowsers.
[*]From“holycrapwhydidn’tIthinkofthatfile…AirbaghasasimplebutgreatideaofusingarulerbackgroundimagesinCSStocheckDIVsizingduringdevelopment.
[*]CSSColors:TakeControlUsingPHPisawonderfultutorialfromBarelyFitzonhowtousePHPvariablestorepresentcolorsinyourCSSwhichyoucanthenmanipulate—quicklychangingallthecolorsfromasinglesource,generatingnewcolorsviaalgorythm,etc.
[*]WebGraphicshasaCSS3demoonusing:targetpseudoclasstostyleanchorlinktargets.
[*]DynamicDrive,alongtimefavoriteDHTMLcodesnippetdepotofmine,hasstartedanewspin-off:CSSDrive.
[*]AMoreAccessibleMap—anewtutorialonALAshowshowtocreateanaccessiblemapwithtooltipsviaCSSandJS.
[*]StylinghorizontalruleswithCSS—“…Don’twastehourstryingtostylehorizontalrulesconsistentlyacrossdifferentbrowsers.InsteadwrapyourHRinaDIV,settheHRtodisplaynoneandstylethesurroundingDIVinstead..Nowwhytheheckdidn’tIthinkofthat?
[*]CSSimagepreloadertechniquefrommaratz.com—usingbackgroundimageCSSpropertyonimagestoserveasimageplaceholders.
[*]stefanhayden.comshowsaneat(andeasy)waytomakesuretheclientfetchesnewCSSwithHTMLupdate:justaddavariableattheendoftheCSSwitheachupdate.
[*]WrappingtextaroundcurvesviaCSSifyoudon’tmindthemarkupcruft.
[*]codylindley.com’sPushpinHeaderTechnique“…isaCSSsolutionforcreatingastationaryheaderoutofthetheadofatablewhilethetable’stbodyremainsscrollable
[*]hoveboximagegalleryviasonspring.It’ssortoflikemini-lightboxthatenlargesthethumbnailsonhover.Verynice.
[*]BeautifullyNumberedListslooksniceexceptthatit’snotreallyanorderedlist.Insteadituseddefinitionlistsinsidetheorderedlistforpresentation—whichmeanstruestandardistasmightobject.
[*]InwhatcouldonlybecatagorizedunderUber-Analdepartment,ollicle.comhowtoalterCSSline-heightbasedonparagraphwidthviajavascriptforoptimalreadbility.
[*]From“Ididn’tknowthatfile…wgtellsusthatusing−insteadofadashcharacterpreventssomebrowserfromwrappingthewordsconnectedbyit.
[*]EricMeyer,themanwithCSSskillzthatpayzdabillz,revealssomethingI’veneverheardofbefore:line-heightpropertycanuseunitlessvalues!Thedifferencesbetweenunitedvs.unitlessdeclarationsarewelldescribedinhisarticlebutIcan’tbelievethatIhaditallwrong.I’vebeentellingeveryonethat“YoumustdeclareunitforANYmeasurementvaluesunlessit’szero.
[*]loudandlonelyhasaninterestingarticleonhowtoobscureyouremailaddressviaCSSbyusingsomeclevera:link:beforeanda:link:afterpseudo-elements.
[*]digital-webhasagoodrundownonthingstoconsiderwhenusingCSStypography.
[*]456bereastreettakesafirstcrackatexplainingCSS3selectors
[*]AnothergoodfooteratthebottomusingonlyCSSdemo.
[*]Pup’sBoxFlowHackshowsyouhowtoallowevenblockitemstoflowaroundfloatingboxes.
[*]Simple(r)CSSImageSwitcher—UnliketheorginalCSSimageswitcher,thisversiondoesn’tusenestedunorderedlists.Instead,itusesjustoneunorderedlist,withthelinkimageplacedinsidetheanchor.
[*]Anotherverynicetutorialfrom24ways.Thistimeit’sCurlyQuotesWithoutImages,atechniquepopularincitingblockquoteswithenlargedquotationmarksinthebeginningandattheendofthequote.Butwithoutusingbackgroundimages.
[*]FACEisaninterestingjavascript-powered/CSS-controlledpageanimationtechnique.
[*]DefiningCSSconstantsusingPHPisagoodarticleonusingPHPtoallowconstants(’variables’)inCSS.ForinstanceyoucanusethistechniquetodefinearepetitivecolorinCSSasavariable.Thatwayyouonlyneedtodeclareitonceandonlychangethatoneinstanceshouldyouwanttochangethatcolor.Veryhandy.
[*]24wayshasagoodarticleonusingz-indexattribute.
[*]apples-to-oranges.comhasafantastictutorialonhowtocreategreatlookingbargraphswithCSS
[*]ImagemapfordetailedinformationshowcasesuseofCSStoprovideanimagewithmouse-over-sectionfordetailednotes.
[*]Fromthe“HowtheheckdidImissthisdepartment:cssQueryapowerfulcross-browserJavaScriptfunctionthatenablesqueryingofaDOMdocumentusingCSSselectors.AllCSS1andCSS2selectorsareallowedplusquiteafewCSS3selectors.
[*]Bulletprooflogosviasimplebits
[*]CssColorChart
[*]Checkmarkingvisitedlinks
[*]CSSGradientsDemo—creatinggradientbackgroundeffectinCSSusingserver-sideconstantstechniquedevelopedbuShaunInman.
[*]CreatingsstarratingusingCSS
[*]CSSStarRatingPartDeuxisafollow-uptotheaforementionedtechniquethataddsthestarting“state.
[*]Andhere’sanexternalarticlewhichwrapsitallupwithatutorialonhowtouseCSSstarratingwithPHPanddatabase.
[*]ImagePlacementTechnique—Yes.Not“replacementbut“placement.
[*]FooterStick—howtoforcethefooterofawebpagetosticktothebottomoftheviewport.
[*]ShaunInman’sCSS-SSV—usingPHPvariablesinCSS.
[*]CSSscrollboxfadeusingalpha-channelPNG
[*]Stylingvisitedlinkswith:afterpseudoclass
[*]FootnoteswithCSSandJS
[*]RestaurantmenulayoutinCSSviaweb-graphics.com
[*]CSSscaleimage—usingemvaluestoscaletheimagesinCSS.viabigbaer.com
[*]Slantastic—createirregularshapedboxes.
[*]yDSF-RobustCSSDropShadows
[*]CSSslidingphotogallery—aninterestingwaytopresentequal-sizedimagesonmousehover
[*]alsacreations.com—NicecollectionofCSStutorialsthatcoversmostofthebasics.
[*]UsingCSSselectorstoapplyJavascriptfunctionality—‘clickheretodelete’demo
[*]Flickr-styleimagemapwithonlyCSS
[*]WebColorSchemes—viareturnofdesign.com
[*]Makingthejumptotablelessdesign—AndyBudd’spresentationat@media2005.
[*]CSSHelpPile
[*]SimpleClearingofFloats—variousmethodsofclearingfloats.
[*]Visitedlinksstyling—viawebdesign.maratz.com.
[*]mandarindesign’stexttricks.
[*]SweetcollectionofCSShow-tos—viamaratz.com
[*]HoverHelp—DHTML/CSStooltipsonhover.
[*]How-to:GivingToHiram?masthead—NicemastheaddesigninCSS.viacameronmoll.com
[*]:focusand:not
9rules.com会商了两个很少见的CSS伪类。
[*]welstyled.com—CSS文章和小贴士包含min-heighthack,“theunderscorehack,“singlelineverticalcentering,“photocards等等
[*]CouloirSlideshowScript—错！这不是flash。这是纯javascript/CSS编写的产物。
[*]WASPlistsomeinternationalsitesthatareinspiredbyCSSZenGardenProject
[*]用CSS的border属性来创立斜边
</p>
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人. 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 滚动条)层属性--溢出(visible/hidden/scroll/auto)
页:
[1]