北京網(wǎng)站建設(shè)多年網(wǎng)站建設(shè)經(jīng)驗(yàn),依托強(qiáng)大的服務(wù)優(yōu)勢(shì),為您提供專業(yè)的北京網(wǎng)站建設(shè)服務(wù)

當(dāng)前位置:首頁(yè) > 北京網(wǎng)站建設(shè) > 網(wǎng)站建設(shè)技術(shù)CSS布局心得
北京網(wǎng)站制作 網(wǎng)站建設(shè)公司 網(wǎng)站搭建 網(wǎng)站制作公司 企業(yè)建站 網(wǎng)站設(shè)計(jì)公司 網(wǎng)站開(kāi)發(fā) 網(wǎng)站設(shè)計(jì) 北京網(wǎng)站設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì)公司 常見(jiàn)問(wèn)題 高端網(wǎng)站建設(shè) 企業(yè)網(wǎng)站建設(shè) 品牌網(wǎng)站建設(shè) 網(wǎng)頁(yè)設(shè)計(jì)模板 網(wǎng)頁(yè)設(shè)計(jì)與制作 網(wǎng)站建設(shè)多少錢(qián) 網(wǎng)站設(shè)計(jì)與制作 網(wǎng)站建設(shè)費(fèi)用 做網(wǎng)站 做網(wǎng)站公司 高端網(wǎng)站設(shè)計(jì) 網(wǎng)站建設(shè)方案 網(wǎng)站建設(shè)制作 北京網(wǎng)站建設(shè) 網(wǎng)站建設(shè)知識(shí) 網(wǎng)站建設(shè)優(yōu)化 網(wǎng)站建設(shè)空間 建設(shè)網(wǎng)站 制作網(wǎng)站 設(shè)計(jì)網(wǎng)站 開(kāi)發(fā)網(wǎng)站 網(wǎng)站建設(shè)開(kāi)發(fā) 網(wǎng)站開(kāi)發(fā)公司 網(wǎng)頁(yè)制作 搭建網(wǎng)站 網(wǎng)站設(shè)計(jì)制作 網(wǎng)站設(shè)計(jì)費(fèi)用 企業(yè)網(wǎng)站設(shè)計(jì) 公司網(wǎng)站建設(shè) 公司網(wǎng)站設(shè)計(jì) 公司網(wǎng)站制作 企業(yè)做網(wǎng)站 網(wǎng)站設(shè)計(jì)與開(kāi)發(fā) 網(wǎng)站建設(shè)備案

網(wǎng)站建設(shè)技術(shù)CSS布局心得

作者:鵬飛網(wǎng)絡(luò)   時(shí)間:2008-12-25   分類:北京網(wǎng)站建設(shè)


1.學(xué)習(xí)方式

我以為,看別人的代碼是一個(gè)非常好的學(xué)習(xí)方式(前提是你需要有點(diǎn)基礎(chǔ)知識(shí)),在查看別人的代碼時(shí)可以去除一些重復(fù)的,或者一些于css無(wú)關(guān)的代碼,將更利于我們分析,你可以從中了解到別人是怎么做的,更深一點(diǎn),你可以考慮為什么要這樣做,當(dāng)然它們做的也不一定全對(duì),就算淘寶,我發(fā)現(xiàn)它們的CSS里面也有不少的多余代碼,我曾經(jīng)從淘寶的網(wǎng)頁(yè)代碼里面學(xué)到不少的東西,我把基本的框架保留下來(lái),然后分析,并且我將我的分析記錄了下來(lái).

2.練習(xí)方式

在了解到一些基本的布局方式,以及一些容器的屬性之后,可以嘗試自己,編寫(xiě)一些簡(jiǎn)單的布局,遇到出現(xiàn)問(wèn)題的時(shí)候,可以在google搜索一下,或者想\象理想論壇以及其他一些討論標(biāo)準(zhǔn)化的論壇詢問(wèn)一下,會(huì)有很多好心人的哦

3.一本手冊(cè)

在遇到問(wèn)題的時(shí)候或者對(duì)某個(gè)屬性不是很了解,或者對(duì)于屬性的兼容性不太清楚的時(shí)候,這就有很大的作用了

4.多寫(xiě)多練

你發(fā)現(xiàn)自己多寫(xiě)了幾個(gè)布局,或者出了一些問(wèn)題并解決后,你已經(jīng)基本掌握了布局的要點(diǎn)了.

如何學(xué)習(xí)標(biāo)準(zhǔn)化

1、幾本書(shū)、幾個(gè)網(wǎng)站、幾篇貼子、幾個(gè)blog

《網(wǎng)站重構(gòu)》掀起國(guó)內(nèi)web標(biāo)準(zhǔn)熱潮的第一本相關(guān)著作。理論性質(zhì)多一些,全書(shū)涉及到具體操作和代碼的部分很少。新手初次閱讀很可能覺(jué)得沒(méi)有實(shí)際用途。建議在閱讀學(xué)習(xí)《css網(wǎng)站布局實(shí)錄》有了一定的技術(shù)基礎(chǔ)了再回頭學(xué)習(xí),反思自己之前學(xué)習(xí)和設(shè)計(jì)過(guò)程中的問(wèn)題,這樣才能有效地提高。

《樣式表中文手冊(cè)》必備的工具,我一般放在桌面隨時(shí)查詢。里面提供了詳細(xì)的使用說(shuō)明和實(shí)例。

《css網(wǎng)站布局實(shí)錄》較新的一本標(biāo)準(zhǔn)化著作。告訴你怎么去寫(xiě)符合標(biāo)準(zhǔn)的xhtml和css代碼,告訴你一些常見(jiàn)布局和頁(yè)面效果的代碼是什么樣子。這本書(shū)很適合初學(xué)者,基本上都是針對(duì)實(shí)例的布局、效果的實(shí)際操作,比較系統(tǒng)的講述了如何進(jìn)行標(biāo)準(zhǔn)化網(wǎng)站制作。這本書(shū)只是在講具體的實(shí)現(xiàn),關(guān)于標(biāo)準(zhǔn)化的概念、網(wǎng)站重構(gòu)的目標(biāo)這些指導(dǎo)實(shí)際操作的理念性東西幾乎沒(méi)有。可以在學(xué)習(xí)這本書(shū)之后讀一下《網(wǎng)站重構(gòu)》,二者結(jié)合起來(lái)學(xué)習(xí)效果不錯(cuò)。目前的版本可能因?yàn)闀r(shí)間問(wèn)題,校對(duì)很倉(cāng)促,有不少錯(cuò)別字和有問(wèn)題的句子沒(méi),但涉及到代碼到?jīng)]有發(fā)現(xiàn)錯(cuò)誤。

《css權(quán)威指南》詳細(xì)闡述CSS1.0每個(gè)屬性的規(guī)則和定義,并且展望了CSS2.0許多誘人的東西。對(duì)實(shí)現(xiàn)web標(biāo)準(zhǔn)化有著重要的意義。通過(guò)本書(shū)的學(xué)習(xí)可以深入理解瀏覽器如何解析屬性的規(guī)則和定義,為準(zhǔn)確實(shí)現(xiàn)設(shè)計(jì)意圖提供保障。

《html和xhtml權(quán)威指南》應(yīng)該是一本權(quán)威的工具書(shū),沒(méi)有必要通讀,可以在實(shí)際設(shè)計(jì)制作過(guò)程中參考。詳細(xì)的講述了html和xhtml的規(guī)則定義使用技巧。

《javascript權(quán)威指南》作為行為層的主要技術(shù),不學(xué)習(xí)javascript就不能完整地學(xué)習(xí)web標(biāo)準(zhǔn)。

網(wǎng)站設(shè)計(jì)師接觸web標(biāo)準(zhǔn)化學(xué)習(xí)必須訪問(wèn)并且認(rèn)真閱讀的網(wǎng)站。包含教程、資訊、參考資料等重要信息。

渡?硐氡曜薊?ò?lt;/a> 這個(gè)不用說(shuō)吧,對(duì)幾位版主熱心勤勞在此致敬。不少牛人潛水與此。但近期的學(xué)習(xí)瘴?韻愿≡輳?揮猩釗肜斫饌A粼赾ss表現(xiàn)層次的朋友較多。

csser.org 這個(gè)網(wǎng)站不知道怎么關(guān)掉了……有段時(shí)間不去看了,等待站長(zhǎng)再次開(kāi)放吧。

網(wǎng)易 作為門(mén)戶網(wǎng)站里較早采用web標(biāo)準(zhǔn)的站點(diǎn)之一,其新版本很值得研究。


2、如何學(xué)習(xí)

讀寫(xiě)

讀書(shū)讀上面我推薦的貼子、網(wǎng)站和blog;ヂ(lián)網(wǎng)的宗旨在于共享和傳播,那些接觸技術(shù)比較早的理解和實(shí)踐比較深入的朋友給我們提供經(jīng)驗(yàn)和教程。要靜下心來(lái),不能僅僅為了一個(gè)效果或者一個(gè)布局的實(shí)現(xiàn)去找答案。而是去理解教程給我們帶來(lái)的實(shí)現(xiàn)思路。要系統(tǒng)地讀書(shū)也要針對(duì)性的搜集某個(gè)問(wèn)題的方法去總結(jié)提取。讀到的時(shí)候就要寫(xiě),寫(xiě)一些代碼片斷,一些布局結(jié)構(gòu),一些效果的實(shí)現(xiàn)。哪怕是照著書(shū)敲出代碼來(lái),加深記憶和理解,效果要比單純的度過(guò)效果要好得多。

改動(dòng)

改,不是抄襲。把別人的網(wǎng)站另存下來(lái),改動(dòng)其中的部分內(nèi)容,看看頁(yè)面顯示有什么變化,在這些變化中去理解你所改動(dòng)部分代碼再實(shí)現(xiàn)頁(yè)面效果中起到了什么作用。這是一個(gè)很重要的學(xué)習(xí)方法。你看到的效果變化來(lái)源于你的改動(dòng),這本身就是一個(gè)加深記憶和理解的過(guò)程。另外一種改法就是把復(fù)雜的頁(yè)面簡(jiǎn)單化,簡(jiǎn)單到能演示效果為主,代碼少了看起來(lái)清晰有利于學(xué)習(xí);蛘甙押(jiǎn)單的布局填充內(nèi)容之后看頁(yè)面怎么顯示,會(huì)不會(huì)影響到布局,自適應(yīng)的還是固定大小的,超出固定大小的內(nèi)容hidden了還是流向了結(jié)構(gòu)之外?有沒(méi)有什么Bug?青蛙用永遠(yuǎn)逮不到一個(gè)安安靜靜站在那里的蜻蜓,只有蜻蜓飛起來(lái)了青蛙才能判斷才能捕食。

睡覺(jué)

睡覺(jué)前的思考。在顯示器之外去思考之前學(xué)習(xí)到的東西,要有一定的距離和空間高度去看待去思考,比如今天寫(xiě)的布局是不是合理,有沒(méi)有必要這樣復(fù)雜,如果把浮動(dòng)改成絕對(duì)定位呢。等等,就像作平面設(shè)計(jì)一樣,有時(shí)候椅子往后一仰,稍稍的遠(yuǎn)離屏幕,對(duì)之前的細(xì)節(jié)處理就能有一個(gè)全新的認(rèn)識(shí)。

收藏

好記性不如爛筆頭,總?cè)グl(fā)帖提問(wèn)也不是辦法。把看到的有用的教程收集起來(lái)分類整理,比如布局代碼、導(dǎo)航特效、瀏覽器兼容hack寫(xiě)法等等。建立自己的文檔庫(kù),時(shí)間久了整理整理,如果有合適的條件不要忘記和朋友們分享。

實(shí)踐

作一個(gè)完整的網(wǎng)站/網(wǎng)頁(yè)項(xiàng)目,未必要復(fù)雜或者龐大。但至少要有一個(gè)完整的頁(yè)面,盡可能用熟悉的技術(shù)去實(shí)現(xiàn)。檢驗(yàn)自己、發(fā)現(xiàn)問(wèn)題給自己繼續(xù)學(xué)習(xí)的動(dòng)力。