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

 

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

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

母亲节礼物 美图秀秀DIY
如何设置 Discuz!V7.0 
苹果公司发布Final Cut 
Discuz!NT v1.0正式版横
新潮流聊天工具“滴(Dii
DirectShow漏洞来了 Z武
从开源到开放Discuz!NT
Discuz!7.0正式版于12月
火狐中国版 Firefox Chi
Discuz!7.0亲自动手体验

 
实践DIV+CSS网页布局入门           
实践DIV+CSS网页布局入门
作者:陈鹏 文章来源:eNet 点击数:85 更新时间:2009-9-12 9:08:01
 




 

你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习:

  第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。

  另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、hspace、align="left"等等)束手无策,不知道该转换成对 应的什么CSS语句。当你解决了第一种问题,知道了如何结构化你的HTML,我再给出一个列表,详细列出原来的表现属性用什么CSS来代替。

  结构化HTML

  我们在刚学习网页制作时,总是先考虑怎么设计,考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。

  如果你希望你的HTML页面用CSS布局(是CSS-friendly的),你需要回头重来,先不考虑“外观”,要先思考你的页面内容的语义和结构。

  外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来,CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。

  HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义,显示在任何地方,任何网络设备上。

  开始思考



  首先要学习什么是"结构",一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块,以及每块内容服务的目的,然后再根据这些内容目的建立起相应的HTML结构。

  如果你坐下来仔细分析和规划你的页面结构,你可能得到类似这样的几块:

  标志和站点名称
  主页面内容
  站点导航(主菜单)
  子菜单
  搜索框
  功能区(例如购物车、收银台)
  页脚(版权和有关法律声明)


  我们通常采用DIV元素来将这些结构定义出来,类似这样:

  <div id="header"></div>

  <div id="content"></div>

  <div id="globalnav"></div>

  <div id="subnav"></div>

  <div id="search"></div>

  <div id="shop"></div>

  <div id="footer"></div>

  这不是布局,是结构。这是一个对内容块的语义说明。当你理解了你的结构,就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块,也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。

  根据上面讲述的,你已经知道如何结构化HTML,现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方,再指定这个块的颜色、字体、边框、背景以及对齐属性等等。

  使用选择器是件美妙的事
id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标 题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则,就可以完全不同于#content里的图片规则。

  另外一个例子是:你可以通过不同规则来定义不同内容块里的链接样式。类似这样:#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如,通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲,你的页面是由图片、链接、列表、段落等组成的,这些元素本身并不会对显示在什么网络 设备中(PDA还是手机或者网络电视)有影响,它们可以被定义为任何的表现外观。

  一个仔细结构化的HTML页面非常简单,每一个元素都被用于结构目的。当你想缩进一个段落,不需要使用blockquote标签,只要使用p标签,并对p 加一个CSS的margin规则就可以实现缩进目的。p是结构化标签,margin是表现属性,前者属于HTML,后者属于CSS。(这就是结构于表现的 相分离.)

  良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如,原先的代码<table width="80%" cellpadding="3" border="2" align="left">,现在可以只在HTML中写<table>,所有控制表现的东西都写到CSS中去,在结构化的HTML中, table就是表格,而不是其他什么(比如被用来布局和定位)。


  
热门推荐 搜遍天下 主流搜索引擎终极PK 拒绝不速之客 拆穿木马伪装七计

  亲自实践一下结构化

  上面说的只是最基本的结构,实际应用中,你可以根据需要来调整内容块。常常会出现DIV嵌套的情况,你会看到"container"层中又有其它层,结构类似这样:

  <div id="navcontainer">

  <div id="globalnav">

  <ul>a list</ul>

  </div>

  <div id="subnav">

  <ul>another list</ul>

  </div>

  </div>

  嵌套的div元素允许你定义更多的CSS规则来控制表现,例如:你可以给#navcontainer一个规则让列表居右,再给#globalnav一个规则让列表居左,而给#subnav的list另一个完全不同的表现。

  用CSS替换传统方法
  下面的列表将帮助你用CSS替换传统方法:

  HTML属性以及相对应的CSS方法
  HTML属性


  CSS方法说明
  align="left"

  align="right" float: left;

  float: right; 使用CSS可以浮动 任何元素:图片、段落、div、标题、表格、列表等等

  当你使用float属性,必须给这个浮动元素定义一个宽度。

  marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的,你可以分别指定元素的top, right, bottom和left的margin值。

  vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;

  a:visited: #339;

  a:hover: #999;

  a:active: #00f;
  在HTML中,链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器,页面不同部分的链接样式可以不一样。

  bgcolor="#FFFFFF" background-color: #fff; 在CSS中,任何元素都可以定义背景颜色,不仅仅局限于body和table元素。

  bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以设置边框(boeder),你可以分别定义top, right, bottom和left

  border="3" cellspacing="3" border-width: 3px; 用CSS,你可以定义table的边框为统一样式,也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。

  你可以使用 table, td or th 这些选择器.

  如果你需要设置无边框效果,可以使用CSS定义: border-collapse: collapse;

  <br clear="left">
  
  <br clear="right">

  <br clear="all">

  clear: left;

  clear: right;

  clear: both;
  许多2列或者3列布局都使用 float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片,你可以使用clear属性.

  cellpadding="3"

  vspace="3"

  hspace="3" padding: 3px; 用CSS,任何元素都可以设定padding属性,同样,padding可以分别设置top, right, bottom and left。padding是透明的。

  align="center" text-align: center;

  margin-right: auto; margin-left: auto;
  Text-align 只适用于文本.

  象div,p这样的块级可以通过margin-right: auto; 和margin-left: auto;来水平居中

  一些令人遗憾的技巧和工作环境


由于浏览器对CSS支持的不完善,我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS实现传统方法同样的效 果。例如块级元素有时侯需要使用水平居中的技巧,盒模型bug的技巧等等。所有这些技巧都在Molly Holzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS Hack Management》中有详细说明。

  另外一个关于CSS技巧的资源站点是Big John和Holly Bergevin的“Position is Everything”。

  理解浮动行为

  Eric Meyer的《Containing Floats》将帮助你掌握如何使用float属性布局。float元素有时候需要清除(clear),阅读《How To Clear Floats Without Structural Markup》将非常有帮助。

  更多帮助

  已有的《CSS Discussion》列表是很好的资源,它收集了一个WiKiA讨论组的信息,其中包括CSS布局总结(css- discuss.incutio.com/?page=CssLayouts),CSS 技巧总结 (css-discuss.incutio.com/?page=CssHack) 以及更多

  
热门推荐 搜遍天下 主流搜索引擎终极PK 拒绝不速之客 拆穿木马伪装七计

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

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

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