第3章CSS設(shè)計(jì)實(shí)踐.ppt

1、CSS網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)教程，第1部分，CSS核心原則，第3章，CSS設(shè)計(jì)實(shí)踐，前一章介紹了CSS的基本思想和基本用法。在繼續(xù)深入解釋各種CSS屬性之前，我們應(yīng)該在這一章做一些實(shí)際的操作，用CSS實(shí)際寫一個(gè)比較完整的網(wǎng)頁(yè)，為進(jìn)一步學(xué)習(xí)HTML和CSS打下基礎(chǔ)。本章將介紹如何使用手動(dòng)代碼和Dreamweaver軟件可視化分別完成同一個(gè)頁(yè)面。3.1手動(dòng)編寫頁(yè)面，圖3.1體驗(yàn)CSS，以及3.1.1構(gòu)建頁(yè)面框架?？紤]到簡(jiǎn)單的詞語(yǔ)很少，所以增加了一張圖片作為簡(jiǎn)單的說(shuō)明。圖片的位置與文本的位置相同，并且使用了超文本標(biāo)記語(yǔ)言的標(biāo)簽。此時(shí)，一些修改后的代碼如下，源文件顯示在實(shí)例文件“03-02.html”中。部分代

2、碼忽略了互聯(lián)網(wǎng)發(fā)展的起源。1969年，為了確保通信，阿帕網(wǎng)贊助建立了阿帕網(wǎng)，這是世界上第一個(gè)分組交換實(shí)驗(yàn)網(wǎng)絡(luò)，連接了美國(guó)的四所大學(xué)。ARPANET的建立和不斷發(fā)展標(biāo)志著計(jì)算機(jī)網(wǎng)絡(luò)發(fā)展的新時(shí)代。省略了部分代碼，圖3.3添加了圖片，3.1.2設(shè)置了標(biāo)題，并體驗(yàn)了CSS h1，color:white/*文本顏色*/背景顏色： # 0000 FF；/*背景色*/text-align : center；/*中心*/padd :15 px；/*頁(yè)邊距*/省略，圖3.4修改標(biāo)題樣式，3.1.3控制圖片，img浮動(dòng)：浮動(dòng)；虛線邊框：1 px # 9999 CC；margin:5px，圖3.5圖文混排，3.1.

3、4圖文集，p font-size :12 px；text-indent :2 em；線高：1.5；padding:5px，圖3.6修改文本樣式，3.1.5設(shè)置整頁(yè)，正文邊距：0像素；背景色： # CCCCFF；圖3.7設(shè)置了頁(yè)面的整體效果，而3.1.6單獨(dú)設(shè)置了段落。上面設(shè)置的所有CSS樣式都使用標(biāo)簽選擇器。為了驗(yàn)證其他選擇器的使用，這里為兩個(gè)文本段落設(shè)置了不同的效果。首先，這兩段的標(biāo)簽都設(shè)置了一個(gè)id屬性，代碼如下：1969年，為了保證通信，美國(guó)國(guó)防部高級(jí)研究計(jì)劃局(ARPA)出資建立了ARPANET，這是世界上第一個(gè)分組交換測(cè)試網(wǎng)絡(luò)，連接了美國(guó)的四所大學(xué)。ARPANET的建立和不斷發(fā)展標(biāo)志著計(jì)算機(jī)網(wǎng)絡(luò)發(fā)展的新時(shí)代。從20世紀(jì)70年代末到80年代初，計(jì)算機(jī)網(wǎng)絡(luò)蓬勃發(fā)展，各種各樣的計(jì)算機(jī)網(wǎng)絡(luò)應(yīng)運(yùn)而生，如微軟網(wǎng)絡(luò)、美國(guó)在線、BITNET、中國(guó)移動(dòng)通信網(wǎng)等。隨著一系列網(wǎng)絡(luò)的建設(shè)，不同網(wǎng)絡(luò)之間的互聯(lián)需求不斷增加，最終產(chǎn)生了TCP/IP協(xié)議。然后在CSS部分設(shè)置以下CSS規(guī)則。#p1邊框-右側(cè)：3px紅色雙面；#p2邊框-右側(cè)：3px橙色雙面；圖3.8不同地設(shè)置段落，3.2使用Dreamweaver設(shè)置CSS，3.2.1創(chuàng)建頁(yè)面，3.9在Dr