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

當(dāng)前位置:首頁 > 北京網(wǎng)站建設(shè) > 網(wǎng)站建設(shè)技術(shù)CSS布局心得
北京網(wǎng)站制作 網(wǎng)站建設(shè)公司 網(wǎng)站搭建 網(wǎng)站制作公司 企業(yè)建站 網(wǎng)站設(shè)計(jì)公司 網(wǎng)站開發(fā) 網(wǎng)站設(shè)計(jì) 北京網(wǎng)站設(shè)計(jì) 網(wǎng)頁設(shè)計(jì)公司 常見問題 高端網(wǎng)站建設(shè) 企業(yè)網(wǎng)站建設(shè) 品牌網(wǎng)站建設(shè) 網(wǎng)頁設(shè)計(jì)模板 網(wǎng)頁設(shè)計(jì)與制作 網(wǎng)站建設(shè)多少錢 網(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)站 開發(fā)網(wǎng)站 網(wǎng)站建設(shè)開發(fā) 網(wǎng)站開發(fā)公司 網(wǎng)頁制作 搭建網(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ì)與開發(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無關(guān)的代碼,將更利于我們分析,你可以從中了解到別人是怎么做的,更深一點(diǎn),你可以考慮為什么要這樣做,當(dāng)然它們做的也不一定全對(duì),就算淘寶,我發(fā)現(xiàn)它們的CSS里面也有不少的多余代碼,我曾經(jīng)從淘寶的網(wǎng)頁代碼里面學(xué)到不少的東西,我把基本的框架保留下來,然后分析,并且我將我的分析記錄了下來.

2.練習(xí)方式

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

3.一本手冊(cè)

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

4.多寫多練

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

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

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

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

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

《css網(wǎng)站布局實(shí)錄》較新的一本標(biāo)準(zhǔn)化著作。告訴你怎么去寫符合標(biāo)準(zhǔn)的xhtml和css代碼,告訴你一些常見布局和頁面效果的代碼是什么樣子。這本書很適合初學(xué)者,基本上都是針對(duì)實(shí)例的布局、效果的實(shí)際操作,比較系統(tǒng)的講述了如何進(jìn)行標(biāo)準(zhǔn)化網(wǎng)站制作。這本書只是在講具體的實(shí)現(xiàn),關(guān)于標(biāo)準(zhǔn)化的概念、網(wǎng)站重構(gòu)的目標(biāo)這些指導(dǎo)實(shí)際操作的理念性東西幾乎沒有。可以在學(xué)習(xí)這本書之后讀一下《網(wǎng)站重構(gòu)》,二者結(jié)合起來學(xué)習(xí)效果不錯(cuò)。目前的版本可能因?yàn)闀r(shí)間問題,校對(duì)很倉促,有不少錯(cuò)別字和有問題的句子沒,但涉及到代碼到?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)化有著重要的意義。通過本書的學(xué)習(xí)可以深入理解瀏覽器如何解析屬性的規(guī)則和定義,為準(zhǔn)確實(shí)現(xiàn)設(shè)計(jì)意圖提供保障。

《html和xhtml權(quán)威指南》應(yīng)該是一本權(quán)威的工具書,沒有必要通讀,可以在實(shí)際設(shè)計(jì)制作過程中參考。詳細(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í)必須訪問并且認(rèn)真閱讀的網(wǎng)站。包含教程、資訊、參考資料等重要信息。

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

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

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


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

讀寫

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

改動(dòng)

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

睡覺

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

收藏

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

實(shí)踐

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