给大家带来CSS网页计划技能十则
在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。WEBJX.COM：不要说你看不懂，只是你不肯意看。：）
IthoughtIdsharesomeofmyhabitswhenitcomestodoingCSSworkandletmewarnyou,someofwhatIhavetosayisprobablyalittlecontroversial.Butwhatslifewithoutlivingitontheedge.(Yeah,IliveanexcitinglifewhenCSSisconsideredtheedge.)
pxforfontsizes-用px作为字体巨细的单元
Sacrilege,Iknow.ThereareperfectlygoodwaystogetconsistentfontsizingandIreallyshouldusethembutInternetExploreristheonlybrowserthatIcanthinkofthatdoesntresizetext.IfthemajorityofyouraudienceusesIE,thenbenicetothemanddontusepixels.Otherwise,IfigurewithIE7supportingit,pixelsarethenewems.
Whenusingpixelsizes,Ialsogettobesparinginmyusage.Ispecifyitonthebodyandanyheadersthatneedit.Inheritanceislessofanissue(howmanysiteshaveyouseenlistitemsinexplicablysmallerthantherestofthecontentlikeitwaslessimportant).
CSSdeclarationsononeline-CSS声明写在一行
Ivealwaysputmyentiredeclarationononeline.HeresanexampletoexplainwhatImean:
h2{font-size:18px;border:1pxsolidblue;color:#000;background-color:#FFF;}
h2{
font-size:18px;
border:1pxsolidblue;
color:#000;
background-color:#FFF; /*www.poluoluo.com*/
}
Thesecondonemaylookprettierbutitsuredoesnthelpmefindanything.Whenlookingforsomethinginastylesheet,themostimportantthingistheruleset(thatsthepartbeforethe{and}).Imlookingforanelement,anidoraclass.Havingeverythingononelinemakesscanningthedocumentmuchquickerasyousimplyseemoreonapage.OnceIvefoundtherulesetIwaslookingfor,findthepropertyIwantisusuallystraightforwardenoughastherearerarelythatmany.
BlockingtheStyles-代码分块
Ibreakdownmystylesheetintothreeseparateblocks.Thefirstisstraightelementdeclarations.Changethebody,somelinksstyles,someheaderstyles,resetmarginsandpaddingonforms,andsoon.ThisisusuallyasmallblockasIonlyliketoredefinewhatIneedto.Noglobalmarginandpaddingresetforme.Iclearthebodyandformandmaybeadjustparagraphifthedesignreallyneedsit.Otherwise,letthebrowserhandleit.Ifindthemoreyoutrytooverridewhatthebrowserdoes,themorestylesyouhavetoputin,whichsimplyaddstothetimetotrackdownbugsandmaintainthecode.
Afterelementdeclarations,Ihavemyclassdeclarations;thingslikeclassesforanerrormessageoracalloutwouldgohear.Iusuallyonlyhaveacoupleofthese.
Finally,themeat.Istartbydeclaringmymaincontainersandthenanystylesforelementswithinthosecontainersareindented.Ataquickglance,Icanseehowmypageisbrokendownandmakesiteasiertoknowwheretolookforthings.Illalsodeclarecontainerseveniftheydonthaveanyrules.
#content{float:left;}
#contentp{...}
#sidebar{float:left;}
#sidebarp{...}
#footer{clear:both;}
#sidebarp{...} /*www.poluoluo.com*/
BrowserSupport-扫瞄器兼容
Supportonlythelatestbrowsers.ThatmeansdroppingsupportforIE5andIE5.5.Lotsoftimeandefforttobesavedhere.NoboxmodelhacksneededforIE6.Infact,insupportingjustthemostrecentversionsofbrowsers,Iendupusingveryfewhacks.AlongwithusingveryfewhacksmeansIcanavoidshovellingdifferentstylesheetstoseparatebrowsers.Ihaveonesheet,andthatsit.AnyhacksIdousearenormallycommentedassuch.Similartotheuseofpixelmeasurements,youhavetoconsideryouraudiencebeforedroppingbrowsersupport.
ThebiggestthingformeisstilltriggeringhasLayoutinIEtodofloatcontainmentandIvebeenusingzoom:1forthat.Ilikeitbecauseitsinnocuousandshouldntmesswithanythingelse.
ContainingFloats-“包括”式浮动
Ijusttouchedonfloatcontainmentsoletsexpandonthat.Mycurrentapproachtocontainingfloatsisusingoverflow:hidden(withpossiblyzoom:1forInternetExplorer).Noclearingdivoruseof:after.Onlyworryaboutcontainingyourfloatsifyouhaveabackgroundyouaretryingtosetonyourcontainer.Theoverflowshouldbesetonthecontainer.
Keepinmindthatthecontentwithinthecontainershouldbedesignedtostaywithinthecontainer.Anythingtoobiganditllgetclipped.Shiftingthingsusingnegativemarginsoutsidethecontainerwillalsogetclipped.
UnderstandOverflow-了解与利用溢出
OverflowisusuallywherepeoplegetbitbyIE.Ifyouvegottwofloatedelementsandthecontentfromtheleftcontaineroverflowsthen,inIE,thecontainergrowsandinevitablypushestherightcontainerbelowit.Thisisusuallyasignthatyouvemessedupyourmargins,widths,orpaddingononeofthesecontainersbutFirefox(etal)wontrevealthis.Usingsomethinglikeoverflow:hiddenoroverflow:scrollonacontainercanhelppreventIEfromallowingthecontenttopushthewidthofthecontainerbutyourebetterofftryingtofixtheissueinthedesign.
AllowBlockElementstoFillTheirSpaceNaturally-同意块元素的空缺
Myruleofthumbis,ifIsetawidth,Idontsetmarginorpadding.Likewise,ifImsettingamarginorpadding,Idontsetawidth.Dealingwiththeboxmodelcanbesuchapain,especiallyifyouredealingwithpercentages.Therefore,Isetthewidthonthecontainersandthensetmarginandpaddingontheelementswithinthem.Everythingusuallyturnsoutswimmingly.
UseCSSShorthand-利用CSS属性缩写
ThismightseemlikebeatingadeadhorsebutIstillseepeopledoingreallyverbosestatementswheretheyresettingmargin-top,margin-right,margin-bottomandmargin-left.Mygeneralruleofthumbis,youcanusethelongformonlyifyouresettingoneside.Onceyouhavetosetmorethanoneside,itlltakelessbytestouseshorthand.
Inshorthand,rememberthatthepropertiesstartatthetopandworkclockwise.margin:toprightbottomleft;Itsalsohandytoknowtheshorterformsifyouhaveequalvaluesfortopandbottomorleftandright.
margin:5px10px20px;/*topleft/rightbottom_www.poluoluo.com*/
margin:10px20px;/*top/bottomleft/right*/
margin:0;/*allsides*/
Forborder,ifyouonlyhavetosetmorethanonesidedifferentlythenusetwodeclarations.Thefirsttosetallsides,andthenasecondtochangethevaluesforoneoftheproperties.
/*1pxblueborderontheleftandbottom_www.poluoluo.com*/
border:1pxsolidblue;border-width:001px1px;
AvoidUnnecessarySelectors-制止过剩的选择器
Justspecifytheminimumnumberofselectorsnecessaryforthestyle.Ifyoufindyourselfdoingulli{...}ortabletrtd{...}thenyourebeingmoreverbosethanyouneed.LIswillinevitablybeinULs(okay,IsupposetheycouldfindthemselvesinOLs,inwhichcase,bemorespecificforthosestyles)andaTDwillinevitablybeinaTRandaTABLE.
OrputtingtheelementnameinfrontofanIDselector(Example:div#navigation).Iusedtodothisbecauseitdhelpme"remember"whichelementtheIDison.Asitturnsout,Itendtousesimilarclassnamesfromprojecttoprojectandtheyinevitablyappearonthesameelements.Ialsotendtojustdoasearchtofindwheresomethingis.So,thesedays,Ijustleaveitat#navigation.
Usinglessselectorswillmeanlessselectorswillbeneededtooverrideanyparticularstyle—thatmeansitseasiertotroubleshoot.
KeepitSimple-坚持简便
Ifithasntbeenevidentthroughoutthispost,onlyaddwhenyouneedto,andthatincludeshacks.Noneedtogetanymorecomplicatedthanyouneedto.
Now,Idlovetohearsomeofyourtips.
你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。 HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器） 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。
页:
[1]