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

2021-05-24    分類: 網(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)頁(yè)代碼里面學(xué)到不少的東西,我把基本的框架保留下來,然后分析,并且我將我的分析記錄了下來.

2.練習(xí)方式

在了解到一些基本的布局方式,以及一些容器的屬性之后,可以嘗試自己,編寫一些簡(jiǎn)單的布局,遇到出現(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)》掀起國(guó)內(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代碼,告訴你一些常見布局和頁(yè)面效果的代碼是什么樣子。這本書很適合初學(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í)際操作的理念性東西幾乎沒有??梢栽趯W(xué)習(xí)這本書之后讀一下《網(wǎng)站重構(gòu)》,二者結(jié)合起來學(xué)習(xí)效果不錯(cuò)。目前的版本可能因?yàn)闀r(shí)間問題,校對(duì)很倉(cāng)促,有不少錯(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í)間不去看了,等待站長(zhǎng)再次開放吧。

網(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)容,看看頁(yè)面顯示有什么變化,在這些變化中去理解你所改動(dòng)部分代碼再實(shí)現(xiàn)頁(yè)面效果中起到了什么作用。這是一個(gè)很重要的學(xué)習(xí)方法。你看到的效果變化來源于你的改動(dòng),這本身就是一個(gè)加深記憶和理解的過程。另外一種改法就是把復(fù)雜的頁(yè)面簡(jiǎn)單化,簡(jiǎn)單到能演示效果為主,代碼少了看起來清晰有利于學(xué)習(xí)?;蛘甙押?jiǎn)單的布局填充內(nèi)容之后看頁(yè)面怎么顯示,會(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寫法等等。建立自己的文檔庫(kù),時(shí)間久了整理整理,如果有合適的條件不要忘記和朋友們分享。

實(shí)踐

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

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

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

廣告

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

小程序開發(fā)