CSS文件先準(zhǔn)備還是先寫好HTML文件?_Div+CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
CSS文件先預(yù)備 還是先寫好HTML文件?網(wǎng)上有很多種答案:先寫HTML后寫CSS;先寫CSS后寫HTML;兩者同時(shí)寫。
我的準(zhǔn)則是先寫HTML打好基礎(chǔ),然后再寫CSS進(jìn)行表現(xiàn)的控制!
對(duì)于初學(xué)者我建議兩者一起寫,先寫CSS或者先寫HTML對(duì)于初學(xué)者都不是恰當(dāng)?shù)玫姆椒ā?/strong>
假如讓一個(gè)人編寫代碼,你告訴他先寫HTML,寫完后 HTML不能修改了,然后你寫CSS,假如他可以寫出來,那這個(gè)人一定是一個(gè)水平非常高的Builder了!所以對(duì)于初學(xué)者,多數(shù)情況下我建議同時(shí)編寫,具體我說一下步驟:
1、先要把站點(diǎn)建好,目錄建好,比如我們建好文件夾CSS,IMAGES,這兩個(gè)是最其本的,然后新建一個(gè)HTML文件,一個(gè)style.css一個(gè)空 的樣式表,把HTML頁連接到這個(gè)外部樣式表。
2、然后我們先寫HTML中的最基本的布局部分,都是用DIV,然后直接在DIV里加入ID或CLASS,這些 布局部分包括外套部分,頭部分,中間部分,左,中,右,版權(quán)部分等。
3、寫好這些后,這時(shí)你可以到樣式表中寫樣式,或者你在接著寫布局里的部分,我們拿頭部為例,在頭部寫入LOGO部分,NAV部分也同樣加入ID或CLASS。其它同理。
為什么說我們不可能一次性把HTML部分寫好呢,因?yàn)槿硕际强赡芊稿e(cuò)誤的,可能你的想法寫的過程就是有問題的,或者為了瀏覽器的兼容性問題,有些是你由于經(jīng)驗(yàn)的不足沒有提前預(yù)料到的,所以當(dāng)你寫樣式時(shí)發(fā)現(xiàn)了問題時(shí)就有可能要改動(dòng)你的HTML的代碼。大至的寫法就是這樣,你也可以HTML/CSS同時(shí)進(jìn)行,都是可以的,看你的習(xí)慣。我們寫代碼時(shí)很多時(shí)候是邊寫代碼邊測(cè)試,也不是說寫一句測(cè)試一句,而是寫了一段代碼后就進(jìn)行瀏覽器的測(cè)試,我是同時(shí)用IE6與FF一起測(cè)試。一個(gè)優(yōu)秀的制作師他們的代碼多數(shù)情況寫了很多時(shí)他們才測(cè)試一下,是因?yàn)橐粋(gè)人假如經(jīng)驗(yàn)多的話,他們就會(huì)知道并提前預(yù)防瀏覽器錯(cuò)誤顯示的發(fā)生了!所以他們寫代碼的速度比沒有經(jīng)驗(yàn)的人快。他們已經(jīng)經(jīng)歷過了你所要經(jīng)歷的錯(cuò)誤,你第一次碰到錯(cuò)誤的瀏覽器顯示問題你要花時(shí)間去修補(bǔ),而他們可提前防止或碰到了可立即解決問題!這就是你與他們的不同點(diǎn)之一。
初學(xué)者與高手不同點(diǎn)之處還有一個(gè)就是高手們使用了大量的快捷鍵,所以一定要記住那些常用的快捷鍵,每一個(gè)小的細(xì)節(jié)都有一點(diǎn)提高,綜合在一起就是很大的提高。
另外提高自己的水平最好的方法就是多實(shí)踐,多找一些比較好的HTML CSS的模板進(jìn)行編碼實(shí)踐,開始時(shí)要選一個(gè)簡(jiǎn)單點(diǎn)的,把頁面截圖,然后把這張圖用自己的想法還原成HTML頁面!
我的準(zhǔn)則是先寫HTML打好基礎(chǔ),然后再寫CSS進(jìn)行表現(xiàn)的控制!
對(duì)于初學(xué)者我建議兩者一起寫,先寫CSS或者先寫HTML對(duì)于初學(xué)者都不是恰當(dāng)?shù)玫姆椒ā?/strong>
假如讓一個(gè)人編寫代碼,你告訴他先寫HTML,寫完后 HTML不能修改了,然后你寫CSS,假如他可以寫出來,那這個(gè)人一定是一個(gè)水平非常高的Builder了!所以對(duì)于初學(xué)者,多數(shù)情況下我建議同時(shí)編寫,具體我說一下步驟:
1、先要把站點(diǎn)建好,目錄建好,比如我們建好文件夾CSS,IMAGES,這兩個(gè)是最其本的,然后新建一個(gè)HTML文件,一個(gè)style.css一個(gè)空 的樣式表,把HTML頁連接到這個(gè)外部樣式表。
2、然后我們先寫HTML中的最基本的布局部分,都是用DIV,然后直接在DIV里加入ID或CLASS,這些 布局部分包括外套部分,頭部分,中間部分,左,中,右,版權(quán)部分等。
3、寫好這些后,這時(shí)你可以到樣式表中寫樣式,或者你在接著寫布局里的部分,我們拿頭部為例,在頭部寫入LOGO部分,NAV部分也同樣加入ID或CLASS。其它同理。
為什么說我們不可能一次性把HTML部分寫好呢,因?yàn)槿硕际强赡芊稿e(cuò)誤的,可能你的想法寫的過程就是有問題的,或者為了瀏覽器的兼容性問題,有些是你由于經(jīng)驗(yàn)的不足沒有提前預(yù)料到的,所以當(dāng)你寫樣式時(shí)發(fā)現(xiàn)了問題時(shí)就有可能要改動(dòng)你的HTML的代碼。大至的寫法就是這樣,你也可以HTML/CSS同時(shí)進(jìn)行,都是可以的,看你的習(xí)慣。我們寫代碼時(shí)很多時(shí)候是邊寫代碼邊測(cè)試,也不是說寫一句測(cè)試一句,而是寫了一段代碼后就進(jìn)行瀏覽器的測(cè)試,我是同時(shí)用IE6與FF一起測(cè)試。一個(gè)優(yōu)秀的制作師他們的代碼多數(shù)情況寫了很多時(shí)他們才測(cè)試一下,是因?yàn)橐粋(gè)人假如經(jīng)驗(yàn)多的話,他們就會(huì)知道并提前預(yù)防瀏覽器錯(cuò)誤顯示的發(fā)生了!所以他們寫代碼的速度比沒有經(jīng)驗(yàn)的人快。他們已經(jīng)經(jīng)歷過了你所要經(jīng)歷的錯(cuò)誤,你第一次碰到錯(cuò)誤的瀏覽器顯示問題你要花時(shí)間去修補(bǔ),而他們可提前防止或碰到了可立即解決問題!這就是你與他們的不同點(diǎn)之一。
初學(xué)者與高手不同點(diǎn)之處還有一個(gè)就是高手們使用了大量的快捷鍵,所以一定要記住那些常用的快捷鍵,每一個(gè)小的細(xì)節(jié)都有一點(diǎn)提高,綜合在一起就是很大的提高。
另外提高自己的水平最好的方法就是多實(shí)踐,多找一些比較好的HTML CSS的模板進(jìn)行編碼實(shí)踐,開始時(shí)要選一個(gè)簡(jiǎn)單點(diǎn)的,把頁面截圖,然后把這張圖用自己的想法還原成HTML頁面!
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
- 該如何正確的使用position屬性它的作用是什么?
- 5個(gè)你該知道的CSS3新技術(shù)
- border與list縮寫的時(shí)候應(yīng)該注意什么?
- DivCSS教程:DTD(文檔類型)影響margin實(shí)現(xiàn)居中的分析
- 網(wǎng)頁制作中如何精確還原設(shè)計(jì)稿的幾個(gè)步驟
- web標(biāo)準(zhǔn)中IE無法設(shè)置滾動(dòng)條顏色解決方法
- CSS基礎(chǔ):常用CSS英文字體介紹
- DIV為空時(shí)占據(jù)空間的解決辦法
- 應(yīng)用DIV CSS布局以后該在什么時(shí)候使用TABLE?
- 純CSS Lightbox效果
猜你也喜歡看這些
- CSSFormExample:帶有小圖標(biāo)的清爽CSS表單設(shè)計(jì)!
- CSSFloatLayoutBasics-CSS浮動(dòng)布局基礎(chǔ)
- 實(shí)現(xiàn)三列布局相同高度的解決辦法
- DIVCSS菜單:超炫的菜單一張圖片實(shí)現(xiàn)鼠標(biāo)的兩種狀態(tài)及CSS當(dāng)前頁效果
- DIV CSS布局入門示例(一)頁面布局與規(guī)劃
- CSS布局教程:如何用CSS構(gòu)建圖片、文字混排的產(chǎn)品展示?
- DivCSS布局實(shí)例:詳解建立Flash上面浮動(dòng)層
- 固定div容器的寬高,圖片居中(圖片不限制大�。�
- CSS圖片放大展示的一種小思路
- DOV CSS表單:超炫的單選框與復(fù)選框效果!-Adam
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-CSS文件先準(zhǔn)備還是先寫好HTML文件?
。