網(wǎng)頁設(shè)計期末復習網(wǎng)頁設(shè)計和開發(fā)

1、 PAGE8 / NUMPAGES8 網(wǎng)頁設(shè)計簡答題：相對定位與絕對定位的區(qū)別？并舉例說明。相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位，元素原先在正常文檔流中所占的空間會關(guān)閉元素定位后生成一個塊級框。制作菜單的常用方法？【第一步】我們要先做一個容器（要求：ID為“nav”，寬度為960px，高度為：35px，位于頁面水平正中，與瀏覽器頂部的距離是30px；)【第二步】盒子做好了，我們就要往里面放導航條中的內(nèi)容了“CSS學習 學前準備 入門教程 提高教程 布局教程 精彩應(yīng)用”，插入標簽有序列表ul，

2、單元格li新建樣式復合類型#nav ul li float:left;在li標簽的CSS屬性中加入“l(fā)ist-style:none;”【第三步】后面的文字全部貼著前面的文字。設(shè)置標簽的寬度為100像素：【第四步】我們需要將上面的導航條做以下幾個修改1）給上面的導航加上；2）文字大小修改為12px;3）并且規(guī)定樣式，鼠標移上去和拿開的效果圖片與文字的對齊方式？(padding,margin,DIV的float、行高、對齊、背景圖片設(shè)置屬性)1.padding簡寫屬性在一個聲明中設(shè)置所有內(nèi)邊距屬性。不允許使用負值。可能的值auto、length、%、inherit2.margin簡寫屬性在一個聲明

3、中設(shè)置所有外邊距屬性。該屬性可以有 1 到 4 個值可能的值auto、length、%、inherit3.float定義元素在哪個方向浮動none、left 、right、inherit(規(guī)定應(yīng)該從父元素繼承 float 屬性的值)4.line-height屬性可設(shè)置行間的距離，不允許使用負值。5. text-align 屬性規(guī)定元素中的文本的水平對齊方式。 圖像由標簽定義。是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽。DIV中設(shè)置CSS的兩種方式(內(nèi)聯(lián)和外聯(lián)方式代碼)外聯(lián)：是指把樣式寫在一個CSS文件中通過link標簽導入到頁面中例如：1.2.內(nèi)聯(lián):是指在同一個頁面文件中，統(tǒng)一寫出在h

4、ead style標簽中，要使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標簽內(nèi)使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：ul與li的設(shè)置。 標簽定義無序列表。（ul是unordered lists的縮寫）ul標簽是成對出現(xiàn)的，以；開始，；結(jié)束 每一列使用；標簽定義在html中是一對標記,表示有序列表或者無序列表的項目。如果在標記之間，則表示無序列表。針對IE6不支偽類（編寫JS代碼）startList=function()if(document.all)&(document.getElementById)rootnav=document.ge

5、tElementById(nav)arrayli=rootnav.getElementsByTagName(li);for(i=0;iarrayli.length;i+)currentli=arraylii;currentli.onmouseover=function()this.className+=this.className+ current;currentli.onmouseout=function()this.className=this.className.replace( current,);window.onload=startList;制作背景音樂、播放Flash、視頻文件等

6、關(guān)鍵代碼。背景音樂：之間加入 播放Flash、視頻文件制作動態(tài)公告的標簽及屬性設(shè)置。從插入菜單選 “標簽”， 然后在對話框中選“html標簽”“頁元素”“marquee”。然后在打開右邊標簽檢查器，里設(shè)定marquee標簽的屬性。文字移動屬性的設(shè)置 方向 #=left, right, up, downleft從右向左移，right從左向右移，up從下向上移，down從上向下移。 學校將于近期舉電子信息系網(wǎng)頁設(shè)計大賽，報名截 制作表單的常用元素。1創(chuàng)建表單.2.創(chuàng)建滾動菜單,size設(shè)置在需要滾動前可以看到的表單項數(shù)目 設(shè)置每個表單項的內(nèi)容3.創(chuàng)建下拉菜單 設(shè)置每個菜單項的內(nèi)容4.創(chuàng)建一個文本框

7、區(qū)域,列的數(shù)目設(shè)置寬度,行的數(shù)目設(shè)置高度5.創(chuàng)建一個復選框,文字在標簽后面6.創(chuàng)建一個單選框,文字在標志后面7. 創(chuàng)建一個單行文本輸入?yún)^(qū)域,size設(shè)置為字符串的寬度創(chuàng)建提交(submit)按鈕8.創(chuàng)建一個使用圖像的提交(submit)按鈕9.創(chuàng)建重置(reset)按鈕J常見元素的功能（DIV、Span、a、ul、li、h、img等）Div；為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。Span；在行內(nèi)定義一個區(qū)域，span加在內(nèi)容里，還是一行顯示，1.span 元素為 p 元素增加了額外的結(jié)構(gòu)：some text.some other text.2.span可以對

8、文檔中的部分文本增添視覺效果：健康、富裕a:建立超xx文本Ul:標記插入無序列表！Li：定義列表項序列！h:網(wǎng)頁 HYPERLINK baike.baidu./view/692.htm t _blank html 中對文本標題所進行的著重強調(diào)的一種標簽Img:表示插入圖片！二、上機操作(1)用JS寫出從小到大排序算法。function sort() var ary; var len, ex, tmp; var inputN = document.getElementById(Text1); var ary=inputN.getAttribute(value); ary = ary.split(

9、,); len = ary.length; for(var i=0; i=i; j-) if(aryj+1imagenumbers)imageindex=1;setTimeout(changeImage( ),t*1000);function setFocus(indexImage)for(i=1;i=imagenumbers;i+)if(i=indexImage)document.getElementById(image+i).style.display=block;elsedocument.getElementById(image+i).style.display=none;window.

10、onload=changeImage;(3)用JS判斷表單驗驗（包括密碼驗證、根據(jù)用戶選擇的值，自動填寫相關(guān)值，如選擇某個系，自動讀取列表值）function Check() var passwd=document.getElementById(passwordText).value;var Confirmpasswd=document.getElementById(ConfirmpasswordText).value; if (passwd=) alert(密碼不能為空); if (passwd!= Confirmpasswd) alert(密碼不一致，請重輸); var confirack

11、=document.getElementById(CheckBoxServiceAck); if(!confirack.checked) alert(你未接收服務(wù)條款!); 。/根據(jù)專業(yè)方向列出對應(yīng)所有專業(yè)function selectToPreTextarea()var currSelectIndex = document.getElementById(listMajor).selectedIndex;var preSelect = document.getElementById(SelectPreselectmajors);if( currSelectIndex=1)jsAddItemTo

12、Select(preSelect, 計算機應(yīng)用, 0);jsAddItemToSelect(preSelect, 計算機網(wǎng)絡(luò), 1);jsAddItemToSelect(preSelect, 電子商務(wù), 2);if( currSelectIndex=2)jsAddItemToSelect(preSelect, 會計電算化, 3);jsAddItemToSelect(preSelect, 經(jīng)濟管理, 4);if( currSelectIndex=3)jsAddItemToSelect(preSelect, 英語, 5);jsAddItemToSelect(preSelect, 日語, 6);/用

13、戶選專業(yè)function getMajors()var preSelect = document.getElementById(SelectPreselectmajors);var selectIndex=preSelect.selectedIndex;var ConfirmSelect = document.getElementById(ConfirmPreselectmajors);var currSelectText = preSelect.optionsselectIndex.text; var currSelectvalue = preSelect.selectedIndex; js

14、AddItemToSelect(ConfirmSelect, currSelectText, currSelectvalue);/用戶刪專業(yè)function DeletedMajors()var ConfirmSelect = document.getElementById(ConfirmPreselectmajors);jsRemoveSelectedItemFromSelect(ConfirmSelect);/ 1.判斷select選項中 是否存在Value=paraValue的Itemfunction jsSelectIsExitItem(objSelect, objItemValue)

15、 var isExit = false; for (var i = 0; i objSelect.options.length; i+) if (objSelect.optionsi.value = objItemValue) isExit = true; break; return isExit; / 2.向select選項中 加入一個Item function jsAddItemToSelect(objSelect, objItemText, objItemValue) /判斷是否存在 if (!jsSelectIsExitItem(objSelect, objItemValue) var

16、 varItem = new Option(objItemText, objItemValue); objSelect.options.add(varItem); / 3.從select選項中 刪除一個Item function jsRemoveItemFromSelect(objSelect, objItemValue) /判斷是否存在 if (jsSelectIsExitItem(objSelect, objItemValue) for (var i = 0; i = 0; i-) if(objSelecti.selected = true) objSelect.optionsi = null; / 5.修改select選項中 value=paraValue的text為paraText function jsUpdateItemToSelect(objSelect, objIt