版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)
文檔簡介
第8章網(wǎng)頁設(shè)計基礎(chǔ)
通過本章學(xué)習(xí)，讀者應(yīng)該掌握以下內(nèi)容：HTML語言的基礎(chǔ)知識級聯(lián)式樣式表（CSS）JavaScript語言的基礎(chǔ)知識8.1HTML語言HTML（超文本標(biāo)記語言）是一種描述文檔結(jié)構(gòu)的標(biāo)注語言它使用一些約定的標(biāo)記對WWW上的各種信息進行標(biāo)注。HTML的優(yōu)點是其跨平臺性。8.1HTML語言8.1.1HTML語言的結(jié)構(gòu)
HTML文件是標(biāo)準(zhǔn)的ASCII文件，且其后綴名為htm或html的文件。HTML文件看起來像是加入了許多被稱為鏈接簽（tag）的特殊字符串的普通文本文件。8.1HTML語言8.1.1HTML語言的結(jié)構(gòu)
從結(jié)構(gòu)上講，HTML文件由元素（element）組成，組成HTML文件的元素有許多種，用于組織文件的內(nèi)容和指導(dǎo)文件的輸出格式。絕大多數(shù)元素是“容器”，
即它有起始標(biāo)記和結(jié)束標(biāo)記。中間叫元素體。每個元素都有名稱和許多可選擇的屬性。8.1HTML語言下面來看一個HTML文件結(jié)構(gòu)實例，<HTML><HEAD>
<TITLE>武漢輕工大學(xué)</TITLE></HEAD><BODYbgcolor=yellow>
<P>這是一HTML的測試文件</P></BODY></HTML>HTML文件僅由一個HTML元素組成。
即文件以<HTML>開始，以</HTML>結(jié)尾，文件其余部分都是
HTML的元素體。而HTML元素的元素體又由頭元素<head>…</head>、體元素<body>…</body>和一些注釋組成。頭元素和體元素的元素體又由其它的元素、文本及注釋組成。8.1HTML語言鏈接簽的格式為：<起始鏈接簽
屬性名＝屬性值>內(nèi)容
<結(jié)束鏈接簽>例如：<BODYbgcolor=yellow>
<P>這是一HTML的測試文件</P></BODY>8.1HTML語言在HTML中有三個字符具有特殊的意義，即：<
表示一個標(biāo)簽的開始。>
表示一個標(biāo)簽的結(jié)束。&
表示轉(zhuǎn)義序列的開始。每個轉(zhuǎn)義字符都“&”開始，以分號“；”結(jié)束。（解決二義性問題）例如：“<”表示“<”符號?！?/p>
”表示空格。8.1HTML語言元素名也叫鏈接簽名。需要注意的是：（1）<和起始鏈接簽之間不能有空格。（2）元素名稱不區(qū)分大小寫。
（3）一個元素可以有多個屬性，屬性及其屬性值不區(qū)分大小寫，且各個屬性用空格分開。8.1HTML語言在頭元素中的元素表示的是該HTML文件的一般信息，這些元素書寫的次序是無關(guān)緊要的，它只表明該HTML有還是沒有該屬性。出現(xiàn)在體元素中的元素是次序敏感的，改變元素在HTML文件中的次序會改變該HTML文件的輸出形式。8.1HTML語言1.<TITLE>標(biāo)記<TITLE>標(biāo)記用來給網(wǎng)頁命名，顯示在瀏覽器的標(biāo)題欄中。例如，在圖2-1中所示的瀏覽器頁面中，其標(biāo)題欄所顯示的“武漢工業(yè)學(xué)院”。8.1.1HTML語言概述2.<Hn>標(biāo)記<H1>…</H1>到<H6>…</H6>標(biāo)題元素有6種，用于表示文章中的各種題目。字體大小<H1>到<H6>順序減小。下面這個例子中分別使用了<H1>到<H6>的標(biāo)題。8.1.1HTML語言概述<HTML><HEAD><TITLE>這是一個測試網(wǎng)頁</TITLE></HEAD><BODY><h1>標(biāo)題測試</h1><h2>標(biāo)題測試</h2><h3>標(biāo)題測試</h3><h4>標(biāo)題測試</h4><h5>標(biāo)題測試</h5><h6>標(biāo)題測試</h6></BODY></HTML>3.預(yù)格式化文本標(biāo)記<pre>HTML的輸出是基于窗口的，因而HTML文件在輸出時都是要重新排版的，即把文本上任何額外的字符（如空格、制表符和回車符）都忽略，若確實不需要重新排版的內(nèi)容，可以用<pre>…<／pre>通知瀏覽器。下面是圖2-3和圖2-4的HTML源文件。
8.1.1HTML語言概述<HTML><HEAD><TITLE>這是一個測試網(wǎng)頁</TITLE></HEAD><BODY><pre> <!--（圖2-4無此標(biāo)記）-->HTML是一種描述文檔結(jié)構(gòu)的標(biāo)注語言，它使用一些約定的標(biāo)記對各種信息進行標(biāo)注。</pre> <!--（圖2-4無此標(biāo)記）--></BODY></HTML>4.<BR>和<P>標(biāo)記<BR>用于強制換行。<P>表示一個段落的開始。</P>一般可不用。5.<B><I><U><STRONG><S>標(biāo)記
這幾個標(biāo)記都是用來修飾所包含文檔的。<B>標(biāo)記使文本加粗；<I>標(biāo)記使文本傾斜；<U>標(biāo)記給文本加下劃線；<S>標(biāo)記給文本加刪除線；<STRONG>標(biāo)記使文本字體加重。下面給出一個這幾個元素的HTML源文件。8.1.1HTML語言概述<HTML><HEAD><TITLE>這是一個測試網(wǎng)頁</TITLE></HEAD><BODY><STRONG>HTML</STRONG>是一種
<EM>描述文檔結(jié)構(gòu)</EM>的
<U>標(biāo)注語言</U>，
<B>它使用</B>一些
<I>約定的標(biāo)記</I>對各種信息進行
<S>標(biāo)注<S>。
</BODY></HTML>6.<FONT>標(biāo)記<FONT>…</FONT>用來修改字體和顏色。其中COLOR屬性：指定文字顏色，顏色的表示可以用6位十六進制代碼，如<FONTCOLOR=#00FF00>；SIZE屬性：指定相對尺寸。8.1.1HTML語言概述<HTML><HEAD><TITLE>這是一個測試網(wǎng)頁</TITLE></HEAD><BODY><fontsize=7color=red>HTML是一種</font>
描述文檔結(jié)構(gòu)的標(biāo)注語言，它使用一些約定的標(biāo)記對各種信息進行標(biāo)注。
</BODY></HTML>如果用戶想要設(shè)置網(wǎng)頁的背景色和文字顏色，可以將<BODY>標(biāo)記擴充為：<BODYbgcolor=#text=#link=#alink=#vlink=#background=”imageURL”>8.1.1HTML語言概述
表
設(shè)置背景景色和文字顏色標(biāo)記說明Bgcolor設(shè)置網(wǎng)頁背景顏色Text設(shè)置網(wǎng)頁非可鏈接文字的顏色Link設(shè)置網(wǎng)頁可鏈接文字的顏色Alink設(shè)置網(wǎng)頁正被點擊的可鏈接文字的顏色Vlink設(shè)置網(wǎng)頁已經(jīng)點擊的可鏈接文字的顏色Background設(shè)置網(wǎng)頁背景圖案ImageURL設(shè)置網(wǎng)頁背景圖案的URL地址#代表顏色RGB值（格式為rrggbb）。它是用16進制的紅-綠-藍（red-green-blue，RGB）值來表示。各種常見的顏色的RGB值如表9-2所示。顏色RGB顏色RGB黑色（Black）000000橄欖色（Olive）808000紅色（Red）FF0000深表色（Teal）008080綠色（Green）008000灰色（Gray）808080藍色（Blue）0000FF深藍色（Navy）000080白色（White）FFFFFF淺綠色（Lime）00FF00黃色（Yellow）FFFF00紫紅色（Fuchsia）FF00FF銀色（Silver）C0C0C0紫色（Purple）800080淺色（Aqua）00FFFF茶色（Maroon）800000
表
常見顏色RGB值
例如要將網(wǎng)頁背景顏色設(shè)置為藍色，<bodybgcolor=#0000ff>8.1.1HTML語言概述超文本鏈接指針可以使順序存放的文件具有一定程度上隨機訪問的能力，這更加符合人類的踴躍思維方式。超文本鏈接指針是指把并不連續(xù)的兩段文字或兩個文件聯(lián)系起來。8.1.2超文本鏈接指針1.統(tǒng)一資源定位器URL統(tǒng)一資源定位器（UniformResourceLocator）是文件名的擴展。它的構(gòu)成為：
protocol://[:port]／directory／filename8.1.2超文本鏈接指針其中：protocol是訪問該資源所采用的協(xié)議，即訪問該資源的方法，它可以是：
HTTP：超文本傳輸協(xié)議，該資源是HTML文件；
FTP：文件傳輸協(xié)議，用ftp訪問該資源；
MAILTO：采用簡單郵件管理傳輸協(xié)議SMTP，提供電子郵件服務(wù)。8.1.2超文本鏈接指針是存放該資源主機的IP地址，通常以字符形式出現(xiàn),如
。port（端口號）是服務(wù)器在其主機所使用的端口號。一般情況下端口號不需要指定，只有當(dāng)服務(wù)器所使用的端口號不是默認(rèn)的端口號時才指定。directory和filename是該資源的路徑和文件名。8.1.2超文本鏈接指針一個典型的URL為：/網(wǎng)絡(luò)采用傳輸協(xié)議
；主機的名字是
；但它并沒有指出訪問的目錄和哪個文件，其實這時表示訪問的是根目錄下的默認(rèn)主頁文件。
8.1.2超文本鏈接指針與單機系統(tǒng)絕對路徑、相對路徑的概念類似，統(tǒng)一資源定位器也有絕對URL和相對URL之分。絕對URL、相對URL是相對于最近訪問的URL而言。8.1.2超文本鏈接指針當(dāng)協(xié)議（http://）被省略時，就認(rèn)為與當(dāng)前頁面的協(xié)議相同。當(dāng)主機域名被省略時，就認(rèn)是當(dāng)前主機域名。當(dāng)目錄路徑被省略時，就認(rèn)是當(dāng)前目錄。當(dāng)文件名被省略時，就認(rèn)是當(dāng)前文件。8.1.2超文本鏈接指針2.建立一個鏈接（1）鏈接到其它站點在HTML文件中用鏈接指針指向一個目標(biāo)。其基本格式為：
<ahref="…">zzz</a>其中zzz可以是文字或圖片并顯示在網(wǎng)頁中，
href中的h表示超文本，而ref表示“訪問”或“引用”的意思。2.建立一個鏈接例如：<ahref="/">武漢工業(yè)學(xué)院</a>在這個例子中，充當(dāng)指針的是“武漢工業(yè)學(xué)院”。
在編寫HTML文件時，需要知道目標(biāo)的URL。那么如何才能得到目標(biāo)的URL呢？在編寫HTML文件時，對能確定關(guān)系的一組資源（例如在同一個目錄中）應(yīng)采用相對URL。2.建立一個鏈接（2）同一個文件中的鏈接超鏈可以指向自己的計算機中的某一個文件這種鏈接方式叫做本地鏈接。對于同一文件的不同部分，我們怎樣來標(biāo)識呢？2.建立一個鏈接下面的內(nèi)容將介紹鏈接指針元素的另外的一個用途，標(biāo)識目標(biāo)。標(biāo)識一個目標(biāo)的方法為：<ANAME="KKK">…….<／A>NAME屬性將放置該標(biāo)記的地方標(biāo)記為“KKK”，指針：<ahref="#KKK">轉(zhuǎn)向下一處
</a>2.建立一個鏈接在HTML文件中使用圖像1.在HTML文件中顯示圖像在瀏覽器上顯示的圖像必須有特定的格式，目前使用的瀏覽器通常支持GIF和JPEG格式的圖像。在HTML網(wǎng)頁中加圖像是通過<IMG>標(biāo)記實現(xiàn)的.例如：
<IMGalt="校慶"src="images/center1.gif">在HTML文件中顯示圖像<IMG>標(biāo)記有幾個較為重要的屬性。其中：
SRC屬性：指明圖形的URL地址；
HEIGHT屬性：決定圖形的高度；
WIDTH屬性：決定圖形的寬度；
BORDER屬性：決定邊框線的寬度，0表示無邊框；
ALT屬性：指明圖像顯示的備用文本；下面通過一個示例來說明<IMG>標(biāo)記的使用。<HTML><HEAD> <TITLE>測試頁</TITLE></HEAD><BODY><IMGalt="校慶"src="images/center1.gif"><IMGsrc="images/center1.gif"border=8><IMGsrc="images/center1.gif"height=150width=150></BODY></HTML>圖2-6HTML文件舉例
2.在HTML文件中利用圖像建立鏈接如果在鏈接標(biāo)記<A>和</A>的中間放置一個<IMG>標(biāo)記，這個圖像將會成為一個可擊點，產(chǎn)生一個鏈接。例如：<AHREF=”default.asp”><IMGSRC=”images/center1.gif”ALIGN=LEFT></A>8.1.3表單的應(yīng)用1.什么是表單HTML提供的表單是用來將用戶數(shù)據(jù)從瀏覽器傳遞給Web服務(wù)器的。表單的操作是與服務(wù)器進行交互的操作，而服務(wù)器端的操作是通過服務(wù)器端的程序來實現(xiàn)的。8.1.3表單的應(yīng)用是在服務(wù)器端工作程序，通過服務(wù)器端的編譯動態(tài)地送出HTML文件給客戶端，它負責(zé)處理HTML文件與運行在服務(wù)器端的程序之間的數(shù)據(jù)交換。當(dāng)用戶輸入信息（這個信息可以是查詢條件，也可以是傳送給服務(wù)器的某些內(nèi)容）并提交給服務(wù)器后，便激活了一個服務(wù)器端程序。該服務(wù)器程序又可以調(diào)用操作系統(tǒng)下的其他程序（例如數(shù)據(jù)庫管理系統(tǒng)）完成讀者的查詢?nèi)蝿?wù)，當(dāng)操作系統(tǒng)下的程序完成查詢之后，便把查詢結(jié)果傳給服務(wù)器，通過服務(wù)器傳給Web服務(wù)器。圖2-8表單示例2.表單的標(biāo)記表單就是為Internet網(wǎng)絡(luò)用戶在瀏覽器上建立一個交互接口，使Internet網(wǎng)絡(luò)用戶可以在這個接口上輸入自己的信息，然后使用提交按鈕，將Internet網(wǎng)絡(luò)用戶的輸入信息傳送給Web服務(wù)器。表單的HTML格式如下<FORMACTION=“…”METHOD=”…”>
…</FORM>2.表單的標(biāo)記FORM標(biāo)記有以下主要屬性：（1）ACTION屬性：是用來指出，當(dāng)這個FORM提交后需要執(zhí)行的駐留在Web服務(wù)器上的程序名（包括路徑）是什么。例如：<FORMACTION=”login.asp”METHOD=POST>
…
</FORM>2.表單的標(biāo)記（2）METHOD屬性：用來說明從客戶端瀏覽器將Internet網(wǎng)絡(luò)用戶輸入的信息傳送給Web服務(wù)器時所使用的方式，它有兩種方式：POST和GET。默認(rèn)的方式是GET，這兩者的區(qū)別是什么？2.表單的標(biāo)記在<FORM>與</FORM>之間，可以使用除<FORM>以外的任何HTML標(biāo)識，這將使FORM變得非常靈活。3.HTML中的INPUT標(biāo)記下面是INPUT標(biāo)記的標(biāo)準(zhǔn)格式：
<INPUTTYPE=“…”VALUE=“…”>其中TYPE屬性是用來說明提供給用戶進行信息輸入的類型是什么。：TYPE=“TEXT”
表示在表單中使用單行文本框
=“PASSWORD”
表示在表單中為用戶提供密碼輸入框=“RADIO”
表示在表單中使用單選按鈕
=“CHECKBOX”
表示在表單中使用多選按鈕
=“SUBMIT”
表示在表單中使用提交按鈕
=“RESET”
表示在表單中使用重置按鈕3.HTML中的INPUT標(biāo)記（1）文字輸入和密碼輸入用一個例子說明文字輸入和密碼輸入的制作。請看下例：
3.HTML中的INPUT標(biāo)記<HTML><HEAD><TITLE>這是個測試頁</TITLE></HEAD><BODY><formaction=“reg.asp”method=POST>
請輸入您的真實姓名:<inputtype=textname=姓名><br>
您的主頁的網(wǎng)址:<inputtype=textname=網(wǎng)址value=http://><br>
密碼:<inputtype=passwordname=密碼><br><inputtype=submitvalue=“發(fā)送”><inputtype=resetvalue="重設(shè)"></form></body></html>圖2-9文字輸入和密碼輸入的例子請輸入您的真實姓名:<inputtype=textname=姓名
maxlength=8><br>3.HTML中的INPUT標(biāo)記（2）復(fù)選框（Checkbox）和單選框（RadioButton）單選框和復(fù)選框的格式如下：單選框：<inputtype=radiovalue=“…”
checked>多選框：<inputtype=checkboxvalue=“…”
checked>3.HTML中的INPUT標(biāo)記下面來看一個例子，具體來體會一下。<HTML><HEAD><TITLE>這是個測試頁</TITLE></HEAD><BODY><FORMACTION=“REG1.ASP”METHOD=POST>
選擇一種你喜愛的水果:<br><INPUTtype=radioname=水果
value=”香蕉”>香蕉
<br><INPUTtype=radioname=水果
checkedvalue=”草莓”>草莓
<br><INPUTtype=radioname=水果
value=“橘子”>橘子</FORM></BODY></html>
<HTML><HEAD><TITLE>這是個測試頁</TITLE></HEAD><BODY><FORMACTION=“REG1.ASP”METHOD=POST><br>選擇你所喜愛的運動:
<br><INPUTtype="checkbox"name=ra1checkedvalue="足球">足球<br><INPUTtype="checkbox"name=ra2checkedvalue="籃球">籃球<br><INPUTtype="checkbox"name=ra3value="排球">排球<br><INPUTTYPE=SUBMITVALUE=“發(fā)送”><INPUTTYPE=RESETVALUE="重設(shè)"></FORM></BODY></HTML>圖2-10單選框?qū)嵗?）按鈕的制作其實“發(fā)送”按鈕真正的含義叫“提交”。即當(dāng)Internet網(wǎng)絡(luò)用戶用鼠標(biāo)單擊這個按鈕后，用戶輸入的信息便提交給一個駐留在Web服務(wù)器上的程序，讓服務(wù)器進行處理.其典型的格式：<INPUTTYPE=”SUBMIT”VALUE=”發(fā)送”>。VALUE屬性：如果缺省出現(xiàn)“SUBMIT”的字樣，改變按鈕上的提示。例如：VALUE=“提交”。3.HTML中的INPUT標(biāo)記另一種在瀏覽器常用的按鈕叫“重置”按鈕，當(dāng)Internet網(wǎng)絡(luò)用戶用鼠標(biāo)單擊這個按鈕后，網(wǎng)絡(luò)用戶輸入的信息被清除，讓網(wǎng)絡(luò)用戶重新輸入信息。其典型的格式：
<inputtype=“reset”value=”重新輸入”>，VALUE屬性：缺省VALUE屬性為“RESET”的字樣。改變按鈕上的提示，例如：VALUE=“重新輸入”。
3.HTML中的INPUT標(biāo)記設(shè)置下拉式菜單或帶有滾動條的菜單，下拉菜單的標(biāo)準(zhǔn)格式如下所示：<SELECT...><OPTIONvalue=“kkk”>選項一
….</SELECT>4.HTML中的SELECT標(biāo)記NAME屬性是當(dāng)Internet網(wǎng)絡(luò)用戶將表單提交時作為輸入信息的名字。SIZE屬性控制在瀏覽器窗口中這個菜單選項的顯示條數(shù)。
MULTIPLE屬性允許讀者一次可選多個選項，如果缺省MULTIPLE，一次只能選一項，類似于單選。OPTION帶有SELECTED屬性，若在SELECT標(biāo)記中設(shè)定MULTIPLE屬性的話，可以在多個OPTION標(biāo)記中帶有SELECTED屬性，表示這些選項已經(jīng)預(yù)選。4.HTML中的SELECT標(biāo)記<HTML><HEAD><TITLE>
武漢工業(yè)學(xué)院</TITLE></HEAD><BODY>請從下面課程中選擇幾門選擇課:<FORMaction="h1.asp"method=getid=form1name=form1><SELECTname=x1multiple><OPTIONvalue=“network”>網(wǎng)絡(luò)技術(shù)<OPTIONvalue=“write”
SELECTED>書法<OPTIONvalue=“music”>音樂欣賞<OPTIONvalue=“MUXmedia”>多媒體技術(shù)</SELECT><INPUTTYPE=SUBMITVALUE=“發(fā)送”><INPUTTYPE=RESETVALUE="重設(shè)"></FORM></BODY></HTML>圖2-11設(shè)置下拉菜單8.1.4HTML中的表格從這個例子可以看出一個表格有一個標(biāo)題（Caption），它表明表格的主要內(nèi)容，并且一般位于表的上方；表格中由行和列分割成的單元叫做“表元”（Cell），它又分為表頭（用TH標(biāo)記來表示）和表數(shù)據(jù)（用TD標(biāo)記來表示）；表格中分割表示的行列線稱為“框線”（Border）。一個表格的基本框架如下所示：<TABLEWIDTH=75%BORDER=1CELLSPACING=1CELLPADDING=1> <CAPTION></CAPTION> <TR> <TD></TD> <TD></TD> <TD></TD> </TR> <TR>1.表格的標(biāo)記 <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> <TD></TD> </TR></TABLE>1.表格的標(biāo)記（1）TABLE標(biāo)記一個表格至少一個TABLE標(biāo)記，由它來決定一個表格的開始和結(jié)束，而且TABLE標(biāo)記可以嵌套。TABLE標(biāo)記有以下五種屬性：BORDER屬性，指定圍繞表格的框的寬度（只能用像素）。CELLSPACING屬性，指定框線的寬度CELLPADDING屬性，用于設(shè)置表元內(nèi)容與邊框線之間的間距。ALIGN屬性用來控制表格本身在頁面上的對齊方式。其取值可是LEFT（左對齊）、CENTER（居中對齊）、RIGHT（右對齊）。WIDTH屬性，用來設(shè)置表格的寬度，可以以像素為單位，也可用占瀏覽器窗口的百分比來定義。（2）CATION標(biāo)記CATION標(biāo)記用來標(biāo)注表格標(biāo)題的。CATION標(biāo)記必須緊接在TABLE開始標(biāo)記之后放在第一個TR標(biāo)記之前。通過該標(biāo)記所定義的表格標(biāo)題一般顯示在表格的上方，而且其水平方向是居中對齊。另外，如需要對表格的標(biāo)題突出顯示，可以在CATION標(biāo)記之間加入其它對字體進行加重顯示的標(biāo)記。如：
<TABLEWIDTH=75%BORDER=1CELLSPACING=1CELLPADDING=1> <CAPTION> <H2>表格標(biāo)題強調(diào)</H2></CAPTION> <TR>………. </TR></TABLE>定義表格的一行。TR標(biāo)記中有兩個屬性:ALIGN屬性，用來設(shè)置表行中的每個表元在水平方向的對齊方式，其取值可以是LEFT（左對齊）、CENTER（居中對齊）、RIGHT（右對齊）；VLIGN屬性，用來設(shè)置表行中的每個表元在垂直方向的對齊方式，其取值可以是TOP（向上對齊）、CENTER（居中對齊）、BOTTOM（向下對齊）。（3）TR標(biāo)記例如，要使表行中各單元的內(nèi)容水平方向右對齊、垂直方向居中對齊，可使用如下源代碼：
<TRALIGN=RIGHTVALIGH=TOP>（3）TR標(biāo)記（4）TH標(biāo)記TH標(biāo)記用來表示一個表行中的各個單元。同樣具有ALIGN和VALIGN屬性，TH標(biāo)記還有兩個屬性:WIDTH屬性，用來設(shè)置表元的寬度，HEIGHT屬性，用來設(shè)置表元的高度。2.表格使用實例在這個實例中，通過制作一個登記表格來給大家來說明如何制作一個比較復(fù)雜的表格。在表格中經(jīng)常會出現(xiàn)跨多行、多列的表元，這就要利用TD標(biāo)記另外兩個屬性，即COLSPAN和ROWSPAN屬性。例如<THCOLSPAN=3>登記照<TH>表示這個表項標(biāo)題將橫跨三個表項的位置；<THROWSPAN=3>登記照<TH>表示這個表項標(biāo)題將縱跨三個表項的位置；另外每個表元還可以設(shè)置其背景顏色。例如
<THCOLSPAN=3BGCOLOR=yellow>登記照<TH>還可以在表格中插入超級鏈接或在表格中插入圖片，如果能對這個例子舉一反三的話，那么僅需制作一個無框線的表格，就可以把各種數(shù)據(jù)按照自己所希望的形式在頁面進行布置。下面就給出一個具體的實例（其頁面效果如圖2-13所示）：圖2-13綜合表格實例<HTML><HEAD></HEAD><BODY><P><TABLEborder=1cellPadding=1cellSpacing=1width="75%"><caption><h3>大獎賽登記表</h3></caption><TR><TDbgcolor=LightGoldenrodYellow>報名號</TD><TD>757</TD><TDbgcolor=LightYellow>性別</TD><TD>女</TD><TDrowspan=2><IMGSRC="image\center.gif"></TD></TR> <TR><TDbgcolor=FloralWhite>姓名</TD><TDcolspan=3><Ahref="">江小麗</A></TD></TR><TR><TDbgcolor=Cornsilk>推薦單位</TD><TDcolspan=4>宇宙公司</TD></TR></TABLE></P></BODY></HTML>
8.1.5其它標(biāo)記
1列表列表是HTML文檔內(nèi)容的一種重要表現(xiàn)形式，特別適合羅列有關(guān)信息內(nèi)容，具有清晰明了，易于查閱，操作性強的特點。列表分為有序列表、無序列表和自定義列表三種，而且列表可以嵌套，顯示時按層次縮進。1.無序列表無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標(biāo)記。無序列表使用<ul></ul>標(biāo)簽開始和結(jié)束，列表項使用<li></li>開始和結(jié)束。其中<li>標(biāo)記的屬性type可以設(shè)定的值是：disc：默認(rèn)值。實心圓circle：空心圓square：實心方塊none：不使用項目符號
<h4>無序列表測試</h4><ultype="disc"><li>愛好：<ultype="circle"><litype="circle">羽毛球</li><li>足球</li><li>乒乓球</li></ul></li><li>所上課程：<ultype="square"><li>計算機網(wǎng)絡(luò)技術(shù)</li><li>Web程序設(shè)計</li><li>互聯(lián)網(wǎng)數(shù)據(jù)庫</li></ul></li></ul>2.有序列表有序列表是一列項目，是在列表項左邊加上數(shù)字符號或其他有序的標(biāo)號，如a,b,c……；i,ii,iii……，可以設(shè)定從何處開始計數(shù)，由瀏覽器自動給予編號。有序列表使用<ol></ol>標(biāo)簽開始和結(jié)束，列表項使用<li></li>開始和結(jié)束。
<oltype=a><li>愛好：<olstart=3><li>羽毛球</li><li>足球</li><li>乒乓球</li></ol></li><li>所上課程：<oltype=i><li>計算機網(wǎng)絡(luò)技術(shù)</li><li>Web程序設(shè)計</li><li>互聯(lián)網(wǎng)數(shù)據(jù)庫</li></ol></li></ol>3.自定義列表自定義列表不僅僅是一列項目，而是項目及其注釋的組合。自定義列表以<dl>標(biāo)簽開始。每個自定義列表項以<dt>開始。每個自定義列表項的定義以<dd>開始。
<dl> <dt>計算機</dt> <dd>用來計算的儀器......</dd> <dt>顯示器</dt> <dd>以視覺方式顯示信息的裝置......</dd> </dl>2.多媒體標(biāo)記//超級鏈接形式接入音樂<HTML><HEAD><TITLE>武漢工業(yè)學(xué)院</TITLE></HEAD><BODY><ahref="cq.mp3">傳奇</a> </BODY></HTML>2.5.2多媒體標(biāo)記<embedsrc=“URL”>四個主要屬性：width：指定播放影音文件的寬度height:指定播放影音文件的寬度autostart：是否自動播放。值：true或noloop:是否循環(huán)播放。值：true或no2.5.2多媒體標(biāo)記src=“filename”設(shè)定音樂文件的路徑autostart="true/false"是否要音樂文件傳送完就自動播放，TRUE是要，F(xiàn)ALSE是不要，默認(rèn)為FALSEloop=“true/false/number”設(shè)定播放重復(fù)次數(shù)，LOOP=6表示重復(fù)6次，TRUE表示無限次播放，F(xiàn)ALSE播放一次即停止。startime=“分:秒”設(shè)定樂曲的開始播放時間，如20秒后播放寫為STARTIME=00:202.5.2多媒體標(biāo)記volumn=“0-100”設(shè)定音量的大小。如果沒設(shè)定的話，就用系統(tǒng)的音量。width/height設(shè)定控制面板的大小hidden=“true/false”隱藏控制面板controls="console/smallconsole"設(shè)定控制面板的樣子2.5.2多媒體標(biāo)記<HTML><HEAD><TITLE>武漢工業(yè)學(xué)院</TITLE></HEAD><BODY><P>這是一HTML的測試文件</P>
<bgsoundsrc=“cq.mp3"loop=3></BODY></HTML>2.5.2多媒體標(biāo)記//背景音樂插入背景音樂格式，不過只有在IE瀏覽器中才可以聽到。<bgsoundsrc="音樂文件地址"loop=循環(huán)數(shù)>8.2級聯(lián)式樣式表（CSS）
級聯(lián)式樣式表（CSS）為
HTML文檔提供美觀而一致的外觀。使用CSS樣式定義HTML頁和Web窗體中元素和文本的外觀和位置?？蓪tyle屬性以內(nèi)聯(lián)方式添加到許多HTML元素上，還可將CSS樣式嵌入到<STYLE>塊中或存儲在外部級聯(lián)式樣式表（.css）文件中。8.2
層疊樣式表概述8.2.1層疊樣式表的引出樣式表定義如何顯示HTML元素，就像HTML的字體標(biāo)簽和顏色屬性所起的作用那樣。樣式表定義也可以保存在HTML文件之外的后綴名為.css文件中，通過編輯這樣一個外部的CSS文檔，可使站點中所有頁面的布局和外觀全部發(fā)生改變，這特別適用于某些突發(fā)事件要求同時改變網(wǎng)站內(nèi)所網(wǎng)頁的顯示風(fēng)格。8.2.1層疊樣式表的引出樣式可以規(guī)定在單個的HTML元素中;在HTML頁的頭元素中;或在一個外部的CSS文件中;甚至可以在同一個HTML文檔內(nèi)部引用多個外部樣式表。8.2.1層疊樣式表的引出CSS樣式有許多種定義方法:可使用style屬性以內(nèi)聯(lián)方式添加到許多HTML元素上，可使用CSS樣式嵌入到<STYLE>塊中可存儲在外部級聯(lián)式樣式表文件中。8.2.2定義CSS
CSS規(guī)則由：選擇器和聲明構(gòu)成，其語法格式如下：選擇器{屬性：屬性值[;屬性:屬性值]}8.2.2定義CSS
屬性是需要設(shè)置的樣式屬性，每個屬性有一個屬性值，如果有多個屬性和屬性值時，可使用冒號將這些屬性分隔開。將h2元素內(nèi)的文字顏色定義為紅色，其CSS語法如下：H2{color:red;}8.2.2定義CSS
如果屬性值由若干個單詞組成時，則需要給這些屬性值添加引號，例如將段落P元素的字體字義為黑體或者宋體，其CSS語法如下：p{font-family:"黑體宋體";}8.2.2定義CSS
如果要定義不止一個屬性時，則需要用分號將每個聲明分開。例如將h1元素內(nèi)的文字顏色定義為黑色、文字的對齊方式使用居中對齊，其CSS語法如下：h1{text-align:center;color:black;}8.2.2定義CSS
如果要定義不止一個屬性時，則需要用分號將每個聲明分開。例如將h1元素內(nèi)的文字顏色定義為黑色、文字的對齊方式使用居中對齊，其CSS語法如下：h1{text-align:center;color:black;}<styletype="text/css">h1{ text-align:center; color:red;}</style></head><body><h1>居中，紅色</h1><h2>原樣顯示</h2><h1>居中，紅色</h1></body>8.2.2定義CSS
還可以對選擇器進行分組，并用逗號將需要分組的選擇器分開。這樣，被分組的選擇器就可以共享這些相同的聲明。例如把h1、h2、h3、h4標(biāo)題元素進行分組，讓這幾個標(biāo)題元素都使用紅色顯示，其CSS定義語法如下：h1,h2,h3,h4{ color:Red;}8.2.3選擇器種類1.屬性選擇器屬性選擇器是指CSS樣式定義選擇器使用HTML中的已有元素，例如<body>、<h1>、<a>等。<styletype="text/css">body{ text-align:center; color:Red;}</style></head><body>
居中，紅色</body>8.2.3選擇器種類2.派生選擇器派生選擇器允許根據(jù)文檔的上下文關(guān)系來確定某個標(biāo)簽的樣式。通過合理地使用派生選擇器，可以使HTML代碼變得更加整潔。 <style> u{color:blue; } pu{ color:red; font-family:黑體,楷體; } </style></head> <body>
<p>段落<u>紅色黑體帶下劃線</u>段落</p> <u>藍色帶下劃線</u> </body>8.2.3選擇器種類3.id選擇器id選擇器可以為標(biāo)有特定id的HTML元素指定特定的樣式，id選擇器以"#"來定義。<style> #one{color:red; font-size:45px; font-family:黑體,楷體; } #two{ color:blue; font-size:85px; font-family:楷體; } </style></head><body> <h2id="one">CSS測試字</h2> <h2id="two">段落</p></body>8.2.3選擇器種類4．類選擇器在CSS中，類選擇器以一個點號，后面樣式名的方式進行定義，例如：.head2{ text-align:center; color:red; font-weight:bold;}若要以內(nèi)聯(lián)方式應(yīng)用這種類型的樣式，可以直接在內(nèi)聯(lián)樣式的標(biāo)記或鏈標(biāo)簽添加class屬性，例如：<divclass="head2"><STYLETYPE="text/css"> BODY{background:#FBFBFB;font-size:9pt;} A:link{color:blue;text-decoration:none} A:active{color:red;text-decoration:none} A:visited{color:green;text-decoration:none} .head2{font-size:14pt;text-align:center;color:red;font-weight:bold;font-style:italic;}</STYLE><LINKREL=stylesheetType="text/css"HREF="mystyles.css"></HEAD><BODY> <DIVCLASS="head2"> Thistextiscentered,large,red <SPANstyle="color:green;font-style:normal;text-decoration:underline;"> andgreen </SPAN> ,bold,anditalic </DIV></BODY>8.2.3外部CSS樣式表
可以通過改變一個樣式文件來改變整個站點的外觀。外部CSS樣式表文檔是只包含樣式規(guī)則，并且以“.css”為擴展名的純文本文件，使用外部樣式表要通過<link>標(biāo)簽在（文檔的）頭部進行引入，其引入方法如下：<head> <linkrel="stylesheet"type="text/css"href="mystyle.css"/></head><STYLETYPE="text/css"> BODY{background:#FBFBFB;font-size:9pt;} A:link{color:blue;text-decoration:none} A:active{color:red;text-decoration:none} A:visited{color:green;text-decoration:none} .head2{font-size:14pt;text-align:center;color:red;font-weight:bold;font-style:italic;}</STYLE><LINKREL=stylesheetType="text/css"HREF="mystyles.css"></HEAD><BODY> <DIVCLASS="head2"> Thistextiscentered,large,red <SPANstyle="color:green;font-style:normal;text-decoration:underline;"> andgreen </SPAN> ,bold,anditalic </DIV></BODY>1.優(yōu)先級CSS樣式規(guī)則有外部樣式、內(nèi)部樣式和行內(nèi)樣式。外部樣式是把樣式定義在一個外部文件中，定義的樣式可以作用到整個網(wǎng)頁文件中；內(nèi)部樣式是在<style>標(biāo)記內(nèi)定義的樣式，定義的樣式同樣可以作用到整個網(wǎng)頁文件中；行內(nèi)樣式是在某個HTML標(biāo)記的屬性定義中定義的，僅作用在該標(biāo)記內(nèi)。8.2.4CSS樣式規(guī)則的優(yōu)先級及單位1.優(yōu)先級當(dāng)這三種定義的樣式“層疊”在一起時，即對某個標(biāo)記有這三種樣式定義，此時樣式應(yīng)用規(guī)則的優(yōu)先級從低到高分別是：外部樣式、內(nèi)部樣式和行內(nèi)樣式。8.2.4CSS樣式規(guī)則的優(yōu)先級及單位2.注釋注釋用來說明所寫代碼的含義，因此對于其他用戶讀懂這些代碼是很有作用的。對于任何編碼添加注釋都是非常有用處的。CSS用C/C++的標(biāo)記進行注釋的，“/*”放在注釋的開始處，“*/”在結(jié)束處。<HEAD> <TITLE>CSS例子</TITLE> <STYLETYPE="text/css"> H1{font-size:x-large;color:red}
/*這是一個CSS的定義*/ H2{font-size:large;color:blue} </STYLE></HEAD>3.CSS的單位（1）長度單位一個長度的值由可選的正號“＋”或負號“－”、接著的一個數(shù)字、還有標(biāo)明單位的兩個字母組成。在一個長度的值之中是沒有空格的，例如，1.3em就不是一個有效的長度的值，但1.3em就是有效的。一個為零的長度不需要兩個字母的單位聲明。無論是相對值還是絕對值長度，CSS1都支持。相對值單位確定一個相對于另一長度屬性的長度，因為它能更好地適應(yīng)不同的媒體，所以是首選的。以下是有效的相對單位：em（em，元素的字體的高度)ex（x-height，字母
“x”
的高度）
px（像素，相對于屏幕的分辨率）
絕對長度單位視輸出介質(zhì)而定，所以遜色于相對單位。以下是有效的絕對單位:in（英寸，1英寸=2.54厘米）
cm（厘米，1厘米=10毫米）
mm（米）
pt（點，1點=1/72英寸）
pc（帕，1帕=12點）
3.CSS的單位2.百分比單位一個百分比值由可選的正號“＋”或負號“－”、接著的一個數(shù)字，還有百分號“%”。在一個百分比值之中是沒有空格的。百分比值是相對于其它數(shù)值，同樣地用于定義每個屬性。最經(jīng)常使用的百分比值是相對于元素的字體大小。3.顏色單位顏色值是一個關(guān)鍵字或一個RGB格式的數(shù)字。WindowsVGA(視頻圖像陣列)形成了16個關(guān)鍵字:aqua，black，blue，fuchsia，gray，green，
lime，maroon，navy，olive，
purple，red，silver，teal，white，andyellow。3.CSS的單位RGB顏色可以有四種形式：#rrggbb（如，#00cc00）#rgb（如，#0c0）rgb（x,x,x），其中x是一個介乎0到255之間的整數(shù)（如，rgb（0,204,0））rgb（y%,y%,y%）y是一個介乎0.0到100.0之間的整數(shù)（如，rgb（0%,80%,0%））上述的例子指定同一顏色。3.CSS的單位8.2.5CSS樣式的屬性分類CSS屬性分為包括字體、顏色和背景、文本、邊框、用戶界面、表和視覺效果。1背景背景屬性通過更改顏色或包含圖像來控制背景。如果采用圖像作為Web頁的背景，也可指定其位置和平鋪屬性。1.背景色可以使用background-color屬性為元素設(shè)置背景色。這個屬性接受任何合法的顏色值。
CSS的顏色和背景屬性屬性屬性含義屬性值屬性書寫格式color定義前景色顏色如：H2{color:#000080}
background-color定義背景色<顏色>|transparent(透明)如：BODY{background-color:white}
background-image背景圖象圖片路徑如：BODY{background-image:url(http:///images/bg.gif)}
<styletype="text/css"> body{background-color:yellow} h1{background-color:#00ff00} h2{background-color:transparent} p{background-color:rgb(250,0,255)} p.no2{background-color:gray;padding:20px;}</style></head><body> <h1>這是標(biāo)題1</h1> <h2>這是標(biāo)題2</h2> <p>這是段落</p> <pclass="no2">這個段落設(shè)置了內(nèi)邊距。</p></body><styletype="text/css"> body{background-color:yellow} h1{background-color:#00ff00} h2{background-color:transparent} p{background-color:rgb(250,0,255)} p.no2{background-color:gray;padding:20px;}</style></head><body> <h1>這是標(biāo)題1</h1> <h2>這是標(biāo)題2</h2> <p>這是段落</p> <pclass="no2">這個段落設(shè)置了內(nèi)邊距。</p></body>2.背景圖像要把圖像放入背景，需要使用background-image屬性。background-image屬性的默認(rèn)值是none，表示背景上沒有放置任何圖像，如果要設(shè)置該屬性，必須為該屬性設(shè)置一個URL值，例如： body{background-image:url(1.gif);}
2.背景圖像一般情況下background-image屬性應(yīng)用到body元素，有時也可以應(yīng)用到段落標(biāo)記，也可以為行內(nèi)元素設(shè)定背景圖像。例如： p.content{background-image:url(2.gif);} /*段落標(biāo)記內(nèi)設(shè)定背景圖像*/ a.plan{background-image:url(3.gif);} /*超鏈設(shè)定背景圖像*/
<styletype="text/css"> body{background-image:url(1.gif);} p.content{background-image:url(2..gif);padding:20px;} a.plan{background-image:url(3.gif);padding:20px;} </style> </head> <body> <pclass="flower">我是一個有花紋背景的段落。 <ahref="#"class="radio">我是一個有放射性背景的鏈接。</a> </p> <p><b>注釋：</b>為了清晰地顯示出段落和鏈接的背景圖像，我們?yōu)樗鼈冊O(shè)置了少許內(nèi)邊距。</p> </body>3.背景圖像的定位與重復(fù)一般如果設(shè)定的圖像尺寸小于瀏覽器窗口大小時，圖像會被自動在在水平垂直方向上都平鋪。如果需要限定在某一個方向進行重復(fù)或者不重復(fù)，就需要設(shè)定background-repeat屬性。background-repeat屬性的值有三個，分別是：repeat-x（圖像水平方向重復(fù)）repeat-y（圖像垂直方向重復(fù)）no-repeat（不允許圖像在任何方向上重復(fù)）。3.背景圖像的定位與重復(fù)默認(rèn)背景圖像都從一個元素的左上角開始，例如： body { background-image:url(1.gif); background-repeat:repeat-y; /*背景圖像在瀏覽器窗口的垂直方向進行重復(fù)*/ }
3.背景圖像的定位與重復(fù)如果不希望背景圖像跟隨滾動，可以設(shè)置background-attachment屬性，例如： body { background-image:url(1.gif); background-repeat:no-repeat; background-position:bottomright; /*背景圖像位于瀏覽器窗口的底端右測*/ background-attachment:fixed /*背景圖像固定*/ } <style> body{ background-image:url(1.jpg); /*背景圖像為1.gif*/ background-color:green; /*背景色為綠色*/ background-repeat:no-repeat; /*背景圖像不重復(fù)*/ background-position:bottomright; /*背景圖像位于屏幕底端右邊*/ } </style></head><body>
</body>2.CSS文本CSS文本屬性用以改變頁面文本的顯示方式，這些屬性可以細化頁面的排版，生成特殊的文本效果。
屬性屬性含義屬性值Text-align水平對齊“左”（left）、“居中”（center）、“右”（right）或“兩端對齊”（justify）Vertical-align垂直對齊baseline|sub|super|top|text-top|middle|bottom|text-bottom|<百分比>word-spacing單詞間距“正常”（normal）或“自定義”letter-spacing字母間距“正常”（normal）或“自定義”line-height行間距normal|<數(shù)字>|<長度>|<百分比>text-indent文本縮進<長度>|<百分比>2.CSS文本說明：在垂直對齊的屬性值的說明如下：?
baseline（使元素和上級元素的基線對齊）?
middle（縱向?qū)R元素基線加上上級元素的x-高度——字母"x"的高度——的一半的中點）?
sub（下標(biāo)）?
super（上標(biāo)）?
text-top（使元素和上級元素的字體向上對齊）?
text-bottom（使元素和上級元素的字體向下對齊）?
影響相對于元素行的位置的關(guān)鍵字有
?
top（使元素和行中最高的元素向上對齊）?
bottom（使元素和行中最低的元素向下對齊）<styletype="text/css">
h1{background-color:yellow;} h4{letter-spacing:20px} p.uppercase{text-transform:uppercase} a{text-decoration:none;} </style> </head> <body>
<h1>背景色是黃色！</h1> <h4>字符間距20像素</h4> <pclass="uppercase">Thisissometextinaparagraph.</p> <ahref="">武漢輕工大學(xué)</a></body>3.字體字體格式屬性確定格式化文本在
Web瀏覽器中將如何顯示?？稍O(shè)置首選字體系列、字體大小和顏色，以及文本是否顯示為粗體、斜體或帶下劃線?？蓪⒆煮w格式設(shè)置屬性添加到在外部
CSS樣式表中定義的
CSS樣式規(guī)則，或添加到
Web頁＜HEAD＞部分的＜STYLE＞塊中定義的
CSS樣式規(guī)則。
3.字體若要將樣式規(guī)則應(yīng)用于
Web頁的＜BODY＞節(jié)中的某個特定
HTML元素，需要將
CLASS或
ID屬性添加到其值為所需
CSS樣式規(guī)則選擇器的元素的開始標(biāo)記中。也可將
CSS字體屬性直接添加到支持
STYLE屬性的
HTML元素中。
注意：如果定義了BODY{}樣式，則該頁上所有未由內(nèi)聯(lián)樣式格式化的文本都將以指定樣式顯示。
字體屬性
屬性屬性含義屬性值font-family選擇字體所有字體font-size選擇字體大小<絕對大小>|<相對大小>|<長度>|<百分比>font-weight字體加粗normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900font-variant字體變形normal(普通)|small-caps(小型大寫字母)font-style字體風(fēng)格normal(普通)|italic(斜體)|oblique(傾斜)<styletype="text/css">
body{font-family:sans-serif;} h1.Fantasy{ font-family:Fantasy; font-size:40px; } p.oblique{ font-style:oblique; font-size:60px; } </style> </head> <body>
<h1>Thisisheading1</h1> <h1class="Fantasy">Thisisaparagraph.</h1> <pclass="oblique">Thisisaparagraph.</p> </body>4.鼠標(biāo)屬性當(dāng)把鼠標(biāo)移動到不同的地方時；當(dāng)鼠標(biāo)需要執(zhí)行不同的功能時；當(dāng)系統(tǒng)處于不同的狀態(tài)時，都會使鼠標(biāo)的形狀發(fā)生改變。用CSS來改變鼠標(biāo)的屬性，就是當(dāng)鼠標(biāo)移動到不同的元素對象上面時，讓鼠標(biāo)以不同的形狀、圖案顯示。
在CSS當(dāng)中，這種樣式是通過“cursor”屬性來實現(xiàn)的。Cursor屬性有很多的屬性值，詳細列表如下：屬性值說明
Auto自動，根據(jù)默認(rèn)狀態(tài)自行改變
Crossshair十字線光標(biāo)。
Default默認(rèn)光標(biāo)，通常為箭頭光標(biāo)。
Hand手型光標(biāo)。
Help“幫助”光標(biāo)，它是箭頭和問號的組合。
Move移動
E-resize箭頭朝右方。
Ne-resize箭頭朝右上方。
Nw-resize箭頭朝左上方。
n-resize箭頭朝上方。
Se-resize箭頭朝右下方。
Sw-resize箭頭朝左下方。
s-resize箭頭朝下方。
text文本“I”型
wait等待<body> <h1style="font-family:文鼎新藝體簡">鼠標(biāo)效果</h1> <pstyle="font-family:行書體;font-size:16pt;color:red"> 請把鼠標(biāo)移到相應(yīng)的位置觀看效果。</p><divstyle="font-family:行書體；font-size:24pt；color:green；"> <p><spanstyle="cursor:hand">手的形狀</span><br> <spanstyle="cursor:move">移動</span><br> <spanstyle="cursor:ne-resize">反方向</span><br> <spanstyle="cursor:wait">等待</span><br> <spanstyle="cursor:help">求助</span> </p></div> </body>8..2.6CSS框模型1CSS框模型概述CSS框模型(BoxModel)規(guī)定了使用框來處理元素內(nèi)容、內(nèi)邊距、邊框和外邊距的方式CSS框模型概述CSS框模型概述內(nèi)邊距、邊框和外邊距都是可選的，默認(rèn)值是零。可以使用通用選擇器（即星號*）對所有元素進行設(shè)置，代碼如下所示：*{ margin:0; padding:0; }CSS框模型概述假設(shè)框的每個邊上有10個像素的外邊距和5個像素的內(nèi)邊距。如果希望這個元素框達到100個像素，就需要將內(nèi)容的寬度設(shè)置為70像素，CSS樣式定義方法如下所示：：#box{width:70px;margin:10px;padding:5px;}CSS框模型概述#box{width:70px;margin:
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 現(xiàn)代農(nóng)業(yè)裝備在種植業(yè)中的技術(shù)優(yōu)勢
- 現(xiàn)代醫(yī)療技術(shù)中的人才培養(yǎng)與團隊建設(shè)
- 校園文化與企業(yè)文化的對接與互鑒
- 14《母雞》說課稿-2023-2024學(xué)年統(tǒng)編版四年級語文下冊
- 24 《古人談讀書》說課稿-2024-2025學(xué)年語文五年級上冊統(tǒng)編版
- 6 傳統(tǒng)游戲我會玩2023-2024學(xué)年二年級下冊道德與法治同步說課稿（統(tǒng)編版）
- 14 圓明園的毀滅 說課稿-2024-2025學(xué)年語文五年級上冊統(tǒng)編版
- 5 樹和喜鵲（說課稿）-2023-2024學(xué)年統(tǒng)編版語文一年級下冊
- 17《爬天都峰》說課稿-2024-2025學(xué)年統(tǒng)編版語文四年級上冊
- 2023三年級英語下冊 Unit 4 Food and Restaurants Lesson 21 In the Restaurant說課稿 冀教版（三起）
- 中國儲備糧管理集團有限公司蘭州分公司招聘筆試真題2024
- 武漢2025年湖北武漢理工大學(xué)管理人員招聘筆試歷年參考題庫附帶答案詳解
- 第1課 隋朝統(tǒng)一與滅亡 課件（26張）2024-2025學(xué)年部編版七年級歷史下冊
- 提高金剛砂地坪施工一次合格率
- 【歷史】唐朝建立與“貞觀之治”課件-2024-2025學(xué)年統(tǒng)編版七年級歷史下冊
- 產(chǎn)業(yè)園區(qū)招商合作協(xié)議書
- 2025新譯林版英語七年級下單詞默寫表
- 盾構(gòu)標(biāo)準(zhǔn)化施工手冊
- 天然氣脫硫完整版本
- 中歐班列課件
- 2025屆高三數(shù)學(xué)一輪復(fù)習(xí)備考經(jīng)驗交流
評論
0/150
提交評論