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

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

2、碼忽略了互聯(lián)網(wǎng)發(fā)展的起源。1969年，為了確保通信，阿帕網(wǎng)贊助建立了阿帕網(wǎng)，這是世界上第一個分組交換實驗網(wǎng)絡(luò)，連接了美國的四所大學(xué)。ARPANET的建立和不斷發(fā)展標(biāo)志著計算機網(wǎng)絡(luò)發(fā)展的新時代。省略了部分代碼，圖3.3添加了圖片，3.1.2設(shè)置了標(biāo)題，并體驗了CSS h1，color:white/*文本顏色*/背景顏色： # 0000 FF；/*背景色*/text-align : center；/*中心*/padd :15 px；/*頁邊距*/省略，圖3.4修改標(biāo)題樣式，3.1.3控制圖片，img浮動：浮動；虛線邊框：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è)置整頁，正文邊距：0像素；背景色： # CCCCFF；圖3.7設(shè)置了頁面的整體效果，而3.1.6單獨設(shè)置了段落。上面設(shè)置的所有CSS樣式都使用標(biāo)簽選擇器。為了驗證其他選擇器的使用，這里為兩個文本段落設(shè)置了不同的效果。首先，這兩段的標(biāo)簽都設(shè)置了一個id屬性，代碼如下：1969年，為了保證通信，美國國防部高級研究計劃局(ARPA)出資建立了ARPANET，這是世界上第一個分組交換測試網(wǎng)絡(luò)，連接了美國的四所大學(xué)。ARPANET的建立和不斷發(fā)展標(biāo)志著計算機網(wǎng)絡(luò)發(fā)展的新時代。從20世紀(jì)70年代末到80年代初，計算機網(wǎng)絡(luò)蓬勃發(fā)展，各種各樣的計算機網(wǎng)絡(luò)應(yīng)運而生，如微軟網(wǎng)絡(luò)、美國在線、BITNET、中國移動通信網(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)建頁面，3.9在Dr