網(wǎng)頁設(shè)計(div+css).ppt

網(wǎng)頁設(shè)計(div+css).ppt

ID：48162071

大?。?07.50 KB

頁數(shù)：35頁

時間：2020-01-16

網(wǎng)頁設(shè)計(div+css).ppt_第1頁
網(wǎng)頁設(shè)計(div+css).ppt_第2頁
網(wǎng)頁設(shè)計(div+css).ppt_第3頁
網(wǎng)頁設(shè)計(div+css).ppt_第4頁
網(wǎng)頁設(shè)計(div+css).ppt_第5頁
資源描述：

《網(wǎng)頁設(shè)計(div+css).ppt》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、DIV+CSS布局Div+Css特點DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)（或稱“WEB標(biāo)準(zhǔn)”）中常用的術(shù)語之一，通常為了說明與HTML網(wǎng)頁設(shè)計語言中的表格（table）定位方式的區(qū)別，因為XHTML網(wǎng)站設(shè)計標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實現(xiàn)各種定位Div+CSS布局的優(yōu)勢代碼精簡表格的嵌套問題速度問題方便搜索引擎的搜錄重構(gòu)頁面的方便性盒狀編程模型DIV+CSS通過由CSS定義的大小不一的盒子和盒子嵌套來編排網(wǎng)頁內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模式都具

2、備這些屬性一共分為四個區(qū)塊，每個區(qū)塊的框架是一樣的，這個框架就是用CSS寫出來的，樣式寫一次，就可以被無數(shù)次調(diào)用了(用class調(diào)用，而不是ID)，只要改變其中的文字內(nèi)容就可以生成風(fēng)格統(tǒng)一的眾多板塊了，演示的相關(guān)文件

前言

正文內(nèi)容

CSS盒子模式

正文內(nèi)容

轉(zhuǎn)變思想

正文內(nèi)容

3、

熟悉步驟

正文內(nèi)容

演示文件DIV+CSS設(shè)計思路用div來定義語義結(jié)構(gòu)；然后用CSS來美化網(wǎng)頁，如加入背景、線條邊框、對齊屬性等；最后在這個CSS定義的盒子內(nèi)加上內(nèi)容，如文字、圖片等設(shè)計效果圖分析頁面布局形式設(shè)置主要4個盒子將盒子裝入Body盒子

4、eader"> 定義整體樣式body{ font-family:Arial,Helvetica,sans-serif; font-size:12px; margin:0pxauto; height:auto; width:760px; border:1pxsolid#006633; }分別定義各個盒子樣式#header{ height:100px; width:760px; b

5、ackground-image:url(headPic.gif); background-repeat:no-repeat; margin:0px0px3px0px; }設(shè)置更小的盒子#nav{ height:25px; width:760px; font-size:14px; list-style-type:none; } #navli{float:left; } #navlia{ color:#000000; text-decoration:none; padding-top:4px;display:block; ……}最終盒狀模

6、型結(jié)構(gòu)代碼

  • 首頁
  • 文章
  • 相冊
  • Blog
  • 論壇
  • 幫助

    • 前言

    第一段內(nèi)容

    理解CSS

    7、盒子模式

    第二段內(nèi)容

    客服中心

    8、QQ留言

    9、網(wǎng)站管理

    10、會員登錄

    11、

    Copyright©2006-2008KeithDan.AllRightsReserved

    演示代碼練習(xí)一個實例初始效果圖設(shè)計布局與規(guī)劃頂部部分，其中又包括了LOGO、MENU和一幅Banner圖片；內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容；底部，包括一些版權(quán)信息。布局與規(guī)劃分析結(jié)構(gòu)分析DIV結(jié)構(gòu)如下： 　　│body{}/*這是一個HTML元素

    12、，具體我就不說明了*/└#Container{}/*頁面層容器*/├#Header{}/*頁面頭部*/├#PageBody{}/*頁面主體*/│　├#Sidebar{}/*側(cè)邊欄*/│　└#MainBody{}/*主體內(nèi)

    當(dāng)前文檔最多預(yù)覽五頁，下載文檔查看全文

    此文檔下載收益歸作者所有

    當(dāng)前文檔最多預(yù)覽五頁，下載文檔查看全文
    溫馨提示：
    1. 部分包含數(shù)學(xué)公式或PPT動畫的文件，查看預(yù)覽時可能會顯示錯亂或異常，文件下載后無此問題，請放心下載。
    2. 本文檔由用戶上傳，版權(quán)歸屬用戶，天天文庫負(fù)責(zé)整理代發(fā)布。如果您對本文檔版權(quán)有爭議請及時聯(lián)系客服。
    3. 下載前請仔細(xì)閱讀文檔內(nèi)容，確認(rèn)文檔內(nèi)容符合您的需求后進(jìn)行下載，若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
    4. 下載文檔時可能由于網(wǎng)絡(luò)波動等原因無法下載或下載錯誤，付費完成后未能成功下載的用戶請聯(lián)系客服處理。