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

2021-05-24    分類: 網(wǎng)站建設(shè)

1.學習方式

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

2.練習方式

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

3.一本手冊

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

4.多寫多練

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

如何學習標準化

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

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

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

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

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

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

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

網(wǎng)站設(shè)計師接觸web標準化學習必須訪問并且認真閱讀的網(wǎng)站。包含教程、資訊、參考資料等重要信息。

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

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

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


2、如何學習

讀寫

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

改動

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

睡覺

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

收藏

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

實踐

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

本文題目:網(wǎng)站建設(shè)技術(shù)CSS布局心得
本文來源:http://www.bm7419.com/news/114933.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站收錄動態(tài)網(wǎng)站、靜態(tài)網(wǎng)站、Google

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

小程序開發(fā)