《nternet與web技術(shù)》實驗指導(dǎo)書綜述

《Internet與web技術(shù)》實驗指導(dǎo)書

目錄《網(wǎng)頁制作》實驗大綱實驗（一）簡單網(wǎng)頁制作實驗（二）CSS初步應(yīng)用實驗（三）XHTML語言實驗（四）CSS選擇器實驗（五）應(yīng)用背景圖像實驗（六）CSS浮動布局實驗（七）CSS定位布局實驗（八）導(dǎo)航條和表單實驗（九）開發(fā)環(huán)境的使用及C#語法實驗（十）構(gòu)建新聞類實驗（十一）控件使用及站點配置實驗（十二）創(chuàng)建數(shù)據(jù)庫操作類實驗（十三）新聞列表頁及內(nèi)容頁制作實驗（十四）綁定數(shù)據(jù)并顯示信息實驗（十五）使用LINQ及Ajax改進網(wǎng)站實驗（十六）構(gòu)建統(tǒng)一的站點頁面

實驗一簡單網(wǎng)頁制作一、實驗?zāi)康?．熟悉Dreamweaver軟件的操作界面。2．掌握建立本地站點的方法。3．掌握簡單網(wǎng)頁制作方法。4．掌握超鏈接的建立方法。二、實驗內(nèi)容1．創(chuàng)建“潛水俱樂部”站點。2．制作“俱樂部首頁”、“俱樂部簡介”、“近期活動”、“精彩圖片”、“在線預(yù)約”5個網(wǎng)頁，并完成網(wǎng)頁之間的超鏈接。三、操作步驟1．創(chuàng)建“潛水俱樂部”站點（1）在D盤新建文件夾，命名為myweb；（2）將images文件夾和gallery文件夾復(fù)制到中myweb中；（3）啟動Dreamweaver，使用“站點｜新建站點”命令創(chuàng)建站點。2．制作“俱樂部首頁”。（1）新建網(wǎng)頁。（2）使用“文件｜保存”命令保存網(wǎng)頁，命名為index.html。（3）在文檔工具欄上設(shè)置網(wǎng)頁標(biāo)題“泡泡潛水俱樂部歡迎你”。（4）從“文本.txt”中將首頁的相關(guān)文字粘貼到網(wǎng)頁中。（5）設(shè)置一級標(biāo)題、二級標(biāo)題、三級標(biāo)題、項目列表、編號列表。（6）插入圖像。（7）在Copyright后插入版權(quán)符號?。（8）在電話號碼之間插入半角空格。（9）在電子郵箱地址上建立超鏈接，mailto:vip@BubbleU。（10）選中網(wǎng)頁內(nèi)容，然后單擊“插入Div標(biāo)簽”按鈕，分別插入header、navigation、mainContent、footer共4個Div。（11）保存網(wǎng)頁，按F12，預(yù)覽網(wǎng)頁。3．制作“俱樂部簡介”網(wǎng)頁。（1）在文件面板上復(fù)制index.html網(wǎng)頁，重新命名為about.html。（2）在文件面板上雙擊打開about.html。（3）刪除mainContent區(qū)域中的原有內(nèi)容，然后粘貼俱樂部簡介文字。（4）設(shè)置二級標(biāo)題。（5）選中“國際潛水運動協(xié)會”，設(shè)置為“強調(diào)”。（6）選中“泡泡俱樂的宗旨是……開創(chuàng)新的篇章”，設(shè)置為“塊引用”。（7）保存網(wǎng)頁，按F12，預(yù)覽網(wǎng)頁。4．制作“近期活動”網(wǎng)頁。（1）在文件面板上復(fù)制index.html網(wǎng)頁，重新命名為events.html。（2）在文件面板上雙擊打開events.html。（3）刪除mainContent區(qū)域中的原有內(nèi)容，然后粘貼俱樂部近期活動文字。（4）設(shè)置二級標(biāo)題。（5）插入表格。（6）在表格中輸入文字。（7）保存網(wǎng)頁，按F12，預(yù)覽網(wǎng)頁。5．制作“精彩圖片”網(wǎng)頁。（1）在文件面板上復(fù)制index.html網(wǎng)頁，重新命名為gallery.html。（2）在文件面板上雙擊打開gallery.html。（3）刪除mainContent區(qū)域中的原有內(nèi)容，然后粘貼精彩圖片文字。（4）設(shè)置二級標(biāo)題。（5）插入5張圖片，為每張圖片設(shè)置替換文本。（6）選中圖片及其下面的段落，然后單擊“插入Div標(biāo)簽”按鈕，將圖片及其說明文字分別裝入5個Div中。（7）保存網(wǎng)頁，按F12，預(yù)覽網(wǎng)頁。6．制作“在線預(yù)約”網(wǎng)頁。（1）在文件面板上復(fù)制index.html網(wǎng)頁，重新命名為reserve.html。（2）在文件面板上雙擊打開reserve.html。（3）刪除mainContent區(qū)域中的原有內(nèi)容，然后粘貼在線預(yù)約文字。（4）設(shè)置二級標(biāo)題。（5）插入“表單”。（6）光標(biāo)置于表單內(nèi)，插入“菜單”表單元素。（7）選中“菜單”，在屬性面板上單擊“列表值”按鈕，設(shè)置選項。（8）在表單內(nèi)插入其它表單元素。（9）保存網(wǎng)頁，按F12，預(yù)覽網(wǎng)頁。7．建立網(wǎng)站內(nèi)各頁面之間的超鏈接。

實驗二CSS初步應(yīng)用一、實驗?zāi)康某醪秸莆諡榫W(wǎng)頁添加CSS樣式表的方法。二、實驗內(nèi)容為“潛水俱樂部”網(wǎng)站中的5個網(wǎng)頁添加CSS樣式表。三、操作步驟1．創(chuàng)建“潛水俱樂部”站點（1）將“實驗二”文件夾中的myweb文件夾復(fù)制D盤；（2）啟動Dreamweaver，使用“站點｜新建站點”命令新建“潛水俱樂部”站點，并指定myweb文件夾為“潛水俱樂部”站點的本地根文件夾。2．打開“index.html”文件。3．新建CSS樣式表文件，保存在myweb文件夾中，命名為style.css。（注意：此時文檔窗口中有兩個文件，一個網(wǎng)頁文件，一個樣式表文件。）4．為“index.html”文件附加樣式表，并添加樣式。（1）將文檔窗口切換至index.html文件。（2）單擊CSS面板上的“附加樣式表”按鈕，并選擇style.css作為外部樣式表。（3）將文檔窗口切換至style.css文件，添加如下樣式。*是通配選擇器。設(shè)置網(wǎng)頁上所有元素的邊界（margin）為0，填充（padding）為0。*是通配選擇器。設(shè)置網(wǎng)頁上所有元素的邊界（margin）為0，填充（padding）為0。 margin:0; padding:0;body是類型選擇器。設(shè)置網(wǎng)頁主體（body）上的文字（font）大小為0.75字體高（em），字體為body是類型選擇器。設(shè)置網(wǎng)頁主體（body）上的文字（font）大小為0.75字體高（em），字體為“宋體”，文字顏色（color）為#000080，網(wǎng)頁的背景顏色（background-color）為#e2edff。body{ font:0.75em"宋體"; color:#000080; background-color:#e2edff;p,h2,h3是群選擇器。同時設(shè)置段落（p）、二級標(biāo)題（h2）、三級標(biāo)題（h3）的邊界（margin）上下值為0.8字體高（em），左右值為0。p,h2,h3是群選擇器。同時設(shè)置段落（p）、二級標(biāo)題（h2）、三級標(biāo)題（h3）的邊界（margin）上下值為0.8字體高（em），左右值為0。p,h2,h3{ margin:0.8em0;p,li是群選擇器。同時設(shè)置段落（p）、列表項（li）的行高（line-height）為1.8倍。p,li是群選擇器。同時設(shè)置段落（p）、列表項（li）的行高（line-height）為1.8倍。p,li{ line-height:1.8;}h1是類型選擇器。設(shè)置一級標(biāo)題（h1）的文字大?。╢ont-size）為基礎(chǔ)字號的180%，文字顏色（color）為白色。h1是類型選擇器。設(shè)置一級標(biāo)題（h1）的文字大?。╢ont-size）為基礎(chǔ)字號的180%，文字顏色（color）為白色。 font-size:180%; color:#FFFFFF;}h2是類型選擇器。設(shè)置二級標(biāo)題（h2）的文字大小和文字顏色。h2是類型選擇器。設(shè)置二級標(biāo)題（h2）的文字大小和文字顏色。 font-size:150%;h3是類型選擇器。設(shè)置h3的文字大小和文字顏色。h3是類型選擇器。設(shè)置h3的文字大小和文字顏色。文字粗細（font-weight）為正常（normal）。背景圖像（background）為dot.gif，該背景圖像不重復(fù)（no-repeat），位于h3的左上角（lefttop）。左填充（padding-left）為15像素。}h3{ font-size:100%; color:#FF6633; font-weight:normal; background:url(images/dot.gif)no-repeatlefttop; padding-left:15px;}ol是類型選擇器。設(shè)置編號列表（ol）的左邊界（margin-left）為２字體高（em）。ol是類型選擇器。設(shè)置編號列表（ol）的左邊界（margin-left）為２字體高（em）。 margin-left:2em;a是類型選擇器。設(shè)置超鏈接（a）的文字顏色為#000080，文字粗細（font-weight）為粗體（bold）。a是類型選擇器。設(shè)置超鏈接（a）的文字顏色為#000080，文字粗細（font-weight）為粗體（bold）。a{ color:#000080;a:hover是偽類選擇器。設(shè)置超鏈接（a）鼠標(biāo)經(jīng)過（hover）時，文本裝飾（text-decoration）為無裝飾（none），文字顏色為白色，背景顏色為#000080。a:hover是偽類選擇器。設(shè)置超鏈接（a）鼠標(biāo)經(jīng)過（hover）時，文本裝飾（text-decoration）為無裝飾（none），文字顏色為白色，背景顏色為#000080。}a:hover{#header是ID選擇器。設(shè)置#header塊的背景顏色為#000080，背景圖像為header-bg.jpg，該背景圖像不重復(fù)，位于#header塊的右下角。#header是ID選擇器。設(shè)置#header塊的背景顏色為#000080，背景圖像為header-bg.jpg，該背景圖像不重復(fù)，位于#header塊的右下角。填充（padding）上、右、下、左值分別是40px、0、5px、20px。 color:#FFFFFF; background-color:#000080;}#header{ background:#000080url(images/header-bg.jpg)no-repeatrightbottom;設(shè)置#header塊的下邊框（border-bottom）寬度為3px，邊框樣式為實線（solid），邊框顏色為#7da5d8。 padding:40px05px20px;設(shè)置#header塊的下邊框（border-bottom）寬度為3px，邊框樣式為實線（solid），邊框顏色為#7da5d8。 border-bottom:3pxsolid#7da5d8;#navigation是ID選擇器。設(shè)置#navigation塊的寬度（width）為180px，向左浮動（float）。背景顏色#98b6e8，背景圖像nav-bg.jpg，該背景圖像不重復(fù)（no-repeat），位于左下角（leftbottom）。#navigation是ID選擇器。設(shè)置#navigation塊的寬度（width）為180px，向左浮動（float）。背景顏色#98b6e8，背景圖像nav-bg.jpg，該背景圖像不重復(fù)（no-repeat），位于左下角（leftbottom）。#navigation{ width:180px; float:left;設(shè)置#navigation塊的最小高度（min-height）為150px，底部填充330px。150+330=480由于IE6瀏覽器不識別min-height屬性，所以使用“下劃線屬性過濾器”專門為IE6瀏覽器設(shè)置高度（height）為150px。設(shè)置#navigation塊的最小高度（min-height）為150px，底部填充330px。150+330=480由于IE6瀏覽器不識別min-height屬性，所以使用“下劃線屬性過濾器”專門為IE6瀏覽器設(shè)置高度（height）為150px。 padding-bottom:330px; _height:150px;}#mainContent是ID選擇器。設(shè)置#mainContent塊的左邊界（margin-left）為180px。#mainContent是ID選擇器。設(shè)置#mainContent塊的左邊界（margin-left）為180px。設(shè)置#mainContent塊的填充（padding）上、右、下、左值分別是0、20px、30px、20px。 margin-left:180px; padding:020px30px20px;}#footer是ID選擇器。設(shè)置#footer塊清除（clear）兩邊（both）的浮動對象。#footer是ID選擇器。設(shè)置#footer塊清除（clear）兩邊（both）的浮動對象。設(shè)置#footer塊的上邊框、填充和背景顏色。 clear:both; border-top:3pxsolid#7da5d8; padding:20px0; background-color:#bed8f3;}#headerp是后代選擇器。設(shè)置#header塊中段落（p）的文字顏色和下邊界。#headerp是后代選擇器。設(shè)置#header塊中段落（p）的文字顏色和下邊界。 color:#ffffff; margin-bottom:0;#navigationul是后代選擇器。設(shè)置#navigation塊中項目列表（ul）的文字大小為基礎(chǔ)字號的120%。#navigationul是后代選擇器。設(shè)置#navigation塊中項目列表（ul）的文字大小為基礎(chǔ)字號的120%。項目符號的樣式（list-style）為無符號（none）。邊界（margin）上、右、下、左值分別是15px、0、0、20px。#navigationul{ font-size:120%; list-style:none; margin:15px0020px;}#footerp是后代選擇器。設(shè)置#footer塊中段落（p）的文字對齊方式（text-align）為居中（center），邊界（margin）值為0。#footerp是后代選擇器。設(shè)置#footer塊中段落（p）的文字對齊方式（text-align）為居中（center），邊界（margin）值為0。 text-align:center; margin:0;}#fltrt是類選擇器。設(shè)置class=fltrt的元素向右浮動（float），左邊界（margin-left）值為8px。#fltrt是類選擇器。設(shè)置class=fltrt的元素向右浮動（float），左邊界（margin-left）值為8px。 float:right; margin-left:8px;}5．為“about.html”文件附加樣式表，并添加樣式。（1）打開about.html文件。（2）附加樣式表style.css。（3）將文檔窗口切換至style.css文件，添加如下樣式。#emphasize是類選擇器。設(shè)置class=emphsize的元素文字大小為基礎(chǔ)字號的120%，文字粗細（font-weight）為粗體（bold）。文字傾斜（font-style）為正常。#emphasize是類選擇器。設(shè)置class=emphsize的元素文字大小為基礎(chǔ)字號的120%，文字粗細（font-weight）為粗體（bold）。文字傾斜（font-style）為正常。 font-size:120%; font-weight:bold; font-style:normal;}6．為“events.html”文件附加樣式表，并添加樣式。（1）打開events.html文件。（2）附加樣式表style.css。（3）將文檔窗口切換至style.css文件，添加如下樣式。table.events是類選擇器。設(shè)置class=events的表格（table）邊框合并（border-collapse）為合并（collapse）。table.events是類選擇器。設(shè)置class=events的表格（table）邊框合并（border-collapse）為合并（collapse）。 border-collapse:collapse;table.eventsth,table.eventstd是群選擇器。同時設(shè)置class=events的表格中標(biāo)題單元格（th）和普通單元格（td）的邊框和填充。table.eventsth,table.eventstd是群選擇器。同時設(shè)置class=events的表格中標(biāo)題單元格（th）和普通單元格（td）的邊框和填充。table.eventsth,table.eventstd{ border:1pxsolid#000066;table.eventsth是后代選擇器。設(shè)置class=events的表格中標(biāo)題單元格（th）的背景和文字顏色。table.eventsth是后代選擇器。設(shè)置class=events的表格中標(biāo)題單元格（th）的背景和文字顏色。}table.eventsth{ background:#241374url(images/th-bg.jpg);table.eventstd是后代選擇器。設(shè)置class=events的表格中普通單元格（td）的背景顏色為#e2edff，背景圖像為td-bg.jpg，該背景圖像水平重復(fù)，位于底部。table.eventstd是后代選擇器。設(shè)置class=events的表格中普通單元格（td）的背景顏色為#e2edff，背景圖像為td-bg.jpg，該背景圖像水平重復(fù)，位于底部。}table.eventstd{ background:#e2edffurl(images/td-bg.jpg)repeat-xbottom;}table.eventscaption是后代選擇器。設(shè)置class=events的表格中標(biāo)題（caption）的文字大小為基礎(chǔ)字號的120%，文字粗細（font-weight）為粗體（bold）。下填充（padding-bottom）值為0.5em。table.eventscaption是后代選擇器。設(shè)置class=events的表格中標(biāo)題（caption）的文字大小為基礎(chǔ)字號的120%，文字粗細（font-weight）為粗體（bold）。下填充（padding-bottom）值為0.5em。 font-size:120%; font-weight:bold; padding-bottom:0.5em;}7．為“gallery.html”文件附加樣式表，并添加樣式。（1）打開gallery.html文件。（2）附加樣式表style.css。（3）將文檔窗口切換至style.css文件，添加如下樣式。div.galleryphoto是類選擇器。設(shè)置class=galleryphoto的div塊的下邊框和下邊界。div.galleryphoto是類選擇器。設(shè)置class=galleryphoto的div塊的下邊框和下邊界。 border-bottom:1pxsolid#000080; margin-bottom:20px;}div.galleryphotoimg是后代選擇器。設(shè)置class=galleryphoto的div塊中圖像（img）的邊框。div.galleryphotoimg是后代選擇器。設(shè)置class=galleryphoto的div塊中圖像（img）的邊框。 border:15pxsolid#FFFFFF;}div.galleryphotop是后代選擇器。設(shè)置class=galleryphoto的div塊中段落（p）的寬度。div.galleryphotop是后代選擇器。設(shè)置class=galleryphoto的div塊中段落（p）的寬度。width:430px;}div.galleryphotopspan是后代選擇器。設(shè)置class=galleryphoto的div塊中段落（p）中行內(nèi)塊（span）的文字顏色。div.galleryphotopspan是后代選擇器。設(shè)置class=galleryphoto的div塊中段落（p）中行內(nèi)塊（span）的文字顏色。color:#808080;}8．為“reserve.html”文件附加樣式表，并添加樣式。（1）打開reserve.html文件。（2）附加樣式表style.css。（3）將文檔窗口切換至style.css文件，添加如下樣式。form.contactfieldset是后代選擇器。設(shè)置class=contact的表單（form）中字段集（fieldset）的寬度、邊框和填充。form.contactfieldset是后代選擇器。設(shè)置class=contact的表單（form）中字段集（fieldset）的寬度、邊框和填充。 width:40em; border:1pxsolid#000080; padding:0010px10px;}form.contactlegend是后代選擇器。設(shè)置class=contact的表單（form）中說明文字（legend）的文字粗細和文字顏色。form.contactlegend是后代選擇器。設(shè)置class=contact的表單（form）中說明文字（legend）的文字粗細和文字顏色。 font-weight:bold; color:#000080;}form.contactlabel.fixedwidth是后代選擇器。設(shè)置class=contact的表單（form）中class=fixedwidth的標(biāo)簽（label）顯示方式（display）為塊（block），寬度為6em，向左浮動。form.contactlabel.fixedwidth是后代選擇器。設(shè)置class=contact的表單（form）中class=fixedwidth的標(biāo)簽（label）顯示方式（display）為塊（block），寬度為6em，向左浮動。 display:block; width:6em; float:left;.center是類選擇器。設(shè)置class=center的元素文字對齊方式（text-align）為居中（center）。.center是類選擇器。設(shè)置class=center的元素文字對齊方式（text-align）為居中（center）。.center{ text-align:center;}9．保存網(wǎng)頁，預(yù)覽網(wǎng)頁，效果如下。

實驗三XHTML語言一、實驗?zāi)康?．掌握XHTML語法。2．掌握XHTML標(biāo)記及屬性。3．掌握XHTML標(biāo)記校驗的方法。二、實驗內(nèi)容制作“唯存教育－－探究學(xué)習(xí)”欄目中的“article01.html”網(wǎng)頁。三、操作步驟1．創(chuàng)建“唯存教育”站點（1）在D盤新建文件夾，命名為myweb；（2）將“實驗三”文件夾中的images文件夾復(fù)制到中myweb中；（3）啟動Dreamweaver，使用“站點｜新建站點”命令創(chuàng)建站點。2．制作“article01.html”網(wǎng)頁。（1）新建網(wǎng)頁。（2）使用“文件｜保存”命令保存網(wǎng)頁，命名為article01.html。（3）在文檔工具欄上設(shè)置網(wǎng)頁標(biāo)題“唯存教育－－探究學(xué)習(xí)”。（4）切換到代碼視圖，從“文本.txt”中將文字粘貼到HTML文檔<body></body>之間。3．根據(jù)網(wǎng)頁語義添加XHTML標(biāo)記和屬性。標(biāo)題標(biāo)記：<h1><h2><h3><h4>段落標(biāo)記：<p>超鏈接標(biāo)記：<ahref=””>圖像標(biāo)記：<imgsrc=””alt=””width=””height=””/>換行標(biāo)記：<br/>項目列表及列表項標(biāo)記：<ul><li>表格、表格行、標(biāo)題單元格、普通單元格標(biāo)記：<table><tr><thscope=””><td>4．使用<div>標(biāo)記定義網(wǎng)頁的邏輯結(jié)構(gòu)，包括container、header、content、footer幾個部分。結(jié)果如下：<body><divid="container"><divid="header"><h1><ahref="#">惟存教育－－探究學(xué)習(xí)</a></h1><p><ahref="#">返回首頁</a></p></div><divid="content"><h2>如何構(gòu)建高效的webquest</h2><p>楊淑蓮華南師范大學(xué)教育技術(shù)研究所</p><h3>一、什么是WebQuest</h3><p>WebQuest是美國的BernieDodge和TomMarch于1995年倡導(dǎo)開發(fā)的一種“課程計劃”。它把整個課程用導(dǎo)言、任務(wù)、過程、資源、評價、結(jié)論六個基本模塊貫串在一起，形成一個完整的教學(xué)體系。</p>……<h3>二、WebQuest具體的構(gòu)建過程</h3><h4>（一）選擇合適的主題</h4><p>WebQuest僅僅是教學(xué)方式中的一種，……</p><p><imgsrc="images/pic.gif"alt="選擇學(xué)習(xí)任務(wù)"width="323"height="108"/><br/>圖1選擇學(xué)習(xí)任務(wù)</p><p>開展網(wǎng)上與網(wǎng)下豐富的專題講座活動，……</p><h4>（二）任務(wù)</h4><p>在設(shè)計任務(wù)時要結(jié)合以下原則確定任務(wù)：</p><ul><li>科學(xué)性、知識性：體現(xiàn)教學(xué)目標(biāo)。</li><li>趣味性：引發(fā)學(xué)習(xí)者探索的積極性。</li><li>可操作性：任務(wù)要具體，一般要形成一定的產(chǎn)品。</li><li>開放性：任務(wù)完成可以采取不同的途徑，任務(wù)解決沒有固定答案。</li><li>伸縮性：可以把任務(wù)分為基本題目和擴展性題目，滿足能力較強的學(xué)生。</li></ul><h4>（三）評價</h4><p>WebQuest通常采用測評表格來考察學(xué)生作品的不同方面（包括過程、結(jié)果、態(tài)度、情感等）。根據(jù)任務(wù)的差異，評價的對象可表現(xiàn)為書面作業(yè)、學(xué)生的作品、創(chuàng)作的網(wǎng)頁或其他內(nèi)容。</p><table><tr><thscope="col">評價對象</th><thscope="col">起步階段</th><thscope="col">發(fā)展階段</th><thscope="col">完成階段</th></tr><tr><thscope="row">參與討論</td><td>優(yōu)秀</td><td>良好</td><td>優(yōu)秀</td></tr><tr><thscope="row">搜集資料</td><td>良好</td><td>優(yōu)秀</td><td>良好</td></tr><tr><thscope="row">作品創(chuàng)作</td><td>良好</td><td>良好</td><td>優(yōu)秀</td></tr></table></div><divid="footer"><p>Copyright©BEING.,BeingLab.AllRightsReserved</p><p>版權(quán)所有惟存教育實驗室</p></div></div></body>5．登錄/網(wǎng)站，使用文件上傳的方式進行標(biāo)記校驗，并修改發(fā)現(xiàn)的錯誤。6．使用CSS控制網(wǎng)頁的表現(xiàn)。（1）啟動Dreamweaver，創(chuàng)建being站點，并將myweb文件夾指定為站點文件夾。（2）打開article01.html文件。（3）新建樣式表，保存為style.css。（4）為article01.html文件附加樣式表style.css。（5）在style.css文件中添加如下樣式。*是通配選擇器。設(shè)置網(wǎng)頁上所有元素的邊界（margin）為0，填充（padding）為0。*是通配選擇器。設(shè)置網(wǎng)頁上所有元素的邊界（margin）為0，填充（padding）為0。 margin:0; padding:0;body是類型選擇器。設(shè)置網(wǎng)頁主體（body）上的文字大小、字體和背景。body是類型選擇器。設(shè)置網(wǎng)頁主體（body）上的文字大小、字體和背景。body{ font:0.75em"宋體"; background:#e0e0e0url(images/mygrd.gif);#container是ID選擇器。設(shè)置#container塊的寬度和邊界（margin）。#container是ID選擇器。設(shè)置#container塊的寬度和邊界（margin）。當(dāng)設(shè)置margin:auto時，塊在其父元素中水平居中。#container{ width:760px; margin:auto;p,li是群選擇器。同時設(shè)置段落（p）、列表項（li）的行高（line-height）為1.8倍。p,li是群選擇器。同時設(shè)置段落（p）、列表項（li）的行高（line-height）為1.8倍。p,li{ line-height:1.8;}h1是類型選擇器。設(shè)置一級標(biāo)題（h1）的文字大小（font-size）和文字粗細（font-weight）。h1是類型選擇器。設(shè)置一級標(biāo)題（h1）的文字大?。╢ont-size）和文字粗細（font-weight）。 font-size:130%; font-weight:normal;h2是類型選擇器。設(shè)置二級標(biāo)題（h2）的文字大小（font-size）和文字對齊方式（text-align）。h2是類型選擇器。設(shè)置二級標(biāo)題（h2）的文字大?。╢ont-size）和文字對齊方式（text-align）。h2{ font-size:180%; text-align:center;}h3{ font-size:130%; color:#660000;}p,h2,h3,h4是群選擇器。同時設(shè)置段落（p）、二級標(biāo)題（h2）、三級標(biāo)題（h3）、四級標(biāo)題（h4）的邊界（margin）上下值為0.8字體高（em），左右值為0。p,h2,h3,h4是群選擇器。同時設(shè)置段落（p）、二級標(biāo)題（h2）、三級標(biāo)題（h3）、四級標(biāo)題（h4）的邊界（margin）上下值為0.8字體高（em），左右值為0。 font-size:110%;}p,h2,h3,h4{ margin:0.8em0;a是類型選擇器。設(shè)置超鏈接（a）的文字顏色為黑色，文字裝飾（text-decoration）為無裝飾（none）。a是類型選擇器。設(shè)置超鏈接（a）的文字顏色為黑色，文字裝飾（text-decoration）為無裝飾（none）。a{ color:#000000;a:hover是偽類選擇器。設(shè)置超鏈接（a）鼠標(biāo)經(jīng)過（hover）時，文字顏色為紅色。a:hover是偽類選擇器。設(shè)置超鏈接（a）鼠標(biāo)經(jīng)過（hover）時，文字顏色為紅色。}a:hover{table是類型選擇器。設(shè)置表格（table）的邊界（margin）為自動（auto），邊框合并（border-collapse）為合并（collapse）。table是類型選擇器。設(shè)置表格（table）的邊界（margin）為自動（auto），邊框合并（border-collapse）為合并（collapse）。當(dāng)設(shè)置margin:auto時，塊在其父元素中水平居中。}table{ margin:auto; border-collapse:collapse;}td,th是群選擇器。同時設(shè)置標(biāo)題單元格（th）和普通單元格（td）的填充、邊框和文字對齊方式。td,th是群選擇器。同時設(shè)置標(biāo)題單元格（th）和普通單元格（td）的填充、邊框和文字對齊方式。 padding:5px15px; border:1pxsolid#000000;.center是類選擇器。設(shè)置class=center的元素文字對齊方式（text-align）為居中（center）。.center是類選擇器。設(shè)置class=center的元素文字對齊方式（text-align）為居中（center）。}.center{#header是ID選擇器。設(shè)置#header塊的下邊框（border-bottom）、#header是ID選擇器。設(shè)置#header塊的下邊框（border-bottom）、填充（padding）、溢出方式（overflow）和寬度（width）。當(dāng)設(shè)置overflow:auto時，可以迫使父元素包含其浮動的子元素。對于IE6，設(shè)置寬度（width）可以迫使父元素包含其浮動的子元素。750+5+5=760}#header{ border-bottom:5pxsolid#666666; padding:30px5px2px5px; overflow:auto; width:750px;#headerh1是后代選擇器。設(shè)置#header塊中h1向左浮動。#headerh1是后代選擇器。設(shè)置#header塊中h1向左浮動。#headerh1{ float:left;}#headerp.goback是后代選擇器。設(shè)置#header塊中class=goback的段落向右浮動，文字大小為130%，邊界為0，行高為1.3倍。#headerp.goback是后代選擇器。設(shè)置#header塊中class=goback的段落向右浮動，文字大小為130%，邊界為0，行高為1.3倍。 float:right; font-size:130%; margin:0; line-height:1.3;#content是ID選擇器。設(shè)置#content塊的填充（padding）上、右、下、左值都是30px。#content是ID選擇器。設(shè)置#content塊的填充（padding）上、右、下、左值都是30px。#content{ padding:30px;#contentp是后代選擇器。設(shè)置#content塊中段落的首行文字縮進（text-indent）值為2em。#contentp是后代選擇器。設(shè)置#content塊中段落的首行文字縮進（text-indent）值為2em。#contentp{ text-indent:2em;}#contentp.center是后代選擇器。設(shè)置#content塊中class=center的段落的首行文字縮進（text-indent）值為0。#contentp.center是后代選擇器。設(shè)置#content塊中class=center的段落的首行文字縮進（text-indent）值為0。 text-indent:0;}#contentul是后代選擇器。設(shè)置#content塊中項目列表（ul）的左邊界（margin-left）值為3em。#contentul是后代選擇器。設(shè)置#content塊中項目列表（ul）的左邊界（margin-left）值為3em。 margin-left:3em;}#footer是后代選擇器。設(shè)置#footer塊的文字對齊方式和上邊框。#footer是后代選擇器。設(shè)置#footer塊的文字對齊方式和上邊框。 text-align:center; border-top:1pxsolid#666666;}實驗四CSS選擇器一、實驗?zāi)康?．掌握在網(wǎng)頁上應(yīng)用CSS的方法。2．掌握CSS的基本語法規(guī)則。3．掌握CSS的常用選擇器。二、實驗內(nèi)容定義“泡泡潛水俱樂部”網(wǎng)站首頁的樣式。三、操作步驟1．創(chuàng)建“潛水俱樂部”站點（1）將“實驗四”文件夾中的myweb文件夾復(fù)制D盤；（2）啟動Dreamweaver，使用“站點｜新建站點”命令新建“潛水俱樂部”站點，并指定myweb文件夾為“潛水俱樂部”站點的本地根文件夾。2．打開“index.html”文件。3．新建CSS樣式表文件，保存在myweb文件夾中，命名為style.css。4．為“index.html”文件附加樣式表，并添加樣式。*是通配選擇器。選擇網(wǎng)頁上的所有元素。*是通配選擇器。選擇網(wǎng)頁上的所有元素。 margin:0;body是類型選擇器。選擇網(wǎng)頁主體（body）。body是類型選擇器。選擇網(wǎng)頁主體（body）。設(shè)置body的背景顏色是#112981（深藍），背景圖像是gradient.jpg。gradient.jpg是一個20*800像素（又細又長）、由淺藍到深藍的漸變圖像。該圖像在body上水平重復(fù)（repeat-x），實現(xiàn)網(wǎng)頁的漸變背景。}body{ font:0.75em"宋體"; color:#FFFFFF; background:#112981url(images/gradient.jpg)repeat-x;body設(shè)置了較大值的上、下填充，以便為云、海面、海底、珊瑚等背景圖像留出空間。設(shè)置position:relative，使body成為有定位屬性的父元素。具有絕對定位屬性的子元素會相對于body進行定位。body設(shè)置了較大值的上、下填充，以便為云、海面、海底、珊瑚等背景圖像留出空間。設(shè)置position:relative，使body成為有定位屬性的父元素。具有絕對定位屬性的子元素會相對于body進行定位。 padding-bottom:250px; position:relative;}p是類型選擇器。選擇段落（p）。p是類型選擇器。選擇段落（p）。 margin:0.8em0;}p,li是群選擇器。同時選擇段落（p）和列表項（li）。p,li是群選擇器。同時選擇段落（p）和列表項（li）。 line-height:1.8;}h1是類型選擇器。選擇一級標(biāo)題（h1）。h1是類型選擇器。選擇一級標(biāo)題（h1）。 font-size:230%;}h2是類型選擇器。選擇二級標(biāo)題（h2）。h2是類型選擇器。選擇二級標(biāo)題（h2）。 font-size:150%;}h3是類型選擇器。選擇三級標(biāo)題（h3）。h3是類型選擇器。選擇三級標(biāo)題（h3）。 font-size:130%; background:url(images/dot.gif)no-repeat; padding-left:20px; margin-top:2em; margin-bottom:0.8em;}ol是類型選擇器。選擇編號列表（ol）。ol是類型選擇器。選擇編號列表（ol）。 margin-left:2em;}ul是類型選擇器。選擇項目列表（ul）。ul是類型選擇器。選擇項目列表（ul）。 font-size:120%; list-style:none;a是類型選擇器。選擇超鏈接（a）。a是類型選擇器。選擇超鏈接（a）。a{ color:#FF9600;a:hover是偽類選擇器。選擇超鏈接（a）鼠標(biāo)經(jīng)過（hover）時的狀態(tài)。a:hover是偽類選擇器。選擇超鏈接（a）鼠標(biāo)經(jīng)過（hover）時的狀態(tài)。a:hover{ color:#FFFFFF; text-decoration:none;}#container是ID選擇器。選擇id=container的元素。#container是ID選擇器。選擇id=container的元素。設(shè)置container的寬度為600px，邊界為自動（atuto），實現(xiàn)網(wǎng)頁固定寬度居中布局。 width:600px; margin:auto;}#header是ID選擇器。選擇id=header的元素。#header是ID選擇器。選擇id=header的元素。 text-align:center;#navigation是ID選擇器。選擇id=navigation的元素。#navigation是ID選擇器。選擇id=navigation的元素。設(shè)置navigation的寬度為140px，向右浮動，是使用浮動的方法實現(xiàn)網(wǎng)頁兩欄布局。}#navigation{#mainContent是ID選擇器。選擇id=mainContent的元素。#mainContent是ID選擇器。選擇id=mainContent的元素。設(shè)置mainContent的右邊界為180px，使mainContent中的文字不去環(huán)繞右邊浮動的元素，實現(xiàn)網(wǎng)頁兩欄布局。 float:right;}#mainContent{#footer是ID選擇器。選擇id=footer的元素。#footer是ID選擇器。選擇id=footer的元素。設(shè)置clear:both，可以清除浮動元素對footer元素的影響。} #footer{ clear:both;#footerp是后代選擇器。選擇id=footer的元素中的段落（p）。#footerp是后代選擇器。選擇id=footer的元素中的段落（p）。}#extraDiv1是ID選擇器。選擇id=extraDiv1的元素。#extraDiv1是ID選擇器。選擇id=extraDiv1的元素。extraDiv1是一個純粹為了應(yīng)用背景圖像而加上的空盒子（Div）。extraDiv1應(yīng)用背景圖像clouds.jpg（云），默認情況下，背景圖像重復(fù)出現(xiàn)。extraDiv1絕對定位（positon:absolute）在body的左上角（left:0;top:0;）。 text-align:center; margin:0;}#extraDiv1{ width:100%; height:104px; background:url(images/clouds.jpg);為了使云布滿整個瀏覽器窗口，extraDiv1的寬度應(yīng)為100%。雖然塊元素的默認寬度為100%，但絕對定位后，塊元素收宿至最?。?），所以還需顯式聲明extraDiv1的寬度為100%。 position:absolute;為了使云布滿整個瀏覽器窗口，extraDiv1的寬度應(yīng)為100%。雖然塊元素的默認寬度為100%，但絕對定位后，塊元素收宿至最?。?），所以還需顯式聲明extraDiv1的寬度為100%。 left:0; top:0; z-index:-2;}#extraDiv2是ID選擇器。extraDiv2應(yīng)用背景圖像water_edge.jpg（水面），絕對定位（positon:absolute）在body的left:0;top:104px;。#extraDiv2是ID選擇器。extraDiv2應(yīng)用背景圖像water_edge.jpg（水面），絕對定位（positon:absolute）在body的left:0;top:104px;。 width:100%; height:75px; background:url(images/water_edge.jpg);z-index屬性適用于定位元素，即z-index屬性適用于定位元素，即position屬性值為relative或absolute或fixed的對象，用來確定定位元素在垂直于顯示屏方向（稱為Z軸）上的層疊順序（stackorder）。z-index值較大的元素將疊加在z-index值較小的元素之上。z-index值為正的定位元素顯示在文字之上。z-index值為負的定位元素顯示在文字之下。 left:0; top:104px; z-index:-2;}#extraDiv3{ width:315px; height:316px; background:url(images/sunlight.jpg);#extraDiv3是ID選擇器。extraDiv3應(yīng)用背景圖像sunlight.jpg（陽光），絕對定位（positon:absolute）在body的左上角（left:0;top:0;）。#extraDiv3是ID選擇器。extraDiv3應(yīng)用背景圖像sunlight.jpg（陽光），絕對定位（positon:absolute）在body的左上角（left:0;top:0;）。由于它的z-index值是-1，大于#extraDiv1和#extraDiv2（z-index值是-2），所以陽光圖像顯示在云和水面圖像的上方。 left:0; top:0; z-index:-1;}#extraDiv4{ width:100%; height:125px; background:url(images/seafloor.jpg);#extraDiv4是ID選擇器。extraDiv4應(yīng)用背景圖像seafloor.jpg（海底），絕對定位（positon:absolute）在body的左下角（left:0;bottom:0;）。#extraDiv4是ID選擇器。extraDiv4應(yīng)用背景圖像seafloor.jpg（海底），絕對定位（positon:absolute）在body的左下角（left:0;bottom:0;）。 left:0; bottom:0; z-index:-2;}#extraDiv5{ width:633px;#extraDiv3是ID選擇器。extraDiv3應(yīng)用背景圖像sunlight.jpg（陽光），絕對定位（positon:absolute）在body的左上角（left:0;top:0;）。#extraDiv3是ID選擇器。extraDiv3應(yīng)用背景圖像sunlight.jpg（陽光），絕對定位（positon:absolute）在body的左上角（left:0;top:0;）。由于它的z-index值是-1，大于#extraDiv1和#extraDiv2（z-index值是-2），所以陽光圖像顯示在水和水面的上方。 background:url(images/coral.jpg);#extraDiv5是ID選擇器。extraDiv5應(yīng)用背景圖像coral.jpg（珊瑚），絕對定位（positon:absolute）在body的左下角（left:0;bottom:0;）。#extraDiv5是ID選擇器。extraDiv5應(yīng)用背景圖像coral.jpg（珊瑚），絕對定位（positon:absolute）在body的左下角（left:0;bottom:0;）。由于它的z-index值是-1，大于#extraDiv4（z-index值是-2），所以珊瑚圖像顯示在海底圖像的上方。 left:0; bottom:0; z-index:-1;}#extraDiv6{ width:180px; height:80px; background:url(images/fish_top.gif); position:absolute; top:220px; left:20px; z-index:1;}#extraDiv7{ width:224px; height:110px; background:url(images/fish_bottom.gif); position:absolute; bottom:500px; right:100px; z-index:1;}.orange是類選擇器。選擇class=orange是元素。.orange是類選擇器。選擇class=orange是元素。 color:#FF9600;}5．保存網(wǎng)頁文件和樣式表文件，預(yù)覽網(wǎng)頁，效果如下。

實驗五應(yīng)用背景圖像一、實驗?zāi)康?．深入理解CSS盒模型。2．掌握CSS背景（background）屬性。3．掌握設(shè)置背景圖像位置的方法。4．掌握使用背景圖像替換文本的方法。5．掌握使用背景圖像制作圓角框的方法。二、實驗內(nèi)容1．制作圓角框。2．制作cssocean網(wǎng)頁。三、操作步驟1．制作圓角框。（1）將“實驗五/圓角框”文件夾中的myweb1文件夾復(fù)制到D盤，并創(chuàng)建站點。（2）打開“01.html”文件，創(chuàng)建內(nèi)部樣式表，內(nèi)容如下。內(nèi)部樣式表寫在網(wǎng)頁的<head></head>區(qū)域。<styletype="text/css">內(nèi)部樣式表寫在網(wǎng)頁的<head></head>區(qū)域。<!--*{ margin:0; padding:0;}body{ font:0.75em/1.5"宋體"; margin:20px0px0px20px;}a{ color:#000000; text-decoration:none;}a:hover{ color:#FF0000;}在#box上應(yīng)用底部圓角圖像box-foot.gif。#box{在#box上應(yīng)用底部圓角圖像box-foot.gif。 width:190px; background:url(images/box-foot.gif)no-repeatleftbottom; padding-bottom:15px;}在#boxh3上應(yīng)用頂部圓角圖像box-head.gif。#boxh3{在#boxh3上應(yīng)用頂部圓角圖像box-head.gif。 font-size:110%; padding:5px15px; background:url(images/box-head.gif)no-repeatlefttop; color:#FFFFFF;在#boxul上應(yīng)用中部直線圖像box-main.gif。注意，這里為ul設(shè)置了上、下1像素的填充，目的是防止li的邊界（margin）與ul的邊界重疊。在#boxul上應(yīng)用中部直線圖像box-main.gif。注意，這里為ul設(shè)置了上、下1像素的填充，目的是防止li的邊界（margin）與ul的邊界重疊。#boxul{ list-style:none; padding:1px15px; background:url(images/box-main.gif)repeat-ylefttop;}#boxli{ margin:10px0; background:url(images/bullet.gif)no-repeatlefttop; padding-left:20px; border-bottom:1pxdashed#000000;}--></style>2．制作cssocean網(wǎng)頁。（1）將“實驗五/cssocean”文件夾中的myweb2文件夾復(fù)制到D盤，并創(chuàng)建站點。（2）打開index.html。（3）新建CSS樣式表文件，保存在myweb2文件夾中，命名為style.css。（4）為“index.html”文件附加樣式表。（5）在style.css中添加樣式，最終網(wǎng)頁效果及CSS樣式如下。*{ margin:0; padding:0;}body{ font:0.7em/1.5verdana; color:#FFF; background:#002F72url(images/gradient.gif)repeat-x;設(shè)置position:relative，使body成為有定位屬性的父元素。具有絕對定位屬性的子元素會相對于body進行定位。 padding-bottom:180px;設(shè)置position:relative，使body成為有定位屬性的父元素。具有絕對定位屬性的子元素會相對于body進行定位。 position:relative;}p{ margin:0.8em0; text-align:justify;}a{ font-weight:bold; color:#A6CDDF; text-decoration:none;}a:hover{ color:#FA7534; text-decoration:underline;設(shè)置container的寬度為700px，邊界為自動（atuto），實現(xiàn)網(wǎng)頁固定寬度居中布局。設(shè)置container的溢出（overflow）為自動（atuo），使container能包含其浮動的子元素（content向右浮動，linkList向左浮動）。設(shè)置container的寬度為700px，邊界為自動（atuto），實現(xiàn)網(wǎng)頁固定寬度居中布局。設(shè)置container的溢出（overflow）為自動（atuo），使container能包含其浮動的子元素（content向右浮動，linkList向左浮動）。#container{ width:700px; margin:auto; overflow:auto;}設(shè)置h1的文本縮進（text-indent）為-9999px，是為了將文本隱藏在屏幕之外。設(shè)置h1的邊界（margin）左、右值為auto，是為了讓h1居中。設(shè)置h1的文本縮進（text-indent）為-9999px，是為了將文本隱藏在屏幕之外。設(shè)置h1的邊界（margin）左、右值為auto，是為了讓h1居中。 width:416px; height:62px; background:url(images/h1_bg.gif); text-indent:-9999px; margin:60pxauto80pxauto;display:none，元素不顯示，同時它在網(wǎng)頁中不占有任何位置。visibledisplay:none，元素不顯示，同時它在網(wǎng)頁中不占有任何位置。visible:hidden，元素被隱藏，但它仍然占據(jù)網(wǎng)頁中的原來位置。#headerh2{ display:none;}#summary{ padding-left:200px; background:url(images/fish_top.jpg)no-repeat;}#summary.p1{ width:489px; height:60px; background:url(images/summary_p1.gif); text-indent:-9999px;content向右浮動，linkList向左浮動，形成兩列布局。170+30+500=700}content向右浮動，linkList向左浮動，形成兩列布局。170+30+500=700#content{ width:500px; float:right; background:url(images/bubbling.gif)repeat-y150px0;content應(yīng)用了bubbling.gif（冒泡）背景，該背景圖像縱向重復(fù)，位置為距左邊150px，距頂部0。}content應(yīng)用了bubbling.gif（冒泡）背景，該背景圖像縱向重復(fù)，位置為距左邊150px，距頂部0。#linkList{ width:170px; float:left;}所有的三級標(biāo)題都應(yīng)用了背景圖像，文字被隱藏在屏幕之外。h3{所有的三級標(biāo)題都應(yīng)用了背景圖像，文字被隱藏在屏幕之外。 margin-top:2.5em; height:26px; text-indent:-9999px;}#preambleh3{ background:url(images/h3_preamble.gif)no-repeat;}#explanationh3{ background:url(images/h3_explanation.gif)no-repeat;}#participationh3{ background:url(images/h3_participation.gif)no-repeat;} #benefitsh3{ background:url(images/h3_benefits.gif)no-repeat;} #requirementsh3{ background:url(images/h3_requirements.gif)no-repeat;}#selecth3{ background:url(images/h3_select.gif)no-repeat;}#archivesh3{ background:url(images/h3_archives.gif)no-repeat;}#resourcesh3{ background:url(images/h3_resources.gif)no-repeat;}#linkListli{ list-style:none; margin:0.5em0; background:url(images/starfish.gif)no-repeat; padding-left:20px;}#linkListlia{ color:#FFF;}#linkListlia:hover{ color:#FA7534;footer應(yīng)用了背景圖像box.gif。該背景圖像由上下兩部分構(gòu)成。上半部分“footer應(yīng)用了背景圖像box.gif。該背景圖像由上下兩部分構(gòu)成。上半部分“盒子關(guān)閉狀態(tài)”尺寸為0~176px，下半部分“盒子打開狀態(tài)”尺寸為176~352px。footer的實際寬度100+20+40＝160pxfooter的實際高度106+70＝176px正常狀態(tài)下，背景圖像的位置是00（lefttop），footer區(qū)域顯示“盒子關(guān)閉狀態(tài)”。#footer{ width:100px; height:106px; padding:70px20px040px; background:url(images/box.gif)00; position:absolute;當(dāng)鼠標(biāo)經(jīng)過footer區(qū)域時（#footer:hover），背景圖像的位置變化為0176px當(dāng)鼠標(biāo)經(jīng)過footer區(qū)域時（#footer:hover），背景圖像的位置變化為0176px（lefttop），footer區(qū)域顯示“盒子打開狀態(tài)”。 bottom:22px;}#footer:hover{由于IE6不支持div元素的hover偽類，所以使用*html過濾器專門設(shè)置IE6的footer背景圖像位置為0176px由于IE6不支持div元素的hover偽類，所以使用*html過濾器專門設(shè)置IE6的footer背景圖像位置為0176px（lefttop），即呈現(xiàn)“盒子打開狀態(tài)”。}*html#footer{ background:url(images/box.gif)0176px;}#footera{ color:#FEFF71; visibility:hidden;}#footer:hovera{ visibility:visible; } *html#footera{ visibility:visible; }#extraDiv1{ width:100%; height:221px; position:absolute; left:0; top:0; background:url(images/water_edge.jpg); z-index:-1;}#extraDiv2{ width:100%; height:296px; position:absolute; left:0; bottom:0; background:url(images/seafloor.jpg); z-index:-5;}#extraDiv3{ width:138px; height:113px; position:absolute; left:395px; bottom:0; background:url(images/crab.gif); z-index:-4;extraDiv4應(yīng)用背景圖像light.png（光）。extraDiv4的定位（position）方式為固定定位（fixed），即固定在距瀏覽器頂邊230px，右邊6%的位置，不隨網(wǎng)頁滾動。extraDiv4應(yīng)用背景圖像light.png（光）。extraDiv4的定位（position）方式為固定定位（fixed），即固定在距瀏覽器頂邊230px，右邊6%的位置，不隨網(wǎng)頁滾動。extraDiv4的層疊順序（z-index）為-3。#extraDiv4{ width:90px; height:143px; position:fixed; top:230px;由于IE6不支持png圖像，同時IE6也不支持固定定位，因此，使用*html過濾器專門設(shè)置在IE6中extraDiv4不顯示（display:none）。 right:6%;由于IE6不支持png圖像，同時IE6也不支持固定定位，因此，使用*html過濾器專門設(shè)置在IE6中extraDiv4不顯示（display:none）。 background:url(images/light.png); z-index:-3;}*html#extraDiv4{extraDiv5應(yīng)用背景圖像transparent.png（一張透明度由低到高的圖像）。extraDiv5的定位（position）方式為絕對定位（absolute），即絕對定位在距父元素body頂邊230px，右邊6%的位置，隨網(wǎng)頁一起滾動。extraDiv5應(yīng)用背景圖像transparent.png（一張透明度由低到高的圖像）。extraDiv5的定位（position）方式為絕對定位（absolute），即絕對定位在距父元素body頂邊230px，右邊6%的位置，隨網(wǎng)頁一起滾動。extraDiv5的層疊順序（z-index）為-2。}#extraDiv5{ width:90px; height:1190px; position:absolute; top:230px; right:6%; background:url(images/transparent.png); z-index:-2;}*html#extraDiv5{ display:none;}extraDiv6應(yīng)用背景圖像driver.png（潛水員）。extraDiv6的定位（position）方式為固定定位（fixed），即固定在距瀏覽器頂邊230px，右邊6%的位置，不隨網(wǎng)頁滾動。extraDiv6應(yīng)用背景圖像driver.png（潛水員）。extraDiv6的定位（position）方式為固定定位（fixed），即固定在距瀏覽器頂邊230px，右邊6%的位置，不隨網(wǎng)頁滾動。extraDiv6的層疊順序（z-index）為-1。 width:90px; height:143px; position:fixed; top:230px; right:6%; background:url(images/driver.png); z-index:-1;}*html#extraDiv6{ display:none;}#extraDiv7{ height:73px; width:204px; position:absolute; bottom:290px; left:10px; background:url(images/fish_bottom.jpg);}

實驗六CSS浮動布局一、實驗?zāi)康?．掌握固定寬度網(wǎng)頁布局的方法。2．深入理解浮動的概念。3．掌握兩列、三列布局網(wǎng)頁的典型邏輯結(jié)構(gòu)。4．熟練掌握CSS浮動布局的方法。二、實驗內(nèi)容１．制作csszengarden網(wǎng)站的163號作品。２．制作csszengarden網(wǎng)站的193號作品。三、操作步驟１．制作csszengarden網(wǎng)站的163號作品。（1）將“實驗六/163”文件夾中的myweb1文件夾復(fù)制到D盤，并創(chuàng)建站點。（2）打開index.html。（3）新建CSS樣式表文件，保存在myweb1文件夾中，命名為style.css。（4）為“index.html”文件附加樣式表。（5）在style.css中添加樣式，最終網(wǎng)頁效果及CSS樣式如下。*{ padding:0; margin:0;}body{font:0.7emTahoma,Arial,Helvetica,sans-serif; color:#566047;background:#FBFBE5url(images/grass.gif)rightbottomfixedno-repeat;設(shè)置body的背景圖像是grass.gif（一株草），該背景圖像附著在body上的方式為固定（fixed），即該背景圖像固定在瀏覽器的右下角（rightbottom），不隨網(wǎng)頁滾動。}設(shè)置body的背景圖像是grass.gif（一株草），該背景圖像附著在body上的方式為固定（fixed），即該背景圖像固定在瀏覽器的