本篇內(nèi)容主要講解“DIV CSS制作的步驟有哪些”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“DIV CSS制作的步驟有哪些”吧!

創(chuàng)新互聯(lián)主要從事網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)寧洱,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18982081108

一、分析帶切美工圖  

在CSS制作前對(duì)網(wǎng)頁(yè)美工圖分析是必不可少的，少了分析會(huì)讓你接下來(lái)布局凌亂。我們分析也應(yīng)該遵循整體到局部、從外到內(nèi)、從上到下，分析內(nèi)容：

1、網(wǎng)頁(yè)結(jié)構(gòu)
分析網(wǎng)頁(yè)結(jié)構(gòu)，讓自己有數(shù)如何布局網(wǎng)頁(yè)框架，比如分析網(wǎng)頁(yè)左右、上下結(jié)構(gòu)構(gòu)造，便于整體布局把握

比如重要的 頭部、內(nèi)容部分、底部版權(quán)
內(nèi)容部分是什么結(jié)構(gòu)，可以如何拆分布局。

2、分析需要切出圖片素材
分析網(wǎng)頁(yè)美工圖那些是作為網(wǎng)頁(yè)背景、那些是內(nèi)容圖片。

作為網(wǎng)頁(yè)背景圖片，如果是背景不重復(fù)的一般是隱藏遮擋背景圖片上的內(nèi)容再整體切出，如果是可以平鋪重復(fù)顯示背景，我們?nèi)绾吻谐鰷p少素材大小。

3、特效分析
如果網(wǎng)頁(yè)中有特效，我們?nèi)绾螌?shí)現(xiàn)，自己會(huì)那沒(méi)問(wèn)題，也可以找特效嵌入，這個(gè)時(shí)候就要求平時(shí)多收集常用CSS+JS特效（CSS特效、CSS模塊），便于布局運(yùn)用。

4、整體把握
通過(guò)整體、局部分析應(yīng)該做到對(duì)此網(wǎng)頁(yè)CSS布局心中有數(shù)，整體框架如何布局，網(wǎng)頁(yè)如何拆分結(jié)構(gòu)布局、局部是否有難點(diǎn)，難點(diǎn)解決等都要做到心中有數(shù)。

二、切出素材   

根據(jù)第一步分析，切出網(wǎng)頁(yè)中圖片、網(wǎng)頁(yè)素材等，PS導(dǎo)出切片。

一般圖片GIF格式，如果是圖片有半透明一般導(dǎo)出PNG格式（ie6 png透明解決），圖片內(nèi)容一般導(dǎo)出為jpg格式。

三、引入DIVCSS5初始化模板   

將拷貝一份創(chuàng)新互聯(lián)初始化模板，命名好文件夾項(xiàng)目名。提供的初始化css模板，包括了CSS文件(style.css)、HTML文件（index.html）、放圖片images文件夾，已經(jīng)對(duì)應(yīng)新建好常用文件夾結(jié)構(gòu)。

CSS模板

四、將切出網(wǎng)頁(yè)圖片素材放入初始化模板   

我們將網(wǎng)頁(yè)素材圖片考入新建項(xiàng)目的images文件夾內(nèi)。

五、開始從上到下、從外到內(nèi)布局   

1、基礎(chǔ)修改設(shè)置
一般使用DW軟件打開index.html,首先進(jìn)行基本設(shè)置，比如根據(jù)網(wǎng)頁(yè)美工圖使用PS獲得文字顏色、背景顏色，對(duì)css中設(shè)置字體顏色、背景顏色、如果背景是圖片中設(shè)置好CSS背景圖片。

2、布局把握
一般是從上到下布局，從外到內(nèi)布局，先布局同級(jí)最大結(jié)構(gòu)框架，再局部布局。

比如，頭部，我們就開始布局頭部最外層div盒子，設(shè)置好css布局居中，css寬度等，再布局頭部上下結(jié)構(gòu)情況，再分別設(shè)置局部左右框架最后布局內(nèi)容（左右布局一般使用css float樣式）。

比如左右結(jié)構(gòu)內(nèi)容，一般是先布局最外層盒子，在跟著布局左右結(jié)構(gòu)2個(gè)盒子，然后再回到左側(cè)盒子，開始布局左側(cè)內(nèi)容。新手不要布局最外層盒子后，就開始布局左側(cè)及左側(cè)內(nèi)容而右側(cè)結(jié)構(gòu)都沒(méi)有設(shè)置布局，如果這樣很容易造成布局混亂與布局錯(cuò)誤。

重要：一定先最外層，如何對(duì)應(yīng)左側(cè)和右側(cè)盒子大框架布局了，再回到左側(cè)或右側(cè)開始從上到下布局局部。

以上布局把握布局步驟讓您在布局時(shí)候有條有理，不易造成布局混亂無(wú)從下手。

同時(shí)在布局時(shí)候可能一般不確定自己布局是否正確是否兼容，可以在布局時(shí)候邊布局邊在一個(gè)瀏覽器中測(cè)試兼容，新手千萬(wàn)不要在軟件中布局完網(wǎng)頁(yè)才測(cè)試，這樣很容易造成錯(cuò)誤兼容問(wèn)題找不到原因。在布局中測(cè)試可以發(fā)現(xiàn)問(wèn)題解決問(wèn)題，讓DIV+CSS網(wǎng)頁(yè)兼容更好。

布局時(shí)候可能您會(huì)遇到：
css命名
css hack

六、測(cè)試css兼容，完成布局    

網(wǎng)頁(yè)布局完后，就進(jìn)行最后常用瀏覽器兼容性測(cè)試，最后調(diào)整修改完善，這樣一個(gè)從網(wǎng)頁(yè)美工圖到css制作完成的html網(wǎng)頁(yè)就完成。

到此，相信大家對(duì)“DIV CSS制作的步驟有哪些”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！