CSS網(wǎng)頁布局PPT精選文檔

1、1,CSS網(wǎng)頁布局,2,CSS VS Table,Table 布局頁面會(huì)帶來哪些問題？ 使用CSS 排版比Table 有哪些優(yōu)勢(shì)？ 用CSS 頁面布局能給我們的網(wǎng)頁設(shè)計(jì)帶來什么好處,3,表格布局的問題,把格式數(shù)據(jù)混入你的容。 重新設(shè)計(jì)現(xiàn)有的站點(diǎn)和內(nèi)容費(fèi)力。 難以保持整個(gè)站點(diǎn)的視覺的一致性。 降低了對(duì)殘疾人、手機(jī)、PDA 瀏覽者的親和力,4,CSS 布局的好處,內(nèi)容和形式分離 改版網(wǎng)站更簡單容易 搜索引擎更友好,5,CSS 布局的基本思想,結(jié)構(gòu)化標(biāo)記： 所寫即所想，所想即所寫,6,CSS控制HTML頁面的方式,行內(nèi)方式 內(nèi)嵌方式 鏈接方式 導(dǎo)入方式,7,行內(nèi)方式,直接對(duì)HTML 標(biāo)簽適用 sty

2、le=“,8,內(nèi)嵌方式,將CSS 代碼寫在之間，并且用進(jìn)行聲明,9,1 2 3 4 5 無標(biāo)題文檔 6 7,10,11 12 13 14 15 全國的CSS 愛好者匯聚于此，如果不來，你就OUT 嘍我們的口號(hào)是： 16 “分享自己的歡樂與痛苦，分享自己的經(jīng)驗(yàn)與心得，分享自己的資料與資源” 17 如果您也愿意，就加入我們吧 18 19,11,鏈接方式,是使用頻率最高，最實(shí)用的方式，只需要在之間加上,12,3 4 5 無標(biāo)題文檔 6 7 8 9 10 全國的CSS 愛好者匯聚于此，如果不來，你就OUT 嘍我們的口號(hào)是： 11 “分享自己的歡樂與痛苦，分享自己的經(jīng)驗(yàn)與心得，分享自己的資料與資源” 1

3、2 如果您也愿意，就加入我們吧 13,13,style.css的內(nèi)容,14,導(dǎo)入方式,和鏈接方式比較相似，采用import 方式導(dǎo)入CSS 樣式表，在HTML 初始化時(shí)，會(huì)被導(dǎo)入到HTML 文件中，成為文件的一部分,15,四種樣式的優(yōu)先級(jí),低,高,行內(nèi)方式,內(nèi)嵌方式,鏈接方式,導(dǎo)入方式,16,CSS選擇器,標(biāo)簽選擇器 ID選擇器 類選擇器,17,標(biāo)簽選擇器,18,ID選擇器,19,類選擇器,20,盒子模型,21,塊狀元素和內(nèi)聯(lián)元素,22,浮動(dòng),float:left,23,24,清除浮動(dòng),25,清除浮動(dòng),clearclear:both,在HTML中加入,26,27,28,第一步：整體布局與公共C

4、SS定義,示例網(wǎng)頁的HTML代碼,29,第一步：整體布局與公共CSS定義,示例網(wǎng)頁的CSS代碼,30,第二步 布局Logo欄,HTML代碼,31,第二步 布局Logo欄,CSS代碼,32,第三步 布局導(dǎo)航欄Nav,HTML代碼,33,第三步 布局導(dǎo)航欄Nav,CSS代碼,34,第三步 布局導(dǎo)航欄Nav,CSS代碼,35,第四步 布局Banner欄,HTML代碼,36,第四步 布局Banner欄,CSS代碼,37,第五步 布局Content欄,HTML 代碼,38,第五步 布局Content欄,CSS 代碼,39,內(nèi)容欄的具體內(nèi)容還有待進(jìn)一步布局,40,第六步 布局Footer欄,HTML代碼,

5、41,第六步 布局Footer欄,CSS代碼,42,43,44,第七步 布局內(nèi)容欄左側(cè),HTML代碼,45,第七步 布局內(nèi)容欄左側(cè),CSS代碼,46,第七步 布局Content欄左側(cè),CSS代碼,47,第七步 布局Content欄左側(cè),效果如下,48,第七步 布局Content欄左側(cè),HTML代碼（下部多一張圖片,49,第七步 布局Content欄左側(cè),預(yù)覽效果（右部有空白，圖片不靠左,50,第七步 布局Content欄左側(cè),CSS代碼,51,第七步 布局Content欄左側(cè),CSS代碼,52,第八步布局Content欄右側(cè),CSS結(jié)合Table來使用,53,第八步布局Content欄右側(cè),H

6、TML代碼(紅色標(biāo)題,54,第八步布局Content欄右側(cè),CSS代碼（紅色標(biāo)題,55,第八步布局Content欄右側(cè),HTML代碼(第一行,56,第八步布局Content欄右側(cè),CSS代碼（第一行,57,第八步布局Content欄右側(cè),HTML代碼(QQ號(hào)碼,58,第八步布局Content欄右側(cè),CSS代碼(QQ號(hào)碼,59,第八步布局Content欄右側(cè),HTML代碼(最后一句話,60,第八步布局Content欄右側(cè),CSS代碼(最后一句話,61,CSS頁面布局實(shí)例,建立站點(diǎn) 結(jié)構(gòu)分析 搭建框架 切割效果圖 布局頁面頭部和導(dǎo)航 布局頁面?zhèn)冗厵?布局頁面主體部分 底部和細(xì)節(jié)調(diào)整 相對(duì)路徑和相對(duì)于根目錄路徑 文章出處：標(biāo)準(zhǔn)之路(http:/,