第4章創(chuàng)建學(xué)生成績(jī)管理系統(tǒng)主

1、第4章 創(chuàng)建學(xué)生成績(jī)管理系統(tǒng)主框架知識(shí)點(diǎn)鏈接4.1 創(chuàng)建管理員子系統(tǒng)主界面4.2 美化管理員子系統(tǒng)主界面4.3 創(chuàng)建教師子系統(tǒng)主界面L4.1 創(chuàng)建管理員子系統(tǒng)主界面L4.2 美化管理員子系統(tǒng)主界面任務(wù)目標(biāo)完成后的效果如圖4.1和圖4.2所示。圖4.1 管理員子系統(tǒng)主框架圖4.2 教師子系統(tǒng)主框架4.1 創(chuàng)建管理員子系統(tǒng)主界面1主框架界面布局設(shè)計(jì)在開(kāi)始創(chuàng)建頁(yè)面之前，要養(yǎng)成先設(shè)計(jì)頁(yè)面布局的習(xí)慣。子系統(tǒng)的主界面布局設(shè)計(jì)如圖4.3所示。頂部功能菜單導(dǎo)航頁(yè)面位置導(dǎo)航頁(yè)面功能區(qū)域，提供完成本頁(yè)功能的界面版權(quán)欄圖4.3 系統(tǒng)主框架布局設(shè)計(jì)4.1 創(chuàng)建管理員子系統(tǒng)主界面整個(gè)頁(yè)面和每部分的高度、寬度按照如下規(guī)劃

2、：頁(yè)面整體寬度為700 px；頂部功能菜單導(dǎo)航欄的寬度和頁(yè)面相同，其高度為50 px，內(nèi)容居中；頁(yè)面位置導(dǎo)航欄寬度和頁(yè)面相同，高度為30 px，內(nèi)容左對(duì)齊；頁(yè)面功能區(qū)域?qū)挾群晚?yè)面相同，高度隨內(nèi)容的高度自動(dòng)變化，無(wú)需設(shè)置高度屬性，內(nèi)容居中；版權(quán)欄寬度和頁(yè)面相同，高度為50 px，內(nèi)容居中。在實(shí)際的項(xiàng)目中應(yīng)該更詳細(xì)地描述頁(yè)面的設(shè)計(jì)規(guī)劃，便于指導(dǎo)后期頁(yè)面的開(kāi)發(fā)，也方便指導(dǎo)多人共同開(kāi)發(fā)。4.1 創(chuàng)建管理員子系統(tǒng)主界面Div=header700px50pxDiv=navigateDiv=copyright頁(yè)面內(nèi)容50px30px高度隨內(nèi)容變化Div=layout4.1 創(chuàng)建管理員子系統(tǒng)主界面2創(chuàng)建系統(tǒng)母

3、版頁(yè)（1）打開(kāi)“解決方案資源管理器”窗口，右擊Admin文件夾，選擇“添加新項(xiàng)”，出現(xiàn)“添加新項(xiàng)”對(duì)話框，選擇“母版頁(yè)”模板，文件名改為“adminMasterPage.master”，在“語(yǔ)言”下拉框內(nèi)選擇“Visual C#”，選中“將代碼放在單獨(dú)的文件中”復(fù)選框，取消“選擇母版頁(yè)”復(fù)選框，如圖4.4所示。圖4.4 新建母版頁(yè)4.1 創(chuàng)建管理員子系統(tǒng)主界面（2）按照相同的方式，給教師添加母版頁(yè)面，在Teacher文件夾下添加一個(gè)名為“teacherMasterPage.master”的母版頁(yè)。4.1 創(chuàng)建管理員子系統(tǒng)主界面3利用母版頁(yè)設(shè)計(jì)頁(yè)面模板這里以設(shè)計(jì)管理員所用的母版頁(yè)為例。（1）打開(kāi)

4、“解決方案資源管理器”窗口，右擊adminMasterPage.master，選擇“視圖設(shè)計(jì)器”，打開(kāi)adminMasterPage.master的設(shè)計(jì)視圖。單擊左下角的“拆分”按鈕，切換到“拆分”視圖。（2）在“源”視圖內(nèi)，選中Form標(biāo)簽內(nèi)的第一個(gè)div，并設(shè)置其id屬性為“l(fā)ayout”，代碼如下。 4.1 創(chuàng)建管理員子系統(tǒng)主界面（3）在“源”視圖內(nèi)，把光標(biāo)定位到“”的后面，打開(kāi)“工具箱”窗口，展開(kāi)“HTML”選項(xiàng)卡，雙擊“HTML”選項(xiàng)卡內(nèi)的“div”，添加一個(gè)div，設(shè)置新增加的div的id屬性為“header”。（4）在“源”視圖內(nèi)，把光標(biāo)定位到id為“header”的div內(nèi)，展

5、開(kāi)“工具箱”窗口內(nèi)的“導(dǎo)航”選項(xiàng)卡，雙擊“Menu控件”，把其添加到此div內(nèi)。（5）在“設(shè)計(jì)”視圖內(nèi)，右擊Menu控件，選擇“屬性”，在“屬性”窗中內(nèi)設(shè)置Menu控件的Orientation屬性為“Horizontal”，Height屬性為“40 px”，Width屬性為“100%”，單擊Items屬性右側(cè)的按鈕，會(huì)出現(xiàn)“菜單項(xiàng)編輯器”，單擊 圖標(biāo)，在“菜單項(xiàng)編輯器”窗口中添加9個(gè)根節(jié)點(diǎn)，分別設(shè)置每個(gè)節(jié)點(diǎn)的Text屬性為：教工維護(hù)、課程維護(hù)、班級(jí)維護(hù)、學(xué)生維護(hù)、排課維護(hù)、成績(jī)查詢、成績(jī)分析、成績(jī)打印、退出系統(tǒng)。4.1 創(chuàng)建管理員子系統(tǒng)主界面（6）單擊Menu控件右端的 圖標(biāo)，打開(kāi)“Menu任

6、務(wù)”菜單，選擇“自動(dòng)套用格式”，彈出“自動(dòng)套用格式”對(duì)話框，選擇“簡(jiǎn)明型”。在Menu控件的“屬性”窗口中設(shè)置Font中的Size為“1em”。設(shè)置結(jié)束后，“設(shè)計(jì)”視圖中頁(yè)面的效果如圖4.5所示。圖4.5 Menu控件的外觀（7）在“源”視圖內(nèi)，把光標(biāo)定位到id為“header”的div下方，利用上面的方法在光標(biāo)位置處插入一個(gè)div，并設(shè)置此div的id屬性為“navigate”，光標(biāo)定位到此div內(nèi)部，雙擊工具箱的導(dǎo)航選項(xiàng)卡的“SiteMapPath”控件，插入一個(gè)站點(diǎn)導(dǎo)航控件“SiteMapPath”。4.1 創(chuàng)建管理員子系統(tǒng)主界面（8）右擊“解決方案資源管理器”項(xiàng)目名，選擇“添加新項(xiàng)”，

7、在彈出的“添加新項(xiàng)”窗口內(nèi)選擇“站點(diǎn)地圖”模板，單擊“確定”按鈕，并按照如下代碼修改Web.sitemap文件。 4.1 創(chuàng)建管理員子系統(tǒng)主界面（9）切換到“源”視圖，光標(biāo)定位到id為“ContentPlaceHolder1”的控件的下方，利用上面的方法，在光標(biāo)位置處插入一個(gè)div，并設(shè)置div的id屬性為“copyright”。（10）在“設(shè)計(jì)”視圖內(nèi)，光標(biāo)定位到id為“copyright”的div內(nèi)，并在div內(nèi)輸入“學(xué)生成績(jī)”管理系統(tǒng) 20092010 ”。母版頁(yè)中的所有內(nèi)容設(shè)計(jì)添加完畢，母版頁(yè)的效果如圖4.6所示。圖4.6 母版頁(yè)效果圖母版頁(yè)“源”視圖中“”標(biāo)記塊的代碼如下所示。4.1

8、 創(chuàng)建管理員子系統(tǒng)主界面（11）打開(kāi)“解決方案資源管理器”窗口，右擊Admin文件夾，選擇“添加新項(xiàng)”選項(xiàng)，在彈出的“添加新項(xiàng)”對(duì)話框中選擇“Web 窗體”模板，文件名為“teacher.aspx”，在“語(yǔ)言”下拉框內(nèi)選擇“Visual C#”，選中“將代碼放在單獨(dú)的文件中”和“選擇母版頁(yè)”（套用母版頁(yè)的Web窗體頁(yè)面稱為內(nèi)容頁(yè)）復(fù)選框。單擊“確定”按鈕，出現(xiàn)“選擇母版頁(yè)”對(duì)話框，選擇Admin文件夾下的“adminMasterPage.master”，單擊“確定”按鈕。（12）在“解決方案資源管理器”窗口內(nèi)，右擊“teacher.aspx”，選擇“視圖設(shè)計(jì)器”，出現(xiàn)圖4.7所示的界面。圖4.

9、7 內(nèi)容頁(yè)的效果圖4.2 美化管理員子系統(tǒng)主界面1定義母版頁(yè)頁(yè)面樣式（1）右擊“主題1”文件夾，選擇“添加新項(xiàng)”選項(xiàng)，在彈出的“添加新項(xiàng)”對(duì)話框中選擇“樣式表”模板，名稱默認(rèn)為“StyleSheet.css”。（2）打開(kāi)StyleSheet.css文件，把光標(biāo)定位到body標(biāo)簽樣式選擇符內(nèi)，右擊鼠標(biāo)，選擇“生成樣式”選項(xiàng)，彈出“修改樣式”對(duì)話框，單擊左欄類別中的“塊”，設(shè)置右欄中的text-align屬性為“center”，使整個(gè)頁(yè)面居中顯示，單擊“確定”按鈕完成樣式設(shè)計(jì)。（3）右擊Admin文件夾內(nèi)的teacher.aspx頁(yè)面，選擇視圖設(shè)計(jì)器，進(jìn)入teacher.aspx的“設(shè)計(jì)”視圖，打

10、開(kāi)“屬性”窗口，在頂部下拉框內(nèi)選擇“Document”文檔對(duì)象，設(shè)置StyleSheetTheme屬性為“主題1”，頁(yè)面的外觀變化如圖4.8所示。圖4.8 設(shè)置頁(yè)面居中后的頁(yè)面效果4.2 美化管理員子系統(tǒng)主界面（4）打開(kāi)StyleSheet.css文件，右擊空白處，選擇“添加樣式規(guī)則”選項(xiàng)，彈出“添加樣式規(guī)則”對(duì)話框，在“元素ID”處輸入“l(fā)ayout”，單擊“確定”按鈕。StyleSheet.css文件內(nèi)會(huì)添加一個(gè)“l(fā)ayout”ID樣式選擇器，右擊“l(fā)ayout”內(nèi)部，選擇“生成樣式”選項(xiàng)，在彈出的“修改樣式”對(duì)話框中選擇左欄類別中的“定位”，設(shè)置右欄的width屬性為“700 px”，單

11、擊“確定”按鈕完成元素ID為“l(fā)ayout”的定位。切換到teacher.aspx頁(yè)面的設(shè)計(jì)視圖，頁(yè)面外觀變化如圖4.9所示。圖4.9 設(shè)置頁(yè)面寬度后的頁(yè)面效果4.2 美化管理員子系統(tǒng)主界面（5）打開(kāi)StyleSheet.css文件，右擊空白處，選擇“添加樣式規(guī)則”選項(xiàng)，彈出“添加樣式規(guī)則”對(duì)話框，在“元素ID”處輸入“navigate”，單擊“確定”按鈕。右擊“navigate”內(nèi)部，選擇“生成樣式”選項(xiàng)，單擊左欄中的“定位”類別，設(shè)置右欄中的height屬性為“30 px”；單擊左欄中的“塊”類別，設(shè)置右欄中l(wèi)ine-height屬性為“30 px”，text-align屬性為“l(fā)eft”

12、。圖4.10 邊框設(shè)置4.2 美化管理員子系統(tǒng)主界面單擊左欄中的“邊框”類別，按照如圖4.10設(shè)置；單擊左欄的“方框”類別，按照如圖4.11設(shè)置。圖4.11 方框設(shè)置4.2 美化管理員子系統(tǒng)主界面切換到teacher.aspx頁(yè)面的設(shè)計(jì)視圖，頁(yè)面外觀變化如圖4.12所示。圖4.12 設(shè)置導(dǎo)航欄樣式后的效果4.2 美化管理員子系統(tǒng)主界面（6）按照同樣的方法添加id為“copyright”的樣式規(guī)則，選擇“定位”類別，width屬性為“50 px”，選擇“塊”類別，line-height屬性為“50 px”。切換到teacher.aspx頁(yè)面的設(shè)計(jì)視圖，頁(yè)面外觀變化如圖4.13所示。圖4.13 設(shè)

13、置版權(quán)后的效果4.2 美化管理員子系統(tǒng)主界面（7）在teacher.aspx頁(yè)面的空白處，輸入“內(nèi)容頁(yè)中的內(nèi)容”，右擊空白處，選擇“在瀏覽器中查看”選項(xiàng)，出現(xiàn)如圖4.14所示的頁(yè)面效果。圖4.14 母版頁(yè)的最終效果母版頁(yè)的頁(yè)面樣式已設(shè)置完畢，相關(guān)的CSS代碼如下。 4.3 創(chuàng)建教師子系統(tǒng)主界面創(chuàng)建教師子系統(tǒng)主界面步驟如下：（1）打開(kāi)“解決方案資源管理器”窗口，右擊teacher文件夾，選擇“添加新項(xiàng)”選項(xiàng)，在teacher文件夾內(nèi)添加一個(gè)母版頁(yè)，命名為“teacherMasterPage.master”（取消“選中模板頁(yè)”復(fù)選框）。（2）打開(kāi)“解決方案資源管理器”窗口，右擊adminMaste

14、rPage.master，選擇“查看標(biāo)記”選項(xiàng)，在打開(kāi)的adminMasterPage.master的“源”視圖中，選中“”標(biāo)記塊內(nèi)的所有代碼，復(fù)制并覆蓋teacherMasterPage.master的“源”視圖中的“”標(biāo)記塊內(nèi)的所有代碼。4.3 創(chuàng)建教師子系統(tǒng)主界面（3）把Menu控件中“”標(biāo)記塊內(nèi)的代碼改成如下的代碼。 （4）打開(kāi)“解決方案資源管理器”窗口，右擊teacher文件夾，選擇“添加新項(xiàng)”選項(xiàng)，在打開(kāi)的“添加新項(xiàng)”對(duì)話框中選中“Web窗體”模板，命名為“enterScore.aspx”，語(yǔ)言為“Visual C#”，選中“將代碼放在單獨(dú)的文件中”和“選擇母版頁(yè)”復(fù)選框，單擊“添

15、加”按鈕，在彈出的“選擇母版頁(yè)窗口”對(duì)話框中，選中teacher文件夾中的teacherMasterPage.master。4.3 創(chuàng)建教師子系統(tǒng)主界面（5）右擊teacher文件夾內(nèi)的enterScore.aspx頁(yè)面，選擇視圖設(shè)計(jì)器，打開(kāi)enterScore.aspx的“設(shè)計(jì)”視圖。在“屬性”窗口中的頂部下拉框內(nèi)選擇“Document”文檔對(duì)象，設(shè)置StyleSheetTheme屬性為“主題1”。enterScore.aspx頁(yè)面效果如圖4.15所示。圖4.15 教師子系統(tǒng)中的母版頁(yè)4.3 創(chuàng)建教師子系統(tǒng)主界面（6）在空白處輸入“內(nèi)容頁(yè)中的內(nèi)容”，右擊選擇“在瀏覽器中查看”，出現(xiàn)如圖4.1

16、6所示的頁(yè)面。圖4.16 教師子系統(tǒng)中的頁(yè)面主框架4.3 創(chuàng)建教師子系統(tǒng)主界面（7）打開(kāi)“解決方案資源管理器”窗口內(nèi)的Web.sitemap文件，把代碼修改如下。 4.3 創(chuàng)建教師子系統(tǒng)主界面（8）在瀏覽器中查看enterScore.aspx頁(yè)面，設(shè)計(jì)后的效果如圖4.17所示，可以看出比圖4.16多了站點(diǎn)導(dǎo)航。圖4.17 教師子系統(tǒng)中的頁(yè)面主框L4.1 創(chuàng)建管理員子系統(tǒng)主界面L1. 母版頁(yè)與內(nèi)容頁(yè)1. 母版頁(yè)和內(nèi)容頁(yè)的基本概念母版頁(yè)是指其他網(wǎng)頁(yè)可以將其作為模板來(lái)引用的特殊頁(yè)面。母版頁(yè)的擴(kuò)展名為.master。在母版頁(yè)中，界面分成公用區(qū)和可編輯區(qū)，公用區(qū)是多個(gè)內(nèi)容頁(yè)中共同的區(qū)域，可編輯區(qū)是內(nèi)容頁(yè)

17、中可以編輯的區(qū)域。公用區(qū)的設(shè)計(jì)方法與一般頁(yè)面相同，可編輯區(qū)通過(guò)ContentPlaceHolder控件為內(nèi)容頁(yè)預(yù)留出來(lái)，ContentPlaceHolder內(nèi)部不能進(jìn)行設(shè)計(jì)。一個(gè)母版頁(yè)中可以有一個(gè)可編輯區(qū)，也可以有多個(gè)可編輯區(qū)。L1. 母版頁(yè)與內(nèi)容頁(yè)母版頁(yè)和內(nèi)容的結(jié)構(gòu)關(guān)系如圖4.18所示。圖4.18 母版頁(yè)和內(nèi)容頁(yè)的結(jié)構(gòu)關(guān)系ContentPlaceHolder1Content1ContentPlaceHolder2Content2L1. 母版頁(yè)與內(nèi)容頁(yè)為了建立起母版頁(yè)中的ContentPlaceHolder控件和內(nèi)容頁(yè)中的Content控件之間的關(guān)系，Content控件的ContentPlac

18、eHolderID屬性設(shè)置為本Content控件所對(duì)應(yīng)的ContentPlaceHolder控件的ID。代碼結(jié)構(gòu)如圖4.19所示。圖4.19 母版頁(yè)和內(nèi)容頁(yè)的代碼關(guān)系L1. 母版頁(yè)與內(nèi)容頁(yè)在運(yùn)行時(shí)，用戶和瀏覽器將按照下面的步驟使用內(nèi)容頁(yè)： 用戶輸入內(nèi)容頁(yè)的URL請(qǐng)求某網(wǎng)頁(yè)。 服務(wù)器獲取該頁(yè)后，讀取頁(yè)中的Page指令，若該指令引用一個(gè)母版頁(yè)，則讀取母版頁(yè)。如果用戶第一次請(qǐng)求這兩個(gè)頁(yè)，那么兩個(gè)頁(yè)都要進(jìn)行編譯。 服務(wù)器將包含的母版頁(yè)合并到內(nèi)容頁(yè)的控件樹(shù)中。 服務(wù)器將頁(yè)面中各個(gè)Content控件的內(nèi)容合并到母版頁(yè)中相應(yīng)的ContentPlace-Holder控件中。 服務(wù)器將合并后的內(nèi)容發(fā)送給客戶端，

19、客戶端在瀏覽器中呈現(xiàn)合并后的網(wǎng)頁(yè)。L1. 母版頁(yè)與內(nèi)容頁(yè)2. 從內(nèi)容頁(yè)中訪問(wèn)母版頁(yè)（1）訪問(wèn)母版頁(yè)中的控件由于在運(yùn)行時(shí)，母版頁(yè)與內(nèi)容頁(yè)將會(huì)合并在一起，從而構(gòu)成最終的頁(yè)面，因此內(nèi)容頁(yè)的代碼可以訪問(wèn)母版頁(yè)中的控件。具體方法是在內(nèi)容頁(yè)后臺(tái)代碼中調(diào)用FindControl方法獲取對(duì)母版頁(yè)中控件的引用。FindControl方法的原型為：public override Control FindControl(String id) /id表示母版頁(yè)中控件的ID名稱L1. 母版頁(yè)與內(nèi)容頁(yè)（2）訪問(wèn)母版頁(yè)中的公共屬性為了提供對(duì)母版頁(yè)中成員的訪問(wèn)，內(nèi)容頁(yè)中提供了Master屬性來(lái)訪問(wèn)母版頁(yè)對(duì)象。但是從內(nèi)容頁(yè)中訪

20、問(wèn)母版頁(yè)的成員，需要在內(nèi)容頁(yè)內(nèi)通過(guò)MasterType指令來(lái)創(chuàng)建對(duì)此母版頁(yè)的強(qiáng)類型引用，該指令的常用形式如下：假如有一個(gè)名為MasterPage1.master的母版頁(yè)，其對(duì)應(yīng)的類名為MasterPage1。在MasterPage1類中，聲明了一個(gè)TrueName屬性，則可以在內(nèi)容頁(yè)代碼視圖的頂部添加如下代碼：然后在內(nèi)容頁(yè)的后臺(tái)代碼中，就可以通過(guò)Master.TrueName讀取和設(shè)置母版頁(yè)中TrueName屬性的值。L1. 母版頁(yè)與內(nèi)容頁(yè)【例4.1】 通過(guò)一個(gè)實(shí)例演示如何從內(nèi)容頁(yè)訪問(wèn)母版頁(yè)中的屬性和控件。設(shè)計(jì)步驟如下：（1）打開(kāi)Visual Studio 2008，新建一個(gè) 網(wǎng)站，網(wǎng)站名稱為

21、Master。（2）創(chuàng)建一個(gè)母版頁(yè)“MasterPage.master”，設(shè)計(jì)如圖4.20所示的界面。圖4.20 母版頁(yè)MasterPage.masterL1. 母版頁(yè)與內(nèi)容頁(yè)對(duì)應(yīng)的源代碼如下： （這是母版頁(yè)）歡迎 訪問(wèn)本網(wǎng)站! L1. 母版頁(yè)與內(nèi)容頁(yè)（3）在母版頁(yè)“MasterPage.master”的后臺(tái)代碼中添加如下的內(nèi)容： public string Name /Name的值為L(zhǎng)abel的值 get return Label1.Text; （4）添加一個(gè)內(nèi)容頁(yè)“content.aspx”，設(shè)計(jì)如圖4.21所示的界面。圖4.21 內(nèi)容頁(yè)content.aspxL1. 母版頁(yè)與內(nèi)容頁(yè)對(duì)應(yīng)的

22、源代碼如下： 請(qǐng)輸入要寫入Label中的值： L1. 母版頁(yè)與內(nèi)容頁(yè)（5）在內(nèi)容頁(yè)的源代碼的頂部加入如下代碼：（6）分別單擊內(nèi)容頁(yè)上的按鈕，在后臺(tái)代碼中添加如下代碼。（7）在瀏覽器中查看內(nèi)容頁(yè)，效果如圖4.22所示。圖4.22 運(yùn)行結(jié)果返回L2. 利用Menu控件實(shí)現(xiàn)功能菜單導(dǎo)航一般情況下，利用Menu控件或TreeView控件實(shí)現(xiàn)自定義導(dǎo)航，利用站點(diǎn)地圖和SiteMapPath控件實(shí)現(xiàn)自動(dòng)導(dǎo)航。屬 性 名說(shuō) 明Orizntation設(shè)置菜單的展開(kāi)方向?？梢匀≈禐镠orizontal和VerticalMaximumDynamicDisplayLevels設(shè)置動(dòng)態(tài)菜單的最大層數(shù)，默認(rèn)為3Navi

23、gateUrl各菜單項(xiàng)的鏈接表4.1 Menu控件常用屬性【例4.2】 利用Menu控件創(chuàng)建自定義導(dǎo)航。假定網(wǎng)站包含如下的內(nèi)容：班級(jí)管理：班級(jí)新增（classAdd.aspx），班級(jí)查詢（classSearch.aspx）學(xué)生管理：學(xué)生新增（studentAdd.aspx），學(xué)生查詢（studentSearch.aspx）老師管理：老師新增（teacherAdd.aspx），老師查詢（teacherSearch.aspx）L2. 利用Menu控件實(shí)現(xiàn)功能菜單導(dǎo)航具體設(shè)計(jì)步驟如下：（1）運(yùn)行Visual Studio 2008，新建一個(gè)名為“MenuExample”的 Web應(yīng)用程序項(xiàng)目，分別在

24、項(xiàng)目?jī)?nèi)添加需要的網(wǎng)頁(yè)。（2）在項(xiàng)目中添加一個(gè)名為“MenuExample.aspx”的網(wǎng)頁(yè)，切換到“設(shè)計(jì)”視圖，向頁(yè)面中拖放一個(gè)Menu控件，將Menu控件的Orientation屬性設(shè)置為“Horizontal”，以便使其橫向排列，單擊Menu控件右上方的小三角符號(hào)，選擇“自動(dòng)套用格式”項(xiàng)，在彈出的窗口中選擇一種喜歡的樣式。L2. 利用Menu控件實(shí)現(xiàn)功能菜單導(dǎo)航（3）單擊Menu控件右上方的小三角符號(hào)，選擇“編輯菜單項(xiàng)”項(xiàng)，在彈出的“菜單項(xiàng)編輯器”對(duì)話框中，輸入各菜單項(xiàng)，如圖4.23所示。圖4.23 Menu中菜單項(xiàng)L2. 利用Menu控件實(shí)現(xiàn)功能菜單導(dǎo)航（4）在編輯菜單項(xiàng)窗口右側(cè)的屬性選

25、項(xiàng)中，利用NavigateUrl屬性設(shè)置各菜單項(xiàng)鏈接到對(duì)應(yīng)的網(wǎng)頁(yè)，全部設(shè)置完成后，單擊“確定”按鈕，在瀏覽器中查看本頁(yè)，運(yùn)行效果如 圖4.24所示。圖4.24 Menu控件運(yùn)行效果圖返回L3. 利用站點(diǎn)地圖文件和SiteMapPath實(shí)現(xiàn)頁(yè)面導(dǎo)航利用站點(diǎn)地圖和SiteMapPath控件實(shí)現(xiàn)自動(dòng)導(dǎo)航站點(diǎn)自動(dòng)導(dǎo)航的步驟：（1）使用站點(diǎn)地圖（web .sitemap地圖文件）描述站點(diǎn)的邏輯結(jié)構(gòu)（2）在需要自動(dòng)導(dǎo)航的頁(yè)面上放置SiteMapPath控件，它會(huì)從web .sitemap地圖文件中讀取本頁(yè)所在的節(jié)點(diǎn)層次位置，自動(dòng)顯示導(dǎo)航信息，不需要開(kāi)發(fā)者編寫任何代碼。L3. 利用站點(diǎn)地圖文件和SiteMa

26、pPath實(shí)現(xiàn)頁(yè)面導(dǎo)航SiteMapPath控件的常用屬性如表4.2所示。屬 性 名說(shuō) 明CurrentNodeStyle定義當(dāng)前節(jié)點(diǎn)的外觀樣式NodeStyle定義SiteMapPath中所有導(dǎo)航節(jié)點(diǎn)的外觀樣式PathSeparator設(shè)置導(dǎo)航路徑中節(jié)點(diǎn)之間的分隔符PathSeparatorStyle定義分隔符的樣式RootNodeStyle定義根節(jié)點(diǎn)樣式表4.2 SiteMapPath常見(jiàn)屬性L3. 利用站點(diǎn)地圖文件和SiteMapPath實(shí)現(xiàn)頁(yè)面導(dǎo)航【例4.3】通過(guò)例子說(shuō)明如何利用站點(diǎn)地圖和SiteMapPath控件實(shí)現(xiàn)自動(dòng)導(dǎo)航。本實(shí)例的功能結(jié)構(gòu)如圖4.25所示。利用SiteMapPat

27、h控件實(shí)現(xiàn)自動(dòng)導(dǎo)航。圖4.25 站點(diǎn)結(jié)構(gòu)圖L3. 利用站點(diǎn)地圖文件和SiteMapPath實(shí)現(xiàn)頁(yè)面導(dǎo)航（1）運(yùn)行Visual Studio 2008，新建 Web 站點(diǎn)“SiteMapPathExample”。（2）通過(guò)“添加新項(xiàng)”，選擇“站點(diǎn)地圖”文件類型，如圖4.26所示，文件名默認(rèn)為“web.sitemap”。圖4.26 創(chuàng)建站點(diǎn)地圖文件L3. 利用站點(diǎn)地圖文件和SiteMapPath實(shí)現(xiàn)頁(yè)面導(dǎo)航（3）將web.sitemap文件中的內(nèi)容修改如下，保存文件，完成站點(diǎn)地圖設(shè)計(jì)。 L3. 利用站點(diǎn)地圖文件和SiteMapPath實(shí)現(xiàn)頁(yè)面導(dǎo)航（4）在解決方案中，分別添加名為“index.asp

28、x”、“teacher.aspx”、“student.aspx”、“course.aspx”的網(wǎng)頁(yè)。（5）分別切換到index.aspx和teacher.aspx的“設(shè)計(jì)”視圖，向頁(yè)面內(nèi)拖放一個(gè)SiteMapPath控件，即可看到該頁(yè)面在網(wǎng)站內(nèi)的導(dǎo)航路徑。如圖4.27、圖4.28所示。圖4.27 index.aspx導(dǎo)航效果圖圖4.28 teacher.aspx導(dǎo)航效果圖（6）在瀏覽器中查看teacher.aspx，單擊“管理員子系統(tǒng)”超鏈接，將鏈接到管理員子系統(tǒng)主頁(yè)面index.aspx。返回L4.2 美化管理員子系統(tǒng)主界面L1. 主題有兩種類型的主題，一種是應(yīng)用程序主題，另一種是全局主題。

29、1創(chuàng)建和應(yīng)用主題的基本步驟（1）在“解決方案資源管理器”中，右擊項(xiàng)目名，選擇“添加”“添加 文件夾”“主題”菜單項(xiàng)，系統(tǒng)就會(huì)自動(dòng)判斷是否已經(jīng)存在App_Themes文件夾，如果不存在該文件夾，就自動(dòng)創(chuàng)建，并在該文件夾下添加一個(gè)主題文件夾；如果已經(jīng)存在該文件夾，就直接在該文件夾下添加新的主題文件夾。（2）在主題文件夾下添加外觀控制文件和資源文件。（3）打開(kāi).aspx文件，切換到“設(shè)計(jì)”視圖，右擊選擇“屬性”選項(xiàng)，在“屬性”窗口頂部下拉列表中，選中“Document”文檔對(duì)象，在列表中定位到“StyleSheetTheme”，設(shè)置其值為某個(gè)主題名稱，本頁(yè)面就會(huì)自動(dòng)套用主題內(nèi)的外觀控制文件和資源文件

30、。L1. 主題2給整個(gè)網(wǎng)站應(yīng)用主題為了快速地為整個(gè)應(yīng)用程序中所有頁(yè)面設(shè)置相同的主題，可以設(shè)置Web.Config文件的配置節(jié)內(nèi)容：返回L2. 樣式表在XHTML中，每個(gè)標(biāo)記都可稱為一個(gè)元素。元素是構(gòu)成XHTML源代碼的基本單位，一般用“”開(kāi)頭，用“”結(jié)束。例如，等，有些元素也可以以“”的形式出現(xiàn)，如。樣式是指元素在瀏覽器中的呈現(xiàn)形式，如元素的高度、寬度、是否有邊框、邊框顏色、邊框粗細(xì)、字體大小、字體顏色、元素的背景色和背景圖片、元素內(nèi)數(shù)據(jù)的對(duì)齊方式等。在XHTML中可以通過(guò)style屬性設(shè)置元素的樣式，每個(gè)style內(nèi)包含一個(gè)或多個(gè)屬性，其一般形式為：屬性名與屬性值之間用冒號(hào)“：”分隔，如果一

31、個(gè)樣式有多個(gè)屬性，各屬性之間用分號(hào)“;”隔開(kāi)。返回L3. 樣式選擇符CSS規(guī)定了3種定義樣式的方式：一是直接將樣式放置在元素內(nèi)，通過(guò)style屬性設(shè)置，稱為內(nèi)聯(lián)式；二是在網(wǎng)頁(yè)的head部分定義樣式，稱為嵌入式；三是以擴(kuò)展名為.css的文件保存樣式定義，稱為外部鏈接式。內(nèi)聯(lián)式適用于單獨(dú)控制某個(gè)元素樣式的情況。這種方式的優(yōu)點(diǎn)是設(shè)置樣式直觀、方便；缺點(diǎn)是修改某些元素的樣式時(shí)，需要打開(kāi)網(wǎng)頁(yè)文件。下邊的代碼采用內(nèi)聯(lián)式控制各個(gè)元素的樣式： 學(xué)生 成績(jī)管理系統(tǒng)L3. 樣式選擇符嵌入式適合控制一個(gè)網(wǎng)頁(yè)內(nèi)具有相同樣式的多個(gè)元素。采用這種方式的優(yōu)點(diǎn)是當(dāng)修改某些元素的樣式時(shí)，只需要修改head部分的樣式規(guī)則即可，該

32、網(wǎng)頁(yè)內(nèi)所有使用了該樣式規(guī)則的元素都會(huì)自動(dòng)應(yīng)用新的樣式。但這種方式僅僅適用于修改某個(gè)網(wǎng)頁(yè)內(nèi)的具有相同樣式的元素，如果多個(gè)網(wǎng)頁(yè)的很多元素均采用相同的樣式，仍然需要在各個(gè)網(wǎng)頁(yè)的head部分重復(fù)定義相同的樣式規(guī)則。在head內(nèi)定義樣式，可以將代碼修改如下： 一個(gè)Hello網(wǎng)頁(yè) #div0text-align: center; imgwidth: 300px; height: 60px; #div1font-size: 40px; color: red; 學(xué)生 成績(jī)管理系統(tǒng)L3. 樣式選擇符外部鏈接式適用于控制多個(gè)網(wǎng)頁(yè)內(nèi)具有相同樣式的元素。這種方式將樣式保存在一個(gè)或多個(gè)單獨(dú)的.css文件中，當(dāng)需要修改元

33、素的樣式時(shí)，只需要修改.css文件中的樣式規(guī)則即可。一旦修改.css文件中的某個(gè)樣式規(guī)則，凡是引用了.css內(nèi)修改過(guò)的樣式規(guī)則的元素，都會(huì)自動(dòng)應(yīng)用新的樣式。.css文件內(nèi)的內(nèi)容和嵌入式方式下head內(nèi)的style標(biāo)記內(nèi)的內(nèi)容相同，只是單獨(dú)保存在一個(gè)文件中，例如：#div0text-align: center;imgwidth: 300px; height: 60px;#div1font-size: 40px; color: red;在XHTML中引用樣式文件后，文件內(nèi)的元素才會(huì)應(yīng)用樣式文件內(nèi)的樣式規(guī)則。引用樣式文件的方法：在head標(biāo)記塊內(nèi)添加下面的代碼。其中，rel屬性規(guī)定了XHTML與被鏈

34、接文件的關(guān)系，type屬性規(guī)定了鏈接文件的類型，href屬性規(guī)定了要鏈接的樣式文件的URL。L3. 樣式選擇符樣式規(guī)則必須符合如下格式：樣式選擇符 樣式屬性1:值1;樣式屬性2:值2; 樣式屬性3:值3; 其中包含兩個(gè)部分：樣式選擇符，樣式屬性。 為了方便控制樣式規(guī)則所作用的元素范圍，CSS中把樣式選擇符分為如下幾類：標(biāo)簽選擇符、類選擇符、ID選擇符、虛類選擇符、包含選擇符和并列選擇符。1標(biāo)簽選擇符標(biāo)簽選擇符（即HTML或XHTML標(biāo)記）是最典型的選擇符類型。定義的時(shí)候直接使用標(biāo)記名稱作為選擇符名稱。常見(jiàn)格式如下：標(biāo)簽名 樣式屬性1:值1;樣式屬性2:值2; 樣式屬性3:值3; 例如：divb

35、ackground-color: white; /背景顏色text-align: center;/文本水平布局L3. 樣式選擇符2類選擇符標(biāo)簽選擇符比較方便，能夠?qū)δ撤N標(biāo)簽定義樣式，但是有的時(shí)候并不想對(duì)網(wǎng)頁(yè)內(nèi)所有此標(biāo)簽應(yīng)用同一種樣式，而只想對(duì)某些標(biāo)簽應(yīng)用某種樣式，它們不一定會(huì)是相同的標(biāo)簽。常見(jiàn)形式如下：.類名 樣式屬性1:值1; 樣式屬性2:值2; 樣式屬性3:值3; 例如：.centerbackground-color: white; /背景顏色text-align: center;/文本水平布局如果某個(gè)標(biāo)簽的class屬性設(shè)置為類選擇符的名稱，類選擇符就會(huì)對(duì)此標(biāo)簽起作用。例如：類選擇符類選

36、擇符h1和h2的class屬性都設(shè)置為center，則center樣式規(guī)則就會(huì)對(duì)它們起作用。L3. 樣式選擇符3ID選擇符ID選擇符用于對(duì)某個(gè)元素定義樣式規(guī)則，只能用于某個(gè)元素。常見(jiàn)格式如下：ID名稱 樣式屬性1:值1; 樣式屬性2:值2; 樣式屬性3:值3; 例如：#headerbackground-color: white;text-align: center;如果某個(gè)標(biāo)簽的ID屬性的值和ID選擇符的名稱相同，則ID選擇符會(huì)對(duì)此標(biāo)簽生效。例如： . L3. 樣式選擇符4偽類“偽類”是專門針對(duì)超鏈接標(biāo)簽的選擇符，使用偽類可以為訪問(wèn)過(guò)的、未訪問(wèn)過(guò)的、激活的、鼠標(biāo)指針懸停于其上的4種狀態(tài)超鏈接定

37、義不同的顯示樣式：A:link：代表未訪問(wèn)過(guò)的超鏈接。A:visited：代表訪問(wèn)過(guò)的超鏈接。A:active：當(dāng)超鏈接處于選中狀態(tài)。A:hover：當(dāng)鼠標(biāo)指針移動(dòng)到超鏈接上。例如：A:activecolor: blue;background-color: buttonface;L3. 樣式選擇符5包含選擇符包含選擇符用于定義具有層次關(guān)系的樣式規(guī)則，它由多個(gè)樣式選擇符組成，一般格式如下：選擇符1 選擇符2 樣式屬性1:值1;樣式屬性2:值2; 樣式屬性3:值3; 各選擇符之間用空格分割，例如：DIV P H1font-weight: bold;color: red;返回L4. 樣式生成器樣式生

38、成器可以幫助設(shè)計(jì)者快速地設(shè)置元素的樣式，在“設(shè)計(jì)”視圖下，選中某個(gè)元素，右擊選擇“屬性”，在“屬性”窗口中選擇“style”，即可出現(xiàn)如圖4.29所示“修改樣式”窗口。圖4.29 樣式設(shè)計(jì)器字體L4. 樣式生成器注：Visual Studio 2008為了便于元素的選擇，提供了HTML標(biāo)簽導(dǎo)航，如圖4.30所示，用于顯示目前鼠標(biāo)所在區(qū)域所使用的HTML標(biāo)簽，在HTML標(biāo)簽導(dǎo)航單擊標(biāo)簽，就可以選中該元素。如果在“設(shè)計(jì)”視圖中不方便精確選擇，可以打開(kāi)“屬性”窗口，再切換到“源”視圖，把光標(biāo)定位到某個(gè)元素內(nèi)?！皩傩浴贝翱谥芯蜁?huì)顯示對(duì)應(yīng)元素的屬性。圖4.30 HTML標(biāo)簽導(dǎo)航L4. 樣式生成器1字體如

39、圖4.29所示，字體類別主要用來(lái)對(duì)元素內(nèi)的文本的字體進(jìn)行相應(yīng)的設(shè)置，可以設(shè)置字體名稱（font-family），字體大?。╢ont-size），字體粗細(xì)（font-weight），字體風(fēng)格（font-style），小型大寫字母字體（font-variant），字母轉(zhuǎn)換（font-transform），字體顏色（color），字體裝飾（text-decoration）。（1）font-family：設(shè)置元素內(nèi)字體所采用的字體名稱，如“宋體”、“黑體”等。（2）font-size：設(shè)置元素內(nèi)字體的大小，字體的大小采用CSS中統(tǒng)一的長(zhǎng)度單位。 字體大小的取值很多，可能取值如表4.3、表4.4所示。L

40、4. 樣式生成器（3）font-weight：設(shè)置元素內(nèi)字體的粗細(xì)，可能取值如表4.5所示。值描 述normal默認(rèn)。定義標(biāo)準(zhǔn)的字符bold定義粗體字符bolder定義更粗的字符lighter定義更細(xì)的字符100 200 300 400 500 600 700 800 900定義由細(xì)到粗的字符。400 等同于 normal，而 700 等同于 bold表4.5 font-weight取值L4. 樣式生成器（4）font-style：設(shè)置元素內(nèi)字體的風(fēng)格，可能的取值如表4.6所示。值描 述normal默認(rèn)。瀏覽器顯示標(biāo)準(zhǔn)的字體italic瀏覽器顯示斜體的字體oblique瀏覽器顯示傾斜的字體表4

41、.6 font-style取值L4. 樣式生成器（5）font-variant：設(shè)置元素內(nèi)小型大寫字母的顯示方式，可能的取值如表4.7所示。值描 述normal默認(rèn)。瀏覽器顯示一個(gè)標(biāo)準(zhǔn)的字體small-caps瀏覽器顯示小型大寫字母的字體，這意味著所有的小寫字母均會(huì)被轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其他文本相比，其字體尺寸更小表4.7 font-variant取值L4. 樣式生成器（6）font-transform：設(shè)置元素內(nèi)單詞的字母轉(zhuǎn)換，可能的取值如表4.8所示。值描 述none默認(rèn)，無(wú)轉(zhuǎn)換發(fā)生capitalize將每個(gè)單詞的第一個(gè)字母轉(zhuǎn)換成大寫，其他無(wú)轉(zhuǎn)換發(fā)生uppercas

42、e轉(zhuǎn)換成大寫lowercase轉(zhuǎn)換成小寫表4.8 font-transform取值L4. 樣式生成器（7）color：設(shè)置元素內(nèi)字體的顏色。通過(guò)可視化的顏色選擇器進(jìn)行選擇即可。（8）text-decoration：設(shè)置字體的裝飾，可能的取值如表4.9所示。值描 述值描 述none 默認(rèn)，無(wú)裝飾line-through貫穿線blink閃爍overline上劃線underline下劃線表4.9 text-decoration取值L4. 樣式生成器2塊如圖4.31所示，塊主要用來(lái)對(duì)文本塊進(jìn)行設(shè)置，可以設(shè)置塊內(nèi)文字的行高（line-height），文字垂直對(duì)齊方式（vertical-align），文字

43、水平對(duì)齊方式（text-align），文字縮進(jìn)（text-indent），空格字符處理方式（white-space），單詞間距（word-spacing），文字間距（letter-spacing）。圖4.31 樣式設(shè)計(jì)器塊L4. 樣式生成器（1）line-height：設(shè)置元素內(nèi)文字的行高，字體最底端與字體內(nèi)部頂端之間的距離，取值為“由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值 | 百分?jǐn)?shù)”。（2）vertical-align：設(shè)置元素內(nèi)文字的垂直對(duì)齊方式，可能的取值如表4.10所示。值描 述sub垂直對(duì)齊文本的下標(biāo)super垂直對(duì)齊文本的上標(biāo)值由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值 | 百分?jǐn)?shù)?？蔀樨?fù)數(shù)。

44、定義由基線算起的偏移量?；€對(duì)于數(shù)值來(lái)說(shuō)為0，對(duì)于百分?jǐn)?shù)來(lái)說(shuō)就是0%表4.10 vertical-align取值L4. 樣式生成器（3）text-align：設(shè)置元素內(nèi)文字的水平對(duì)齊方式，可能的取值如表4.11所示。值描 述left默認(rèn)值。左對(duì)齊right右對(duì)齊center居中對(duì)齊justify兩端對(duì)齊表4.11 text-align 取值L4. 樣式生成器（4）text-indent：設(shè)置元素內(nèi)文字的縮進(jìn)，取值為“由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值 | 百分?jǐn)?shù)”。（5）white-space：設(shè)置元素內(nèi)空格字符處理方式，可能的取值如表4.12所示。值描 述normal默認(rèn)處理方式。文本自動(dòng)處

45、理?yè)Q行。假如抵達(dá)容器邊界，內(nèi)容會(huì)轉(zhuǎn)到下一行pre用等寬字體顯示預(yù)先格式化的文本。不合并字間的空白距離和進(jìn)行兩端對(duì)齊nowrap強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或遇到br元素表4.12 white-space 取值（6）word-spacing：設(shè)置元素內(nèi)單詞間的間距，取值為“由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值 | 百分?jǐn)?shù)”。（7）letter-spacing：設(shè)置元素內(nèi)文字間的間距，取值為“由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值 | 百分?jǐn)?shù)”。L4. 樣式生成器3背景如圖4.32所示，背景類別主要用來(lái)對(duì)元素的背景進(jìn)行相應(yīng)的設(shè)置，可以設(shè)置背景顏色（background-color），背景圖片

46、（background-image），背景圖片的平鋪方式（background-repeat），背景圖片的滾動(dòng)方式（background-attachment），背景圖片在元素內(nèi)的X軸與Y軸的相對(duì)位置（background-position）等。圖4.32 樣式設(shè)計(jì)器背景L4. 樣式生成器（1）background-color：設(shè)置元素背景顏色，通過(guò)顏色選擇窗口選擇。（2）background-image：設(shè)置元素背景圖片，通過(guò)“瀏覽”定位到某張圖片。（3）background-repeat：設(shè)置元素背景圖片的平鋪方式，常用于背景圖片大小小于元素的大小的情況，可能取值如表4.13所示。值描 述

47、repeat默認(rèn)值。背景圖像在縱向和橫向上平鋪no-repeat背景圖像不平鋪兩端對(duì)齊repeat-x背景圖像僅在橫向上平鋪repeat-y背景圖像僅在縱向上平鋪表4.13 background-repeat取值L4. 樣式生成器（4）background-attachment：設(shè)置元素背景圖片是否隨元素內(nèi)容滾動(dòng)，對(duì)于那些帶滾動(dòng)條的元素需要設(shè)置，可能取值如表4.14所示。值描 述scroll默認(rèn)值。背景圖像隨元素內(nèi)容的滾動(dòng)而滾動(dòng)fixed背景圖像固定表4.14 background-attachment取值L4. 樣式生成器（5）background-position：設(shè)置背景圖片在元素內(nèi)的位

48、置。分為X軸上的位置和Y軸上的位置，元素的左上角為坐標(biāo)原點(diǎn)，頂部邊緣往右的方向?yàn)閄軸方向，左部邊緣向下的方向?yàn)閅軸方向。它們可能的取值如表4.15所示。值描 述left居左center居中right居右值百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值表4.15 (x),(y)background-position取值L4. 樣式生成器4邊框如圖4.33所示，用來(lái)設(shè)置元素四周的邊框樣式（border-style），邊框?qū)挾龋╞order-width），邊框顏色（border-color）。圖4.33 樣式生成器邊框L4. 樣式生成器（1）border-style：設(shè)置元素邊框的樣式，可能取值如表

49、4.16所示。值描 述none默認(rèn)值。無(wú)邊框。不受任何指定的 border-width 值影響hidden隱藏邊框。IE不支持dotted在MAC平臺(tái)上IE4+與Windows和UNIX平臺(tái)上IE5.5+為點(diǎn)線。否則為實(shí)線dashed在MAC平臺(tái)上IE4+與Windows和UNIX平臺(tái)上IE5.5+為虛線。否則為實(shí)線solid實(shí)線邊框double雙線邊框。兩條單線與其間隔的和等于指定的 MSITStore:E:%5C%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99%5CWeb%E8%AE%BE%E8%AE%A1%E6%8A%80%E6%9C%AF%5CCSS%5CCSS

50、%202.0%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C(%E5%90%AB%E7%B4%A2%E5%BC%95).chm:/css20/c_borderwidth.html值groove根據(jù) border-color 的值畫3D凹槽ridge根據(jù) border-color 的值畫3D凸槽inset根據(jù) border-color 的值畫3D凹邊outset根據(jù) MSITStore:E:%5C%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99%5CWeb%E8%AE%BE%E8%AE%A1%E6%8A%80%E6%9C%AF%5CCSS%5CCS

51、S%202.0%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C(%E5%90%AB%E7%B4%A2%E5%BC%95).chm:/css20/c_bordercolor.html的值畫3D凸邊表4.16 border-style取值L4. 樣式生成器（2）border-width：設(shè)置元素邊框的寬度，可能取值如表4.17所示。值描 述medium默認(rèn)值。默認(rèn)寬度thin小于默認(rèn)寬度thick大于默認(rèn)寬度值由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值，不可為負(fù)值表4.17 border-width取值（3）border-color：設(shè)置元素邊框的顏色，通過(guò)顏色選擇窗口選擇。L4.

52、 樣式生成器5方框如圖4.34所示，方框類別用來(lái)設(shè)置元素邊框與其他元素邊框之間距離，稱為邊距（Margin）。設(shè)置元素內(nèi)容與元素邊框之間距離，稱為空白（Padding）。圖4.34 樣式控制器方框L4. 樣式生成器要理解元素邊距和空白的概念，需要理解CSS中元素的“盒模型”。網(wǎng)頁(yè)內(nèi)的每一個(gè)元素在網(wǎng)頁(yè)上都是可以看成一個(gè)盒子，盒子結(jié)構(gòu)如圖4.35所示。即一個(gè)元素由如下幾部分組成的：內(nèi)容、空白、邊框、邊距。因此一個(gè)元素的實(shí)際長(zhǎng)度等于：左邊距左邊框左空白內(nèi)容長(zhǎng)度右空白右邊框右邊距。圖4.35 CSS盒子模型L4. 樣式生成器6定位如圖4.36所示，定位類別主要用來(lái)設(shè)置元素在頁(yè)面中的位置屬性。包括位置模

53、式（position），層次順序（z-index），寬度（width），高度（height），相對(duì)具有定位設(shè)置的父元素的位置關(guān)系（top、right、bottom、left）。圖4.36 樣式控制器定位L4. 樣式生成器position：用來(lái)設(shè)置元素在網(wǎng)頁(yè)內(nèi)的位置模式，可能取值如表4.18所示。值描 述static默認(rèn)值。無(wú)特殊定位，元素遵循HTML定位規(guī)則，正常流中的位置absolute將元素從文檔流中拖出，使用top、right、bottom，left等屬性相對(duì)于其最接近的一個(gè)最有定位設(shè)置的父元素進(jìn)行絕對(duì)定位。如果不存在這樣的父元素，則依據(jù) body 元素。允許元素重疊，層疊通過(guò)z-ind

54、ex 屬性定義relative元素不可層疊，但將依據(jù)top、right、bottom、left等屬性在正常文檔流中偏移位置fixed未支持。元素定位遵從絕對(duì)（absolute）方式，但是要遵守一些規(guī)范 表4.18 position取值L4. 樣式生成器不同位置模式的定位原則如下。（1）正常流中的位置正常流中的位置是按照如下的布局顯示的。網(wǎng)頁(yè)中的元素按照從左到右、從上到下的順序顯示，各元素之間不重疊。如果不設(shè)置元素定位方式，則正常流中的位置作為默認(rèn)顯示方式。（2）絕對(duì)定位絕對(duì)位置是指元素顯示在頁(yè)中的位置由sytle樣式的top、right、bottom、left及z-index屬性決定的。L4. 樣式生成器（3）正常流中的偏移量正常流中的偏移量是元素在正常流中的位置基礎(chǔ)上，再