网站首页  注册会员  本站免费电影 留言板  繁體中文

 

您现在的位置: 陈鹏个人网站 >> 电脑应用 >> 网络应用 >> 网页制作 >> 正文
 

|
闂傚倸鍊搁崐鎼佸磹閹间礁纾归柣鎴eГ閸婂潡鏌ㄩ弴妤€浜惧銈庝簻閸熸潙鐣疯ぐ鎺濇晪闁告侗鍨伴弫鎼佹⒒娓氣偓閳ь剛鍋涢懟顖涙櫠閹殿喚纾奸弶鍫涘妼濞搭喗顨ラ悙瀛樺磳妤犵偞甯掗埞鎴﹀醇濠靛洤鈧垶姊虹拠鍙夊攭妞ゎ偄顦叅婵☆垳鍘ч崹婵嬫煙閹规劦鍤欑紒鐘叉贡閹叉悂鎮ч崼婵呭垔闂佽桨绀侀崯鎾蓟閵娿儮鏀介柛鈩兠▍锝嗙節绾版ê澧插┑鐐诧工椤繒绱掑Ο璇差€撻梺鍛婄☉閿曘儵宕曢幘缁樷拺闁告縿鍎卞▍蹇涙煕鐎n亷宸ラ柣锝囧厴楠炲洭顢涘Ο瑙勭潖闂備礁婀遍崕銈夊垂閼稿灚缍囬柛顐犲劜椤ュ﹥銇勯幇鈺佺仾濠㈣泛瀚伴弻鐔割槹鎼淬垹娈岄梺瀹犳椤﹀灚鎱ㄩ埀顒勬煃閳轰礁鏆為柣婵囧▕濮婄粯鎷呴搹骞库偓濠囨煕閹惧绠為柟顔惧厴婵$兘鍩℃担鍝勫箞闁诲骸鍘滈崑鎾绘煕閺囥劌鍘撮柟閿嬫そ濮婂宕掑鍗烆杸缂備礁顑嗙敮锟犲极瀹ュ绫嶉柛顐ゅ枔閸樼敻姊洪崨濠傜仧闁稿﹥鐗滈埀顒佺啲閹凤拷
|
缂傚倸鍊搁崐鎼佸磹閹间礁纾归柣鎴eГ閸ゅ嫰鏌涢锝嗙闁诡垳鍋ら獮鏍庨鈧俊濂告煟椤撶噥娈滄鐐寸墪鑿愭い鎺嗗亾濠德ゅ亹缁辨帡鍩€椤掑嫬纾兼繛鎴炴皑椤旀洟姊洪悷閭﹀殶闁稿﹥鍨甸~婵堟崉閸濆嫬娈ら梺鐟板悑閻n亪宕濆澶嬪亗闊洦绋撻崣鎾绘煕閵夘喚浜介柛顐犲劚绾惧鏌熼幆褏锛嶉柡鍡畵閺屾盯濡烽姀鈩冪彇閻庤鎸风欢姘潖婵犳艾纾兼繛鍡樺焾濡差噣姊哄Ч鍥р偓鏇灻洪妶澶堚偓鍛附缁嬭鈺呮煃閸濆嫬鈧ǹ鈻撻幋锔解拺闁告挻褰冩禍婵囩箾閸欏澧电€规洖缍婂畷鎺楁倷鐎电ǹ寮抽梻浣虹帛濞叉牠宕愰崷顓涘亾濮樼偓瀚�
|
婵犵數濮烽弫鍛婃叏閻戣棄鏋侀柟闂寸绾剧粯绻涢幋娆忕仾闁稿鍊濋弻鏇熺箾瑜嶉幊搴ㄥ汲濡ゅ懏鈷戠紒瀣硶閻忛亶鏌涚€n偆銆掔紒顔肩墦瀹曟﹢顢欓悾灞藉笚闂備礁鎲$换鍌溾偓姘煎墴閸┾偓妞ゆ帊鐒﹂崐鎰偓瑙勬礃缁捇銆佸Δ鍛妞ゆ垼濮ょ€氬ジ姊洪懡銈呅㈡繛娴嬫櫇娴滅ǹ鈻庨幘宕囶槱闂侀潻瀵岄崢鍓у婵傚憡鐓犵痪鏉垮船婢т即鎮介娑氥€掔紒杈ㄥ浮瀵噣宕掑顓犱邯闁诲氦顫夊ú鏍Χ閸涘﹣绻嗛柣鎴f鍞悷婊冪箰閻g兘宕奸弴鐔叉嫽婵炶揪缍€婵倗娑甸崼鏇熺厱闁挎繂绻掗悾鍨殽閻愯尙绠婚柡浣规崌閺佹捇鏁撻敓锟�
|
闂傚倸鍊搁崐鎼佸磹妞嬪海鐭嗗〒姘e亾妤犵偞鐗犻、鏇氱秴闁搞儺鍓氶悞鑲┾偓骞垮劚閹虫劙鏁嶉悢鍏尖拺闁革富鍘奸。鍏肩節閵忊槄鑰跨€规洖缍婂畷鎺戔槈閺嶏妇鐩庨梻浣告惈缁夋煡宕濆畝鍕€跨憸鐗堝笚閻撴盯鎮楅敐搴濋偗闁告瑥瀚伴弻锛勪沪閻愵剛顦紓浣哄У缁嬫帞鎹㈠┑瀣闁靛⿵濡囪ぐ鎾⒒閸屾瑨鍏岄弸顏呫亜閹存繃顥㈡鐐村姍楠炴牗鎷呴崫銉ュ绩濠电姰鍨煎▔娑㈡晝閿曞倸姹查柨鏇炲€归悡鏇㈡煏婢跺牆鐏繛鍛缁绘盯宕奸悢鎼炰虎濠殿喖锕ㄥ▍锝夊箯閻樿绠甸柟鐑樼箓婵$兘姊绘担铏瑰笡婵☆偄绻樺畷婊堟偄閼测晛绁﹂棅顐㈡处缁嬫帡寮查幖浣圭叆闁绘洖鍊圭€氾拷
|
缂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁炬儳缍婇弻鐔兼⒒鐎靛壊妲梺姹囧€ら崰妤呭Φ閸曨垰鍐€妞ゆ劦婢€缁爼姊洪幖鐐插闁稿﹤娼″璇测槈閵忊剝娅嗛柣鐘叉处瑜板啰绮昏ぐ鎺撯拺闁硅偐鍋涙俊鐣岀磼鐠囪尙澧︾€殿喖顭锋俊鍫曞炊閳哄啰鍘梺鑽ゅУ娴滀粙宕濈€n剙鍨濋柣銏犳啞閳锋垹绱掔€n偄顕滈柟鐧哥秮閺屾盯鎮╁畷鍥р拰閻庢鍠栭…鐑藉极閹剧粯鍋愰柤纰卞墻濡蹭即姊绘笟鈧ḿ褎鐏欓梺绋垮瘨閸o絽鐣烽幋锕€绠绘鐐层仒濮规姊洪崷顓炲妺闁搞劏鍩栧ḿ蹇涘醇閵夛腹鎷洪柣鐘充航閸斿苯鈻嶉幇鐗堢厵闁告垯鍊栫€氾拷
|
IT闂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣捣閻棗銆掑锝呬壕濡ょ姷鍋為悧鐘汇€侀弴銏℃櫇闁逞屽墰婢规洝銇愰幒鎾跺幗闂佺鎻徊楣兯夋径宀€妫い鎾寸☉娴滈箖姊婚崒娆戭槮闁硅绻濆畷婵嬪即閻愬秶鍠愮换婵嬪磼濡嘲浜鹃柟鐑樻尵缁♀偓濠殿喗锕╅崢楣冨矗閸℃稒鈷戠紓浣股戠粈鈧梺绋匡工濠€閬嶅焵椤掍胶鍟查柟鍑ゆ嫹
|
闂傚倸鍊搁崐鎼佸磹妞嬪海鐭嗗ù锝夋交閼板潡姊洪鈧粔鎾磼閵娧勫枑闁哄啫鐗嗙粻鏍ㄧ箾瀹割喕绨婚幆鐔兼⒑闂堟侗妯堥柛鐘愁殘缁辩偞鎯旈姀銏㈢槇闂佹眹鍨藉ḿ褎鐗庨梻浣哄帶缂嶅﹦绮婚弽褜鍤曢柛娑橈功閻熷綊鏌嶈閸撶喎顕f繝姘嵆闁靛繒濞€閸炶泛鈹戦悩鑼粵闁告梹鐗滈悷褏绱撻崒姘偓鐑芥嚄閼搁潧鍨旀い鎾卞灩闂傤垶鏌ㄥ┑鍡╂Ц闁藉啰鍠撻埀顒€绠嶉崕閬嶆偋濠婂喚鐎堕柕濞炬櫆閳锋垿鏌涘☉姗堟敾閻忓繋鍗抽弻锝夋偄閸欏鐝氶梺闈涙缁€渚€鍩㈡惔銊ョ闁哄啫鍊瑰鎴炵節閻㈤潧浠﹂柛銊ョ埣閹兘鏁冮埀顒勫煝瀹ュ顫呴柕鍫濇閹锋椽鏌i悩鍏呰埅闁告柨鑻埢宥夊箛閻楀牏鍘甸梺鍛婂灟閸婃牜鈧熬鎷�
|
闂傚倸鍊搁崐鎼佸磹閹间礁纾归柣鎴eГ閸婂潡鏌ㄩ弴妤€浜惧銈庝簻閸熸潙鐣疯ぐ鎺濇晪闁告侗鍨伴弫鎼佹⒒娓氣偓閳ь剛鍋涢懟顖涙櫠閹殿喚纾奸弶鍫涘妼濞搭喗顨ラ悙瀛樺磳妤犵偞甯掗埞鎴﹀醇濠靛洤鈧垶姊虹拠鍙夊攭妞ゎ偄顦叅婵☆垳鍘ч崹婵堚偓鍏夊亾闁告洦鍓欐禒濂告⒑缂佹ê鐏辨俊顐㈠閹瑦绻濋崶銊у帗闂佸憡绻傜€氼剟寮搁敂鍓х<閺夊牜鍋勯惃铏圭磼鏉堛劍宕岀€规洘甯掗~婵嬵敄閽樺澹曢梺褰掓?閻掞箓宕戠€n喚鍙撻柛銉e妽閳锋劙鏌涘▎蹇曠闁哄矉缍佹慨鈧柍鎯版硾缂嶅﹪骞嗙仦杞挎棃宕ㄩ鎯у汲闂備胶绮ú鏍磹閸︻厸鍋撳鐐
|
闂傚倸鍊搁崐鎼佸磹瀹勬噴褰掑炊瑜忛弳锕傛煟閵忊懚鍦玻濡ゅ懏鐓欓柟娈垮枛椤eジ鏌涚€e墎绡€闁哄本娲樺鍕醇濠靛棗顥欐繝鐢靛仦閸ㄦ儼褰滈梺琛″亾濞寸姴顑嗛崐鐢告煥濠靛棗鏆欏┑锛勫厴閺屾稓鈧綆鍋呭畷宀€鈧娲樼敮锟犲箖濞嗘挸钃熼柕澶堝劜閺嗩亪姊婚崒娆戭槮闁圭⒈鍋勭叅闁靛ň鏅涚壕濠氭煟閹邦喖鍔嬮柛濠傜仛閵囧嫰骞掗崱妞惧闂備礁鐤囬~澶愬垂閸ф绠栨繛鍡樻尭閻顭块懜鐬垿鏁嶆笟鈧缁樻媴鐟欏嫬浠╅梺鍛婃煥闁帮絽鐣锋导鏉戝唨鐟滄粓宕甸弴鐐╂斀闁绘ê纾。鏌ユ煛閸涱喗鍊愰柡灞诲姂閹倝宕掑☉姗嗕紦
|
   
专 题 栏 目
 濠电姷鏁告慨鐑藉极閸涘﹥鍙忛柣鎴f閺嬩線鏌熼梻瀵割槮缁惧墽绮换娑㈠箣閻愬灚鍣х紓浣稿閸嬨倝寮诲☉銏犖ㄦい鏃傚帶椤晝绱撴担鎻掍壕闂佸壊鍋嗛崰鎾跺姬閳ь剟姊婚崒姘卞缂佸甯¢弫宥夊籍閸喓鍘鹃梺鍝勵槼濞夋洘绂掗姀銈嗩梿濠㈣埖鍔栭悡銉︾節闂堟稒顥為柛锝嗘そ閹綊骞囬妸銉モ拤闂侀潧娲ょ€氫即宕洪敓鐘茬闁靛ǹ鍎辩粻锝夋⒒娴g瓔鍤冮柛鐘崇洴閿濈偞寰勯幇顒傤唵闂佸憡绋掑ḿ娆愬閻樼粯鐓忓鑸得悘锝囩磼閳ь剚绻濋崟顓狅紳闂佺ǹ鏈悷褔藝閿斿浜滈柨鏃囶嚙閻忥箓鏌熼鐭亪鍩為幋鐘亾閿濆簼绨介柛娆屽亾婵犵數濮伴崹濂稿春閺嶎厼绀夐柡鍥╁Х娑撳秴鈹戦悩宕囶暡闁稿﹤鐏氱换娑㈠箣閻戝棔鐥銈呯箰濡藟濮樿埖鐓曢柟閭﹀墯閳绘洘绻涢幘鎰佺吋闁哄本娲熷畷鐓庘攽閸埄鍞洪梺璇茬凹缁插宕戦幇顔筋潟闁圭儤顨忛弫濠囨煟閿濆懏婀伴柛锛卞喚娓婚柕鍫濇缁岃法绱撳鍕槮闁伙絿鍏橀獮鍥偋閸繀绨婚梻浣瑰劤缁绘锝炴径濠庣唵闁硅揪闄勯埛鎺懨归敐鍛暈闁诡垰鐗婄换娑氫沪閸屾艾顫囬悗瑙勬磻閸楁娊鐛Ο鑲╃<婵☆垵妗ㄧ划褔姊绘担鑺ョ《闁革綇绠撻獮蹇涙晸閿燂拷
相 关 文 章

QQ空间最新免费鼠标样式
通通透透玩转QQ空间背景
让CSS样式表优化更整洁而
IE对网页中引入CSS样式表
在DW中使用CSS样式表来设
CSS样式表创建美妙绝伦的
网页制作中CSS样式表的十
Firefox与IE在CSS样式表
利用CSS样式表改善网站可
让网站链接样式千奇百怪

 
让样式表CSS代码更加专业规范           
让样式表CSS代码更加专业规范
作者:陈鹏 文章来源:eNet 点击数:101 更新时间:2009-9-12 9:13:29
 




 

每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了。但是CSS还可以更好吗?虽然有多种这方面的技巧,得开始用这五个方面改进你的CSS,会让你显得更加专业,也能使代码有好!

  一、重置

  首先,很认真的告诉你,总是要重置某些分类。无论你是使用 Eric Meyer Reset、YUI Reset,或者你自己编写的重置代码,只要使用就对了。

  它能很简单的移除所有元素的填充(padding)和边距(margin):

  html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,

  pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

  Eric Meyer Reset和YUI Reset都是非常强大的,但是对于我而言,它们走的太远了。我觉得你最终需要重置一切,然后重新定义所有元素的属性。这就是为什么Eric Meyer推荐更有效的使用(重置样式表),而你不要只是使用他的重置样式表,将它拖放到你的项目中。调整它(的重置样式表),建立属于自己的重置样式表。

  噢,请停止使用:

  * { margin: 0; padding: 0; }

  花更多的时间去制作它,当你移除了填充(padding)你认为单选按钮会发生什么变化?表单元素有时能够做些时髦的事情,所以最有效的方式就是将他们独立。

  二、排序

  一个小的测试:这个例子就是要让你思考如何更快的找到右边距属性?

  Example#1

  div#header h1 {

  z-index: 101;

  color: #000;

  position: relative;

  line-height: 24px;

  margin-right: 48px;

  border-bottom: 1px solid #dedede;

  font-size: 18px;

  }

  Example#2

  div#header h1 { border-bottom: 1px solid #dedede; color: #000; font-size: 18px; line-height: 24px; margin-right: 48px; position: relative; z-index: 101;}

  你不能告诉我Example#2不能更快的找到右边距属性。根据字母排序你的元素属性。一致的创建你的CSS,将帮助你节省花费在寻找一个特殊属性的时间。

  我知道一些人用这样的方法去组织代码,其他人又用另一种方法去组织,但是在我的公司,我们协商一致做出决定,所有的代码都将按照字母排序来组织。通过这样组织代码与其他人协同工作一定是有帮助的。当我碰到属性没有按照字母排序的层叠样式表我每一次都会退缩。

  三、组织

  你应该组织你的样式表以致相关的内容靠在一起,更简单的找到想要的。使用更有效的注解。举个例子,这是我如何构造我的层叠样式表:

  /*****Reset*****/移除元素的填充(padding)和边距(margin)。

  /*****Basic Elements*****/定义基本元素的样式: body, h1-h6, ul, ol, a, p, 等.

  /*****Generic Classes*****/定义简单的风格,好像浮动的某一侧, 移除元素的下边距, 等当然,它们大部分都与我们希望的语义不相关,但是它们是高效处理代码所必须的。

  /*****Basic Layout*****/定义基本的模板: header, footer等. 帮助定义网页布局的基本元素

  /*****Header*****/定义所有Hearder元素

  /*****Content*****/定义所有内容框内的元素

  /*****Footer*****/定义所有Footer的元素

  /*****Etc*****/定义其他的选择器。通过注解和归类相似元素的分组,将更快的找到你想要的。

  四、一致性

  无论你决定使用什么方式去编写代码,保持一致。我已经对全部放在1行VS多行的CSS编写编写方式的争论感到乏味和疲倦。这是不需要争辩的。每个人都有自己的观点,所以选择一种你喜欢的工作方式,并在所有的样式表中保持一致。

  就我个人而言,我将使用两者结合的方式。如果一个选择器超过了3个属性,我将截断它采用多行的方式编写。

  div#header { float: left; width: 100%; }

  div#header div.column {

  border-right: 1px solid #ccc;

  float: rightright;

  margin-right: 50px;

  padding: 10px;

  width: 300px;

  }

  div#header h1 { float: left; position: relative; width: 250px; }

  所以找到你喜欢的工作方式然后保持一致。

  五、从正确的地方开始

  在完成标记语言之前不要去尝试靠近你的样式表。

  当我准备分割一张网页的时候,创建CSS文件之前,我需要预览并且标记body开标签到body的闭合标签之间的所有文档。我不会增加额外的DIV ,ID,或者类选择器。我将会添加一些一般的DIV,就好像hearder、content、footer.因为我知道这些东西是现实存在的。

  通过先标记文档,你将不会碰到本已注定的divities1和classitis2麻烦!/*You only need to add in that stuff once you have begun to write the CSS and realize that you are going to need another hook to accomplish what you are trying to achieve.*/(原文未译)。

  利用CSS子选择器指定子元素;不要只是机械的给元素添加类或者ID选择器。记住:没有一个良好的格式化文档(或者标记结构)CSS是无价值的。

  总结

  这些能够帮助我更好的完成CSS代码的编写。但是这并不意味着这张列表的结束,接下来我将会去带来一些其他的与大家分享,欢迎您关注webjx.com。

  

文章录入:陈鹏    责任编辑:陈鹏 
  • 上一篇文章:

  • 下一篇文章:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
     
     
     
     
     

    Copyright © 2007 - 2009 chenpeng123.com All Rights Reserved
    本站所有文章,软件等均来自网络收集,不代表本站观点,仅供学习和研究使用。如有侵犯您的版权,请联系我们,本站将立即删除。
    鲁ICP备07014697号
    你是本站第 位访客
    51La