容器元素容器元素_第1頁
容器元素容器元素_第2頁
容器元素容器元素_第3頁
容器元素容器元素_第4頁
容器元素容器元素_第5頁
已閱讀5頁，還剩39頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

第5章容器元素所謂容器元素是指該元素代表一塊區(qū)域，內(nèi)部用于放置其他元素。例如div元素就是最常見的容器元素。上一章用到的figure元素也是容器元素，屬于HTML語義化容器元素。本章首先介紹的容器元素是表格元素teble，然后介紹表單及相關(guān)元素，最后學習窗口容器，包括iframe子窗口、Bootstrap模態(tài)框和Bootstrap側(cè)邊面板。了解表格元素、子窗口元素、表單元素的基本標簽和基本屬性理解Bootstrap模態(tài)框的基本應用方法掌握各種表單元素的的基本功能能熟練制作網(wǎng)頁表格內(nèi)容安排表格5.1表單5.2窗口容器5.3小試牛刀5.45.1表格在CSS出現(xiàn)之前，表格元素曾廣泛用于布局與定位。一個表格由若干行元素組成，每一個行元素又包含若干單元格。HTML的內(nèi)容都放在這一個個單元格容器中。這些單元格可大可小，可橫向合并，也可縱向合并，還可在單元格中嵌套表格。新建頁面后第一件事就是畫一個適當?shù)谋砀?，然后在單元格中插入文字、圖片等內(nèi)容，再把表格線去掉，就完成了表格布局。CSS出現(xiàn)以后，布局與定位不再使用表格。表格逐漸回歸其原本的功能，即在頁面上用來顯示數(shù)據(jù)，構(gòu)建文本、圖像或其它對象。表格5.15.1.1表格相關(guān)標簽2.<table>標簽屬性1.表格定義基本格式：

<table> <tr><td>…</td><td>…</td>…</tr> <tr><td>…</td><td>…</td>…</tr> …</table>（1）align屬性（2）border屬性（3）width屬性（4）height屬性（5）cellpadding屬性（6）cellspacing屬性表格5.13.表格相關(guān)的其它配套標簽在一個表格中<table>標簽、<tr>標簽、<td>標簽是必須有的標簽，除此之外還有一些與表格相關(guān)的其它配套標簽。（1）表格標題標簽<caption><caption>標簽定義表格的標題。<caption>標簽必須直接放置到<table>標簽之后。每個表格只能規(guī)定一個標題。標題會自動根據(jù)表格的寬度居中并且顯示在表格上方。（2）表頭單元格標簽<th><th>標簽用于定義表格內(nèi)的表頭單元格，此單元格中的文字將以粗體的方式顯示。（3）表頭標簽<thead><thead>標簽用于組合HTML表格的表頭內(nèi)容。（4）表格的主體標簽<tbody><tbody>標簽用于組合HTML表格的主體內(nèi)容。（5）表格的頁腳標簽<tfoot><tfoot>標簽用于組合HTML表格的頁腳內(nèi)容。表格5.15.1.2表格邊框重疊CSS樣式屬性border-collapse格式：border-collapse：collapse|separate取值：collapse：表格邊框折疊為單一邊框separate：表格邊框分離5.1.3Bootstrap表格預定義類Bootstrap跟表格相關(guān)的預定義類如表5-2所列類名功能.table在table標簽中使用預定義類“.table”來設(shè)置表格的基礎(chǔ)樣式.table-striped在table標簽中添加“.table-striped”類，可以在行元素上添加背景條.table-bordered在table標簽中添加預定義類“.table-bordered”可以為表格添加邊框.table-borderless在table標簽中添加預定義類“.table-borderless”可以設(shè)置一個無邊框的表格.table-hover在table標簽中添加預定義類“.table-hover”可以為表格的每一行添加鼠標懸停效果（灰色背景）預定義類背景顏色.table-primary藍色.table-success綠色.table-danger紅色.table-dark黑色.table-info淺藍色.table-warning橘色.table-active灰色.table-secondary灰色.table-light淺灰色5.1.4使用Bootstrap制作表格案例5.1案例5-1：使用Bootstrap制作一個4行3列的表格，效果如圖5-2所示。表格分為表頭和主體兩大部分，分別用不用的背景顏色。表頭使用預定義類.table-dark，樣式為黑底白字；表格主體使用預定義類.table-primary，樣式為藍底黑字。在table標簽使用預定義類.table-hover，使鼠標懸停在表格主體時，所在行的背景顏色變?yōu)榛疑?lt;html><head><title>案例5-1</title><metacharset="utf-8"><linkhref="css/bootstrap.min.css"rel="stylesheet"></head><body><tableclass="tabletable-hover"><thead> <trclass="table-dark"><th>姓名</th><th>年齡</th><th>Email</th></tr></thead><tbody> <trclass="table-primary"><td>張三</td><td>23</td><td>john@</td></tr> <trclass="table-primary"><td>李四</td><td>24</td><td>mary@</td></tr> <trclass="table-primary"><td>王五</td><td>25</td><td>july@</td></tr></tbody></table></body></html>5.1.5任務(wù)5-1：在網(wǎng)頁中使用表格5.11.任務(wù)描述本任務(wù)在網(wǎng)頁中插入一個表格，效果如圖5-3所示。表格上面有標題。表格內(nèi)容有文字、圖片和超級鏈接。2.任務(wù)要求通過本任務(wù)的練習，要熟練掌握網(wǎng)頁中使用表格的傳統(tǒng)做法；掌握表格單元格橫向合并和縱向合并的方法；掌握表格的嵌套；掌握通過CSS設(shè)置表格框線為單線的方法等。3.任務(wù)分析表格總體是一個5行5列的表。第1行的第1個單元格使用屬性rowspan="4"向下合并4個單元格；第5行的第1個單元格使用屬性colspan="5"向右合并5個單元格，使第5行5個單元格合并為1個單元格。在第5行的這個單元格內(nèi)插入一個1行3列表格進行嵌套，單元格內(nèi)容分別為“紅色大衣”鏈接、“灰色大衣”鏈接和“黃色大衣”鏈接。通過表格的嵌套實現(xiàn)這三個鏈接橫向平均分布。表格框線通過在CSS設(shè)置table的樣式border-collapse:collapse;實現(xiàn)單線效果。嵌套的表格不顯示框線。5.1.5任務(wù)5-1：在網(wǎng)頁中使用表格5.14.工作過程步驟1站點規(guī)劃（1）新建文件夾作為站點，站點內(nèi)建立images文件夾，將本節(jié)素材存放在images文件夾中；（2）新建網(wǎng)頁，設(shè)置<title>為“任務(wù)5-1”；將網(wǎng)頁命名為task5-1.html保存在站點所在的目錄。步驟2建立表格的基本結(jié)構(gòu)網(wǎng)頁task5-1.html里插入5行5列的表格步驟3設(shè)置表格的基本樣式（1）設(shè)置表格寬度為640px，加上1px的黑色框線；（2）給單元格加上1px的黑色框線，完成設(shè)置之后的效果如圖5-4所示，代碼如下：table{width:640px;border:#0001pxsolid;}td{border:#0001pxsolid;}5.1.5任務(wù)5-1：在網(wǎng)頁中使用表格5.1步驟4設(shè)置框線為細線在CSS樣式表中給table加上一條聲明border-collapse:collapse;這樣就可以將內(nèi)外框線重疊，形成一條細線。完成設(shè)置的效果如圖5-5所示步驟5表格單元格合并（1）第1行的第1個單元格使用屬性rowspan="4"向下合并4個單元格；（2）第5行的第1個單元格使用屬性colspan="5"向右合并5個單元格，使第5行5個單元格合并為1個單元格。完成設(shè)置的效果如圖5-6所示5.1.5任務(wù)5-1：在網(wǎng)頁中使用表格5.1步驟6輸入表格的內(nèi)容（1）輸入表頭：在table標簽下面添加caption元素；（2）在第1個單元格插入圖片，設(shè)置該單元格的寬度為圖片寬度190px；（3）輸入表格文字內(nèi)容，完成之后的效果如圖5-7所示。5.1.5任務(wù)5-1：在網(wǎng)頁中使用表格5.1步驟7制作表格第5行的鏈接（1）在表格第5行的單元格內(nèi)嵌入一個1行3列的表，在3個單元格內(nèi)輸入鏈接內(nèi)容；（2）在CSS樣式表中去掉嵌入表格的內(nèi)外框線；（3）保存task5-1.html文件，完成紅色大衣表格的制作。步驟8制作灰色大衣表格（1）將task5-1.html另存為task5-1-step8.html；（2）在網(wǎng)頁task5-1-step8.html中修改插入的圖片，輸入灰色大衣表格的數(shù)據(jù)；（3）保存task5-1-step8.html文件，完成灰色大衣表格的制作，效果如圖5-8所示。步驟9制作黃色大衣表格（1）將task5-1.html另存為task5-1-step9.html；（2）在網(wǎng)頁task5-1-step9.html中修改插入的圖片，輸入黃色大衣表格的數(shù)據(jù)；（3）保存task5-1-step9.html文件，完成黃色大衣表格的制作，效果如圖5-9所示。5.2表單表單在網(wǎng)頁中主要負責數(shù)據(jù)采集功能，它是WEB前端與后臺數(shù)據(jù)的橋梁。一個表單有三個基本組成部分：表單標簽：表單采用<form>標簽進行定義；表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等，是在form元素內(nèi)插入<input>、<select>、<textarea>等標簽構(gòu)建；表單按鈕：包括提交按鈕、復位按鈕和其它的按鈕。表單5.25.2.1表單標簽<form>格式：<formaction="…"method="…">表單域…表單按鈕</form>功能：<form>標簽為瀏覽者在屏幕上建立一張表單。表單標簽<form>是成對標簽，有兩個屬性：action和method。（1）action屬性WWW是采用客戶/服務(wù)器工作方式的。在瀏覽器端得到的用戶反饋信息將被傳送到Web服務(wù)器中，由相應的處理程序進行處理。action屬性的作用就是指出該表單所對應的處理程序。它的參數(shù)值就是該程序的URL。（2）method屬性method屬性用于指定該表單的運行方式。屬性的參數(shù)值為get和post之一，默認的方式是get。當值為get時表示該表單主要是從服務(wù)器中獲取信息，具有較好的安全性，因此它傳送給服務(wù)器的反饋信息長度不能超過255個字符；當值為post時表示該表單主要是向服務(wù)器發(fā)送信息的，它傳送給服務(wù)器的反饋信息長度沒有限制，但安全性較差。表單5.25.2.2表單域表單域是指在<form>標簽內(nèi)的表單元素，包括文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。1.輸入標簽<input>格式：<inputtype="類型"value="值"name=”名稱”>功能：<input>標簽用于定義一個用戶輸入項。根據(jù)不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。<input>是個單標簽，沒有結(jié)束標簽。（1）文本框當type的類型為text時，input元素為文本框，如圖5-10所示：（2）密碼框當type的類型為password時，input元素為密碼框，如圖5-11所示。（3）文件選擇框當type=”file”時，瀏覽器會在相應位置產(chǎn)生一個文件選擇框，如圖5-12所示。表單5.2（4）單選項當type=radio時，表示該輸入項是一個單選項。如圖5-13所示。（5）復選項當type=checkbox時，表示該輸入項是一個復選項，如圖5-13所示。（6）隱藏項當type=“hidden”時，表示該輸入項是一個隱藏項。（7）email類型當type=“email”時，輸入類型用于電郵地址的輸入字段。效果如圖5-14所示（8）搜索框當type="search”時，輸入類型用于搜索字段，比如站內(nèi)搜索或百度搜索等。（9）url類型當type="url”時，輸入類型用于URL地址的輸入字段。表單5.2（10）數(shù)值類型當type="number"時，輸入類型用于數(shù)值的輸入字段。（11）電話類型當inputtype="tel"時，輸入類型用于電話號碼的輸入字段。該屬性外觀與常規(guī)的文本字段無異。如果是在移動端中，屬性type="tel"會喚起系統(tǒng)的數(shù)字鍵盤。（12）范圍類型當inputtype="range"時，輸入類型用于指定范圍值的輸入字段。（13）顏色類型當inputtype="color"時，輸入類型用于規(guī)定顏色。表單5.2（14）日期類型格式：<inputtype="date|month|week|time|datetime|datetime-local”/>取值：date：選擇日、月、年month：選擇月、年week：選擇周、年time：選擇時間（時、分）datetime：選擇時間、日期、月、年（UTC時間）datetime-local：選擇時間、日期、月、年（本地時間）表單5.22.選擇標簽<select> 格式：<select><optionvalue="值1">選項1</option><optionvalue="值2">選項2</option>…<optionvalue="值n">選項n</option></select>3.數(shù)據(jù)列表標簽<datalist>格式：<inputlist="name"/><datalistid="name"><optionvalue="選項1"><optionvalue="選項2"><optionvalue="選項3"></datalist>表單5.24.文本域標簽<textarea> 格式：<textarearows="行值"cols="列值"></textarea>5.標簽<label> 格式：<labelfor=“id名稱”>文字</label>功能：<label>標簽為input元素定義標注。label元素不會向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標用戶改進了可用性。當用戶選擇該標簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相關(guān)的表單控件上。label中for屬性,表示label標簽要綁定的HTML元素，當點擊這個標簽的時候，所綁定的元素將獲取焦點。

表單5.25.2.3表單按鈕表單按鈕包括提交按鈕、復位按鈕和一般按鈕。這三種按鈕通過<input>標簽的不同類型來實現(xiàn)。1.提交按鈕一個form表單必須要有提交按鈕，才能將表單數(shù)據(jù)傳送到后臺數(shù)據(jù)庫之中。表單元素中可通過以下兩種方法將表單的輸入信息傳送給服務(wù)器。（1）提交按鈕格式：<inputtype="submit"value="按鈕文字"name="名稱">（2）圖像按鈕格式：<inputtype="image"value="按鈕文字"name="名稱">2.復位按鈕格式：<inputtype="reset"value="按鈕文字"name="名稱">3.普通按鈕格式1：<inputtype="button"value="按鈕文字"name="名稱"onclick="">格式2：<buttononclick="">按鈕文字</button>表單5.25.2.4表單元素相關(guān)的其它屬性表單元素相關(guān)的屬性有自動地獲得焦點屬性autofocus、提示文字屬性placeholder和必填字段屬性equired。1.autofocus屬性2.placeholder屬性3.required屬性5.2.5Bootstrap表單元素樣式Bootstrap表單元素樣式包括Bootstrap按鈕類的樣式和表單元素排列位置的樣式。1.Bootstrap按鈕類Bootstrap按鈕類是一系列按鈕的樣式，包括.btn類、.btn-primary類、.btn-secondary類、.btn-success類、.btn-info類、btn-warning類、.btn-danger類、.btn-dark類、.btn-light類、.btn-link類等。其中預定義.btn類用于定義基本按鈕，然后再通過其它類去定義按鈕的樣式。按鈕類可用于<a>、<button>、<input>標簽上。2.Bootstrap表單元素排列位置的樣式（1）.form-label類與.form-check-input類.form-label類作用在<lable>標簽，用來確保標簽元素有一定的內(nèi)邊距。.form-check-input類作用在<inputtype=”checkbox”>標簽或者<inputtype=”radio”>標簽，用來修飾復選框和單選按鈕。（2）.form-control類“.form-control”類作用在表單元素。使用了.form-control類的表單元素寬度都是設(shè)置為100%，size屬性失效，并且加上邊框樣式5.2.6表單案例5.25.2.6使用Bootstrap制作一個網(wǎng)上調(diào)查表單案例案例5-2：使用Bootstrap制作一個網(wǎng)上調(diào)查的表單，效果如圖5-30所示。網(wǎng)上調(diào)查表單包含兩個文本框、1個文本域、1個下拉列表、1組單選項、1組多選項、1個提交按鈕和1個重置按鈕以及若干label元素。表單整體用“.container”類使其居中。在需要加邊距的元素使用“.form-label”類或“.form-check-input”類。兩個文本框和1個文本域用“.form-control”類定義其顯示的寬度。下拉列表、單選項、多選項通過預定義類“.row”和“.col”去實現(xiàn)各個元素的橫向并排。表單內(nèi)的文字全部使用了<label>標簽。在<label>標簽中分別加入for屬性，點擊label元素，將焦點轉(zhuǎn)到for屬性匹配的id所在的元素中。代碼如下：<html><head><metacharset="utf-8"><title>案例5-2</title><linkhref="css/bootstrap.min.css"rel="stylesheet"type="text/css"></head><body><formaction=""method="get"class="container"><labelfor="xm"class="form-label">昵稱：</label><inputtype="text"name="xm"id="xm"class="form-controlform-label"/><labelfor="bh"class="form-label">編號：</label><inputtype="text"name="bh"id="bh"class="form-controlform-label"/><labelfor="jy"class="form-label">您對中國足球的建議：</label><textarearows="10"cols="60"name="jy"id="jy"class="form-control"></textarea><divclass="row"><divclass="coltext-center"><labelfor="zy">您的職業(yè)：</label><br/><selectsize="1"name="zy"id="zy"><option>運動員</option><option>醫(yī)生</option><option>導游</option><option>其他</option></select></div><divclass="coltext-center"><label>您的性別：</label><br/><inputtype="radio"name="xb"value="1"checked="checked"class="form-check-input"/>男<inputtype="radio"name="xb"value="0"class="form-check-input"/>女</div><divclass="coltext-center"><label>您經(jīng)常參加的運動:</label><br/><inputtype="checkbox"name="xb1"value="1"class="form-check-input"/>爬山<br/><inputtype="checkbox"name="xb2"value="2"class="form-check-input"/>足球<br/><inputtype="checkbox"name="xb3"value="3"class="form-check-input"/>藍球</div></div><divclass="text-center"><inputtype="submit"value="提交"/><inputtype="reset"value="重選"/></div></form></body></html>5.2.7任務(wù)5-2：運用HTML5表單標簽制作注冊頁面5.2

1.任務(wù)描述本任務(wù)在網(wǎng)頁中插入一個表單，制作注冊頁面，效果如圖5-31所示。表單域包含文本框、密碼框、數(shù)據(jù)列表、email類型、電話類型、url類型、數(shù)值類型、范圍類型、顏色類型、復選項、提交按鈕等表單元素。2.任務(wù)要求通過本任務(wù)的練習，學生要全面掌握常用表單元素的基本制作方法；掌握label元素對表單元素焦點的控制方法；掌握自動獲得焦點屬性、必填字段屬性、提示文字屬性的基本設(shè)置。5.23.任務(wù)分析本任務(wù)在表單中插入若干input元素，通過在<input>標簽中設(shè)置不同的type屬性，呈現(xiàn)出不同的輸入框類型。表單內(nèi)的文字全部使用了<label>標簽。在<label>標簽中分別加入for屬性，點擊label元素，將焦點轉(zhuǎn)到for屬性對應的id所在的元素中。在label元素中，文字帶星號的為必填字段，在相應id的input元素中設(shè)置required屬性，則該輸入框為必填字段。第一個輸入框是文本框，在input元素中增加autofocus屬性，則頁面加載時自動獲得焦點；第二個輸入框是密碼框，設(shè)置maxlength屬性值為"8"，即最大字符數(shù)8位，再設(shè)置placeholder屬性值為"8位字符"，則在瀏覽器中密碼框會呈現(xiàn)文字提示："8位字符"；“性別”輸入框通過數(shù)據(jù)列表datalist元素去實現(xiàn)項目內(nèi)容選擇；“出生日期”使用日期型輸入框；email類型、電話類型和url類型在輸入時必須使用正確的輸入格式，否則會出現(xiàn)錯誤提示；“您對球隊的排名目標”使用數(shù)值類型，取值范圍在1至18；“您對目前球隊表現(xiàn)認可度”為范圍類型，取值范圍在1至100。5.2.7任務(wù)5-2：運用HTML5表單標簽制作注冊頁面5.25.2.7任務(wù)5-2：運用HTML5表單標簽制作注冊頁面4.工作過程步驟1站點規(guī)劃新建文件夾作為站點，在站點內(nèi)新建網(wǎng)頁，設(shè)置<title>為“任務(wù)5-2”。將網(wǎng)頁命名為task5-2.html保存在站點所在的目錄。步驟2建立表單網(wǎng)頁的基本結(jié)構(gòu)（1）網(wǎng)頁task5-2.html里最外層插入div#container元素，在div#container內(nèi)插入表單，代碼如下：<divid="container"> <formmethod="get"action="#"> </form></div>（2）設(shè)置div#container的基本樣式，定義寬度為600px，水平居中5.25.2.7任務(wù)5-2：運用HTML5表單標簽制作注冊頁面步驟3制作“用戶名”輸入框（1）在表單中插入div.item元素，里面包括label文字和文本框兩部分；（2）在input元素中設(shè)置type="text"為文本框。在input元素中增加autofocus屬性，則頁面加載時自動獲得焦點；在input元素中增加required屬性，則該文本框為必填字段；（3）在input元素中增加id，然后在<label>標簽中加入for屬性，for屬性值為文本框的id，則在瀏覽器點擊label元素時，焦點會轉(zhuǎn)到文本框中；（4）設(shè)置div.item元素的樣式，設(shè)置label元素為行內(nèi)塊，里面的文字向右對齊。步驟4制作“密碼”輸入框（1）“密碼”輸入包括“密碼：”和“確認密碼：”兩部分。在表單中插入兩個div.item元素，里面分別包括label文字和密碼框兩部分；（2）在input元素中設(shè)置type="password"為密碼框。在input元素中設(shè)置maxlength屬性值為"8"，即最大字符數(shù)8位，再設(shè)置placeholder屬性值為"8位字符"，則在瀏覽器中密碼框會呈現(xiàn)文字提示："8位字符"。5.25.2.7任務(wù)5-2：運用HTML5表單標簽制作注冊頁面步驟5制作“性別”輸入框（1）“性別”輸入框通過數(shù)據(jù)列表datalist元素去實現(xiàn)男女選項。在表單中插入div.item元素，里面包括label文字和文本框以及數(shù)據(jù)列表datalist元素三部分；（2）設(shè)置datalist元素的id，并在input元素設(shè)置list屬性值為datalist元素的id值，即在輸入框中指定了數(shù)據(jù)列表來源。步驟6制作“出生日期”輸入框（1）在表單中插入div.item元素，里面包括label文字和輸入框兩部分；（2）“出生日期”使用日期型輸入框。在input元素中設(shè)置type=“date”為如期型輸入框。5.25.2.7任務(wù)5-2：運用HTML5表單標簽制作注冊頁面步驟7制作“Email”輸入框、“聯(lián)系電話”輸入框和“個人主頁”輸入框（1）在表單中插入三個div.item元素，里面分別包括label文字和輸入框兩部分；（2）在input元素中設(shè)置type="email"為“Email”輸入框；（3）在input元素中設(shè)置type="tel"為“聯(lián)系電話”輸入框；（4）在input元素中設(shè)置type="url"為“個人主頁”輸入框；email類型、電話類型和url類型在輸入時必須使用正確的輸入格式，否則會出現(xiàn)錯誤提示。步驟8制作“排名目標”輸入框和“表現(xiàn)認可度”輸入框（1）在表單中插入兩個div.item元素，里面分別包括label文字和輸入框兩部分；（2）在input元素中設(shè)置type="number"為數(shù)值類型輸入框?！澳鷮η蜿牭呐琶繕恕笔褂脭?shù)值類型，取值范圍在1至18；（3）在input元素中設(shè)置type="range"為范圍類型輸入框?！澳鷮δ壳扒蜿牨憩F(xiàn)認可度”為范圍類型，取值范圍在1至100。5.25.2.7任務(wù)5-2：運用HTML5表單標簽制作注冊頁面步驟9制作“顏色”輸入框（1）在表單中插入一個div.item元素，里面包括label文字和輸入框兩部分；（2）在input元素中設(shè)置type="color"為顏色類型輸入框。步驟10制作注冊確認和提交按鈕（1）在表單中插入一個復選框，在input元素中設(shè)置type="checkbox"即為復選框；（2）輸入同意注冊文字；（3）在表單中插入一個提交按鈕，在input元素中設(shè)置type=“submit”即為提交按鈕；（4）設(shè)置提交按鈕的樣式。步驟11保存文件，完成制作。5.3窗口容器本節(jié)介紹的iframe浮動框架和Bootstrap模態(tài)框、Bootstrap側(cè)邊面板都是跟窗口相關(guān)的容器。iframe浮動框架是在父窗口內(nèi)設(shè)置的一個子窗口，把其他頁面的內(nèi)容顯示在子窗口中；Bootstrap模態(tài)框（Modal）則是覆蓋在父窗體上的子窗體；Bootstrap側(cè)邊面板是在窗體側(cè)邊隱藏或顯示面板。窗口容器5.3

5.3.1浮動框架標簽<iframe> 格式：<iframesrc="URL"name="子窗口名稱"></iframe>功能：<iframe>標簽創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架，該框架以行內(nèi)塊的形式在一個頁面中直接引入另一個頁面，又稱為浮動窗口或子窗口。<iframe>標簽可用于將窗口畫面分割成多個小窗口，且每個小窗口中，可以顯示不同的網(wǎng)頁，達到在瀏覽器中同時瀏覽不同網(wǎng)頁的效果。當將瀏覽的畫面分割成多個窗口后，各窗口將可以扮演不同的功能。比如，可以把網(wǎng)頁做成：一個窗口顯示的是目錄，另一個窗口顯示在目錄中所選取的項目內(nèi)容。<iframe>標簽的常用屬性如下：（1）src屬性：用于設(shè)定子窗口顯示的初始頁面。如果沒有設(shè)定src屬性，則子窗口不會有初始顯示的內(nèi)容；（2）frameborder屬性：設(shè)定圍繞iframe的邊框?qū)挾取＠?，要隱藏iframe的邊框，需要設(shè)置frameborder屬性值為0（3）height屬性：定義邊框的寬度；（4）width屬性：定義邊框的高度；（5）scrolling屬性：定義是否有滾動條（yes|no|auto)。當子窗口顯示的內(nèi)容超出子窗口的寬度和高度時，默認有滾動條。（6）name屬性：規(guī)定iframe子窗口的名稱。如果要把子窗口作為超級鏈接的目標窗口，則必須給子窗口定義名字。窗口容器5.3

5.5.2Bootstrap窗口容器本節(jié)介紹Bootstrap窗口容器包括模態(tài)框和側(cè)邊面板。1.Bootstrap模態(tài)框模態(tài)框（Modal）是覆蓋在父窗體上的子窗體。子窗體可提供信息交互等內(nèi)容。使用模態(tài)框需要在頭元素引入Bootstrap的基本CSS文件bootstrap.min.css和bootstrap的基本js文件bootstrap.bundle.min.js。模態(tài)框的構(gòu)建是把一個div元素用預定義類“.modal”去定義，并且要設(shè)置其id屬性。該div元素里面包含一個用預定義類“.modal-dialog”定義的對話框。要激發(fā)這個模態(tài)框時，在按鈕中設(shè)置data-bs-target屬性為對應模態(tài)框的id值，同時設(shè)置data-bs-toggle="modal"即可。屬性功能data-bs-target="#identifier"指定要切換的特定的模態(tài)框（帶有id="identifier"），是激發(fā)模態(tài)框必須有的屬性data-bs-toggle="modal"用于打開模態(tài)窗口，是激發(fā)模態(tài)框必須有的屬性data-bs-dismiss="modal"用于關(guān)閉模態(tài)窗口類名功能.modal用于定義模態(tài)框，把<div>的內(nèi)容識別為模態(tài)框，是構(gòu)建模態(tài)框必須有的預定義類。.modal-dialog用于定義模態(tài)對話框，是構(gòu)建模態(tài)框必須有的預定義類。.modal-content用于為模態(tài)窗口整體設(shè)置樣式.modal-header定義模態(tài)框頭部.modal-title定義模態(tài)框標題.modal-body定義模態(tài)框內(nèi)容，用于為模態(tài)窗口的主體設(shè)置樣式.modal-footer定義模態(tài)框底部，用于為模態(tài)窗口的底部設(shè)置樣式窗口容器5.3

2.Bootstrap側(cè)邊面板Bootstrap側(cè)邊面板類似于模態(tài)框，都需要引用jQuery插件。點擊如圖5-32所示的兩個按鈕，可打開側(cè)邊面板，如圖5-33所示。

側(cè)邊面板通過offcanvas類進行創(chuàng)建,通過以下四個類來控制側(cè)邊面板的位置：.offcanvas-start顯示在頁面左側(cè)；.offcanvas-end顯示在頁面右側(cè)；.offcanvas-top顯示在頁面頂部；.offcanvas-bottom顯示在頁面底部?？梢允褂胊鏈接的href

屬性或者button元素使用data-bs-target屬性來設(shè)置側(cè)邊面板打開開關(guān)。這兩種情況都需要使用data-bs-toggle="offcanvas"。

5.3.3Bootstrap模態(tài)框應用案例5.3

案例5-3：運用Bootstrap制作一個模態(tài)框，如圖5-34所示。點擊按鈕時打開模態(tài)框，在模態(tài)對話框點擊“關(guān)閉”按鈕則關(guān)閉模態(tài)框<html><head><title>案例5-3</title><metacharset="utf-8"><linkhref="css/bootstrap.min.css"rel="stylesheet"><scriptsrc="js/bootstrap.bundle.min.js"></script></head><body><divclass="containermt-3"><p>點擊按鈕打開模態(tài)框</p><buttontype="button"class="btnbtn-primary"data-bs-toggle="modal"data-bs-target="#myModal">打開模態(tài)框</button></div><!—構(gòu)建模態(tài)框--><divclass="modal"id="myModal"><divclass="modal-dialog"><divclass="modal-content"><!--模態(tài)框頭部--><divclass="modal-header"> <h4class="modal-title">模態(tài)框標題</h4> <buttontype="button"class="btn-close"data-bs-dismiss="modal"></button></div><!--模態(tài)框內(nèi)容--><divclass="modal-body">模態(tài)框內(nèi)容..</div><!--模態(tài)框底部--><divclass="modal-footer"> <buttontype="button"class="btnbtn-danger"data-bs-dismiss="modal">關(guān)閉</button></div></div></div></div></body></html>5.3.4任務(wù)5-3：運用iframe制作子窗口網(wǎng)頁5.3

1.任務(wù)描述按圖5-35效果設(shè)計并制作網(wǎng)頁，其導航欄包括：封面、靜夜思、春曉、憫農(nóng)，點擊導航超級鏈接，在下面的子窗口顯示相應的內(nèi)容。初始顯示為圖片封面。5.3

2.任務(wù)要求通過本任務(wù)的練習，要掌握在網(wǎng)頁中創(chuàng)建子窗口的基本方法；熟練掌握<iframe>標簽的基本語法；掌握在超鏈接中如何使用指定名字的子窗口作為目標窗口。3.任務(wù)分析本任務(wù)總共制作4個網(wǎng)頁文件：主網(wǎng)頁為task5-3.html，網(wǎng)頁jys.html為唐詩《靜夜思》，網(wǎng)頁cx.h

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論