仓酷云

标题: 来看看：匡助你进修CSS的在线CSS东西网站 [打印本页]

---

作者: 兰色精灵    时间: 2015-1-15 23:25
标题: 来看看：匡助你进修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技术的网页，对于搜索引擎的收录更加友好。

---

作者: 老尸    时间: 2015-1-17 22:38
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

---

作者: 深爱那片海    时间: 2015-1-26 22:13
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

---

作者: 飘飘悠悠    时间: 2015-2-5 03:26
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

---

作者: 简单生活    时间: 2015-2-11 03:51
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

---

作者: 小妖女    时间: 2015-3-1 21:25
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

---

作者: 不帅    时间: 2015-3-11 01:03
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

---

作者: 再见西城    时间: 2015-3-17 18:08
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

---

作者: 兰色精灵    时间: 2015-3-24 20:14
滚动条)层属性--溢出(visible/hidden/scroll/auto)

---

欢迎光临 仓酷云 (http://www.ckuyun.com/)

Powered by Discuz! X3.2