Java Web程序設計 課件 第3章 CSS；第4章 Javascript_第1頁
Java Web程序設計 課件 第3章 CSS；第4章 Javascript_第2頁
Java Web程序設計 課件 第3章 CSS；第4章 Javascript_第3頁
Java Web程序設計 課件 第3章 CSS；第4章 Javascript_第4頁
Java Web程序設計 課件 第3章 CSS；第4章 Javascript_第5頁
已閱讀5頁，還剩115頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第3章CSS主講人：2025/2/61主要內容2025/2/6《Web程序設計》21CSS簡介2基本語法3常用樣式4DIV+CSS布局本章課程目標知識目標掌握CSS樣式的基本語法、常用樣式以及使用方法；能力要求：能夠認識到解決問題有多種解決方案，并運用文獻資料檢索研究尋找可替代的方案，具備多方案比較選擇能力；能夠理解并掌握Web程序設計中的基礎知識與工作原理，將知識與原理應用于開發過程中的問題分析；2025/2/6《Web程序設計》32.1HTML簡介CSS（CascadingStyleSheets層疊樣式表）是W3C協會為了彌補HTML在樣式排版功能上的不足而制定的一套擴展樣式標準，也由于CSS可以豐富網站的視覺效果，使網頁設計者能夠以更有效的方式設計出更具表現力的網頁效果。2025/2/6《Web程序設計》4CSS特點豐富的樣式定義：CSS提供了豐富的文檔樣式外觀內容和樣式分離：使網頁設計簡潔明了，分工明確易于使用和修改：CSS可以將樣式定義在專門的CSS文件中多頁面應用：可以在多個頁面中使用同一個CSS樣式表層疊：就是對一個元素多次設置同一個樣式，將使用優先級最高方式設置的屬性值。頁面壓縮：樣式的聲明單獨放到CSS樣式表中，可以大大的減小頁面的體積，這樣在加載頁面時使用的時間也會大大的減少2025/2/6《Web程序設計》5CSS一鍵設置黑白頁面2025/2/6《Web程序設計》6主要內容2025/2/6《Web程序設計》71CSS簡介2基本語法3常用樣式4DIV+CSS布局CSS基本語法CSS的每個規則都包括三部分：選擇器、樣式屬性和屬性值。使用語法規范如下所示：2025/2/6《Web程序設計》8selector{property:value;property:value;...property:value}參數說明：selector，選擇器，選擇樣式要作用的HTML元素，可以是多個，以逗號分隔；property，樣式的屬性，即樣式的名稱；value，樣式的值，與property為一對。樣式說明2025/2/6《Web程序設計》9簡單示例2025/2/6《Web程序設計》10<html><head><title>CSS簡單示例</title><style>h1{color:red;font-size:14px}</style></head><body><div><h1>網頁標題1</h1></div></body></html>選擇器選擇器是控制CSS樣式作用的對象，通常可以選擇一個或多個HTML元素。CSS選擇器包括了：元素選擇器類選擇器ID選擇器屬性選擇器派生選擇器。2025/2/6《Web程序設計》11元素選擇器元素選擇器是CSS選擇器中最基本的一種選擇器，通過直接指定HTML元素標簽，設置CSS樣式要作用的元素。2025/2/6《Web程序設計》12<style>html{background-color:black;}p{font-size:30px;backgroud-color:gray;}h2{background-color:red;}</style>實現的效果分別是：對整個文檔添加黑色背景；將所有p元素字體大小設置為30像素同時添加灰色背景；對文檔中所有h2元素添加紅色背景。元素選擇器也可以對多個元素使用同一組樣式允許使用“*”通配符，讓網頁中所有元素的字體都設置為“黑體”如果font-size屬性對于某些元素是無效的話，那么該效果將被忽略。2025/2/6《Web程序設計》13h1,h2,h3,h4,h5,h6,p{font-family:黑體;}*{font-family:黑體;font-size:12px}類(class)選擇器類選擇器用于描述一組元素的樣式，這組元素指定了相同的樣式名稱，這樣就允許了樣式定義可以應用于多個元素中。class選擇器在HTML中以class屬性表示,在CSS定義中，類選擇器以一個點"."號顯示。2025/2/6《Web程序設計》14<style>.center{text-align:center}</style><body>.....<divclass=”center”>...</div><pclass=”center”>...</p></body>類(class)選擇器CSS還允許使用多類選擇器，即對于一個元素的class聲明中使用了多個class，必須要同時滿足這個多個class。2025/2/6《Web程序設計》15<style>.bold{font-weight:bold;}.italic{font-style:italic;}.bold.italic{background:#eeeeee;}</style><pclass="bolditalic">這段文本將會受多個CSS樣式作用</p>將僅作用于class聲明為“.bold.italic”的元素。ID選擇器ID選擇器可以為標有特定id的HTML元素指定特定的樣式。HTML元素可以設置ID屬性來定義某個元素的ID，CSS樣式定義中ID選擇器以"#"來定義。2025/2/6《Web程序設計》16<style>#ref{text-align:center;color:red;}</style><body><p>第一個段落</p><pid=”ref”>第二個段落</p></body>ID選擇器“#ref”將只會作用于第二個P元素上。屬性選擇器屬性選擇器允許使用某個屬性名稱作為選擇器，選擇具有該屬性的所有HTML元素，而無論其屬于哪種元素。2025/2/6《Web程序設計》17<style>*[title]{color:red}</style><style>a[href][title]{color:red;}</style><body><ahref=”#”title=”鏈接1”>測試鏈接1</a><ahref=”#”>測試鏈接2</a>......</body>該選擇器只會對測試鏈接1生效，而對測試鏈接2無效。屬性選擇器的模式匹配屬性選擇器還支持模式匹配的方式2025/2/6《Web程序設計》18模式匹配類型描述[attr^="str"]選擇attr屬性值以"str"開頭的所有元素[attr$="str"]選擇attr屬性值以"str"結尾的所有元素[attr*="str"]選擇attr屬性值中包含子串"str"的所有元素[attr|="str"]選擇attr屬性值中等于”str”或以"str"開頭的所有元素派生選擇器派生選擇器是在以上幾種基本選擇器之外的衍生選擇器，充分利用元素之間的層級關系、順序關系、組合關系等，支持更靈活的選擇器。包括：后代選擇器（Descendantselectors）子元素選擇器（Childselectors）相鄰兄弟選擇器（Adjacentsiblingselector）2025/2/6《Web程序設計》19后代選擇器后代選擇器可以選擇某元素后代的元素，可以根據上下文關系或層級關系來選擇。2025/2/6《Web程序設計》20<style>h1em{color:red;}</style><body><h1>這是一段非常<em>重要</em>的標題.</h1><p>這是一段非常<em>重要</em>的文本.</p></body>該樣式僅對h1標題行生效，對第二行p文本行不生效。后代選擇器允許兩個元素之間的層次間隔可以是無限的，而不必局限于上下級。子元素選擇器與后代選擇器類似但又不同，子元素選擇器允許選擇某個元素的子元素，即相鄰層次上的上下層子元素，而不是任意的后代元素。子元素選擇器通過“>”符號指定上下層間關系。2025/2/6《Web程序設計》21<style>h1>strong{color:red;}</style><body><h1>

這是一段<strong>非常</strong><strong>非常</strong>重要的標題.</h1><h1>這是一段<em>非常<strong>重要</strong></em>的標題.</h1></body>第二行的h1不會生效，因為第二行的h1與strong元素之間還有一層em元素。相鄰兄弟選擇器相鄰兄弟選擇器允許選擇屬于同一父元素下的兩個相鄰的兄弟元素。2025/2/6《Web程序設計》22<style>h1+p{margin-top:50px;}</style><body><h1>這是標題</h1><p>這是第一個段落</p><p>這是第二個段落</p></body><style>li+li{font-weight:bold}</style><div><ul><li>Listitem1</li><li>Listitem2</li><li>Listitem3</li></ul><ol><li>Listitem1</li><li>Listitem2</li><li>Listitem3</li></ol></div>以上兩個示例中的最后一個元素都不生效選擇器的組合CSS選擇器在使用時，可以將多個選擇器進行組合，用于更準確的定位要作用的元素。2025/2/6《Web程序設計》23<style>.classA.classB{border:1pxsolidred;}.classa.classb{border:1pxsolidblue;}</style><body><inputtype="text"class="classAclassB"value="選擇器為.classA.classB"/><divclass="classa"><inputclass="classb"type="text"value="選擇器為.classa.classb"/></div></body>第一組選擇器“.classA.classB”中間沒有空格，表示兩個類選擇器同時出現于某個元素的class屬性中；第二組選擇器“.classa.classb”中間有空格，表示為后代選擇器。CSS作用方式CSS作用方式是指CSS代碼嵌入HTML代碼中的方式主要有以下三種：內聯樣式內部樣式表外部連接方式2025/2/6《Web程序設計》24內聯樣式內聯樣式直接對HTML標簽元素使用style屬性，樣式的屬性與值均寫在style屬性的值中，同樣以“屬性-值”對出現。但使用這種方法定義樣式時，效果只可以控制某一個HTML標記，無法通用。2025/2/6《Web程序設計》25<pstyle="color:red;margin-left:20px">這是一段示例文本</p>使用內聯方式進行樣式定義時需要注意：

需要在標簽內使用樣式，style屬性值中可以包含任何CSS屬性；HTML標簽的style定義僅對該位置上的標簽生效；style的多個“屬性-值”對之間用分號分隔。內部樣式表內部樣式表一般位于HTML文件的頭部，即<head>與</head>標簽內，并且以<style>開始，以</style>結束，然后在整個HTML文件中可以直接調用該樣式，這種方式適合單個文檔的樣式定義。2025/2/6《Web程序設計》26<head><styletype="text/css">h1{color:red;}p{margin-left:20px;}</style></head>使用內部樣式表定義CSS樣式時，需要注意：定義的樣式僅對當前頁面生效，不能共享至其它頁面；樣式將會對該頁面中的所有符合條件的元素生效；外部樣式文件鏈接外部樣式表是在網頁中調用已經定義好的樣式表來實現樣式表的應用，它是一個單獨的文件，然后在頁面中進行引用。這種方式適合于大型項目的編程，可以很好地實現樣式文件的共享，提高樣式代碼的復用效率。外部樣式文件的引用方式有兩種，<link>鏈接方式和@import引入方式。2025/2/6《Web程序設計》27<link>鏈接方式在頁面中用<link>標記鏈接到這個樣式表文件，這個<link>標記必須放在頁面的<head>區內。2025/2/6《Web程序設計》28<head><linkrel="stylesheet"type="text/css"href="../css/mystyle.css"/></head>rel="stylesheet"指調用的相關文件為樣式表文件；type="text/css"指引入的文件類型是樣式表文本；CSS文件一定是純文本格式；

再修改外部樣式表時，引用它的所有外部頁面也會自動更新；css文件的位置在上一級文件夾的css目錄中。通過@import方式引入導入外部樣式表是指在內部樣式表的<style>里導入一個外部樣式表，導入時用@import。被導入的HTML文件在初始化時會將該CSS文件導入HTML文件中，作為此HTML文件的一部分，類似于內嵌式的效果。2025/2/6《Web程序設計》29示例例如，css目錄下有一個外部樣式文件mystyle.css2025/2/6《Web程序設計》30<styletype="text/css">

@importurl("../css/mystyle.css");</style>使用<style>標簽來嵌入，type聲明了類型為text/css，表示為樣式；@import放在<style>標簽中的第一行，表示引入外部樣式文件，CSS規范中規定該代碼必須放在第一行；url中給出了樣式文件的具體位置，可以使用相對位置或絕對位置；樣式的繼承性CSS中，部分樣式具有一定的繼承性。如果一個標簽本身未設置過某些樣式，而它的某個祖先級設置過，則該標簽在瀏覽器中也會加載這些樣式，這些樣式都是從祖先級繼承而來，這種現象就是繼承性。當前，能夠被繼承的樣式僅為所有的文字相關樣式屬性，其他的樣式都不能被繼承。2025/2/6《Web程序設計》31實例分析2025/2/6《Web程序設計》32<head><style>.box1{

width:200px;

height:200px;

background-color:pink;

color:green;

font-family:"宋體";

font-size:14px;}</style></head><body>

<h2>這是一個二級標題</h2>

<divclass="box1">

<p>這是box1標簽內的段落</p>

<p>這是box1標簽內的段落</p>

<p>這是box1標簽內的段落</p>

<p>這是box1標簽內的段落</p>

</div></body>可以看到，雖然P標簽未定義任何CSS樣式，但顯示時，仍然顯示了樣式的效果，這是由于其父標簽DIV定義了字體樣式，被P標簽繼承了。然而寬度width和高度height的樣式并未繼承。樣式的層疊CSS的本意就是樣式層疊表，即樣式可以層疊顯示。層疊可以理解為樣式的覆蓋，當一個元素被運用上多種樣式，并且出現重名的樣式屬性時，瀏覽器必須從中選擇一個屬性值生效，這個過程就叫“層疊”。由于樣式有多種定義方式，如行內樣式、頁面嵌入式、鏈接到外部樣式文件等，因此，樣式間難免會出現重復或沖突的情況。為此，CSS規范中規定了樣式的層疊規則。2025/2/6《Web程序設計》33HTML頁面CSS定義CSS定義CSS定義層疊規則規則一：由于繼承而發生樣式沖突時，最近祖先獲勝。2025/2/6《Web程序設計》34<head><title>規則1</title><style>body{color:black;}p{color:blue;}</style></head><body><p>這是一段<strong>測試</strong>文本。</p></body>strong分別從body和p中繼承了color屬性，但是由于p在繼承樹上離strong更近，因此strong中的文字最終繼承p的藍色。層疊規則規則二：繼承的樣式和直接指定的樣式沖突時，直接指定的樣式獲勝。2025/2/6《Web程序設計》35<head><title>規則2</title><style>body{color:black;}p{color:blue;}strong{color:red;}</style></head><body><p>這是一段<strong>測試</strong>文本。</p></body>由于為strong標簽指定了樣式“color:red”，優先級高于繼承自p的樣式，因此，該標簽最終顯示的效果為紅色字體。層疊規則規則三：直接指定的樣式發生沖突時，樣式權值高者獲勝。2025/2/6《Web程序設計》36內聯樣式的權值>>ID選擇器>>類選擇器>>標簽選擇器。組合選擇器的權值為每項權值之和，例如“#nav.currenta”的權值為100+10+1=111。CSS選擇器權值標簽選擇器1類選擇器10ID選擇器100內聯樣式1000偽元素(:first-child等)1偽類(:link等)10層疊規則規則四：樣式權值相同時，后者獲勝。2025/2/6《Web程序設計》37<head><title>規則4</title><style>body{color:black;}p.test{color:blue;}.parastrong{color:red;}</style></head><body><pclass=”para”>這是一段<strongclass=”test”>測試</strong>文本。</p></body>strong標簽元素同時受兩個定義的樣式作用，“p.test”與“.parastrong”，且兩者的權值都是11，后者“.parastrong”獲勝，最終顯示為紅色字體。層疊規則規則五：!important的樣式屬性不被覆蓋。2025/2/6《Web程序設計》38如果一定要使某個樣式屬性生效，而不讓它被覆蓋，可以在屬性值后加上!important，以規則四的例子為例，”p.test{color:blue!important;}”可以強行使文本顯示藍色。特別要注意，不能濫用!important，大多數情況下都可以通過其他方式來控制樣式的覆蓋。主要內容2025/2/6《Web程序設計》391CSS簡介2基本語法3常用樣式4DIV+CSS布局樣式的取值(1)長度相關取值長度相關的取值有兩種單位：相對長度單位與絕對長度單位，典型的應用有font-size、width、height等2025/2/6《Web程序設計》40相對長度單位說明px像素值，最常用單位em倍數，繼承自祖先元素設置的字號的倍數%百分比，繼承自祖先元素設置的字號的百分比絕對長度單位說明in英寸cm厘米mm毫米pt磅樣式的取值(2)顏色相關取值CSS中有許多與顏色相關的樣式屬性，例如color、background-color、border-color等，CSS的顏色可以通過以下幾種方法指定：十六進制顏色RGB顏色RGBA顏色HSL色彩顏色名稱2025/2/6《Web程序設計》41顏色說明十六進制顏色＃RRGGBB，其中RR（紅色），GG（綠色）和BB（藍色）。所有值必須介于0和FF之間。RGBRGB（紅，綠，藍）。每個參數（紅色，綠色和藍色）定義顏色的亮度，可在0和255之間，或一個百分比值（從0％到100％）之間的整數。RGBARGBA（紅，綠，藍，alpha），alpha通道的延伸。Alpha參數是一個介于0.0（完全透明）和1.0（完全不透明）之間的參數。HSLHSL（色調，飽和度，明度）色相是在色輪上的程度（從0到360）。飽和度是一個百分比值;0％意味著灰色和100％是全彩。亮度也是一個百分點;0％是黑色的，100％是白色的。顏色名稱定義了147顏色名稱，17個標準色文本樣式文本樣式主要用于設置HTML中文本顯示的字體、大小、形態等。2025/2/6《Web程序設計》42屬性描述color設置文本顏色direction設置文本方向。letter-spacing設置字符間距line-height設置行高text-align對齊元素中的文本text-decoration向文本添加修飾text-indent縮進元素中文本的首行text-shadow設置文本陰影text-transform控制元素中的字母unicode-bidi設置或返回文本是否被重寫vertical-align設置元素的垂直對齊white-space設置元素中空白的處理方式word-spacing設置字間距字體樣式字體樣式是用于設置HTML頁面中文字顯示的字體相關效果，包括了字體、大小、加粗、斜體等。2025/2/6《Web程序設計》43屬性描述font簡寫屬性，一條屬性設置所有屬性值font-family指定字體名稱font-size字體大小font-weight字體加粗font-style字體斜體line-height行高font-variant是否以小型大寫字母的字體顯示文本英文的字體有幾種類型：

通用字體系列-擁有相似外觀的字體系統組合（如“Serif”或“Monospace”）

特定字體系列-一個特定的字體系列（如“Times”或“Courier”）2025/2/6《Web程序設計》44Genericfamily字體系列說明SerifSerif字體中字符在行的末端擁有額外的裝飾Georgia"Sans"是指無-這些字體在末端沒有額外的裝飾Sans-serif所有的等寬字符具有相同的寬度背景樣式CSS背景樣式屬性用于定義HTML元素的背景效果，主要包括背景顏色、圖片、圖片的重復、背景圖片位置等。2025/2/6《Web程序設計》45樣式屬性描述background簡寫屬性，作用是將背景屬性設置在一個聲明中。background-attachment背景圖像是否固定或者隨著頁面的其余部分滾動。background-color設置元素的背景顏色。background-image把圖像設置為背景。background-position設置背景圖像的起始位置。background-repeat設置背景圖像是否及如何重復。邊框樣式邊框樣式屬性允許為某個元素指定邊框的樣式屬性，主要包括邊框的寬度、顏色、樣式等，2025/2/6《Web程序設計》46屬性描述border簡寫屬性，用于把針對四個邊的屬性設置在一個聲明。border-style用于設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式。border-width簡寫屬性，用于為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度。border-color簡寫屬性，設置元素的所有邊框中可見部分的顏色，或為4個邊分別設置顏色。border-bottom簡寫屬性，用于把下邊框的所有屬性設置到一個聲明中。border-bottom-color設置元素的下邊框的顏色。border-bottom-style設置元素的下邊框的樣式。border-bottom-width設置元素的下邊框的寬度。border-left簡寫屬性，用于把左邊框的所有屬性設置到一個聲明中。border-left-color設置元素的左邊框的顏色。border-left-style設置元素的左邊框的樣式。border-left-width設置元素的左邊框的寬度。border-right簡寫屬性，用于把右邊框的所有屬性設置到一個聲明中。border-right-color設置元素的右邊框的顏色。border-right-style設置元素的右邊框的樣式。border-right-width設置元素的右邊框的寬度。border-top簡寫屬性，用于把上邊框的所有屬性設置到一個聲明中。border-top-color設置元素的上邊框的顏色。border-top-style設置元素的上邊框的樣式。border-top-width設置元素的上邊框的寬度。外邊距與填充樣式外邊距（margin）屬性用于定義元素周圍的空間，即邊框向外擴展的距離。外邊距范圍內沒有背景顏色，是完全透明的。填充（padding）屬性用于定義元素邊框與元素內容之間的空間，即邊框內上下左右的內邊距。區域的顏色通過background-color進行設置。2025/2/6《Web程序設計》47margin的取值通常可以是指定的數值寬度或百分比寬度，指明了外邊距的大小，還有一種特殊的值“auto”，其意義是自動設置瀏覽器的邊距，這個自動將依賴于瀏覽器，即不同瀏覽器的顯示效果可能不一樣。margin的取值可以使用一個值，也可以使用四個值，分別表示上右下左四個邊。2025/2/6《Web程序設計》48/*設置四個外邊距，分別對應上、右、下、左*/margin:{25px50px75px100px}/*設置三個外邊距，分別對應上、右、下，左默認取右值*/margin:{25px50px75px}/*設置兩個，分別對應上、右，下默認取上值，左默認取右值*/margin:{25px50px}/*設置一個，則表示四個外邊距都一樣*/margin:{25px}其它常用樣式（1）display屬性用于設置元素為塊元素或內聯元素。塊元素是一個占據整行的元素，其前后都有換行符。例如<h1>、<p>、<div>等。內聯元素只需要有必要的寬度，不強制換行。例如<span>、<a>等。block：將元素顯示為塊元素，顯示占一整行；inline：將元素顯示為內聯元素，只占必要的寬度，由元素內容自動決定，無法設置；inline-block：將元素顯示為內聯塊元素，只占必要的寬度，可以手動設置；none：不顯示；2025/2/6《Web程序設計》49（2）position屬性用于元素的定位，有以下幾種定位類型：static：默認值，沒有定位，遵循正常的文檔流對象；fixed：元素的位置相對于瀏覽器窗口是固定位置，即當窗口的滾動條向上或向下滾動時，元素的位置也不會移動，該元素不占據文檔流中其它元素位置；relative：元素位置是相對定位，即以父元素的左上角為定位點，相對于這個點的位置；absolute：元素位置是絕對定位，即以最近已定位的父元素來定位，如果沒有，則以HTML文檔的左上角來定位。2025/2/6《Web程序設計》50（3）overflow屬性overflow屬性主要用于控制元素中內容溢出時的顯示方式，主要包含以下幾種設置：visible：默認的顯示設置。內容不會被隱藏，會顯示在元素范圍之外，即保持溢出狀態；hidden：溢出的內容會被隱藏，只顯示元素范圍內的內容；scroll：會出現滾動條，可以通過滾動條查看溢出的內容；auto：如果內容超出元素的范圍，會出現滾動條，否則不會出現滾動條，正常顯示；inherit：從父元素處繼承overflow屬性的值。2025/2/6《Web程序設計》51（4）float屬性float屬性會使元素脫離原來的布局，向上浮起來，其周圍的元素也會重新排列，通常用于布局。float屬性的值通常有left或right兩種取值，表示元素浮動的方向。一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。2025/2/6《Web程序設計》52主要內容2025/2/6《Web程序設計》531CSS簡介2基本語法3常用樣式4DIV+CSS布局盒模型所有HTML元素可以看作方形盒子，CSS盒模型正是基于這點，構建了一個內容盒子，封裝周圍的HTML元素，它包括：外邊距，邊框，填充，和實際內容。2025/2/6《Web程序設計》54DIV+CSS布局DIV+CSS是一種布局方式，div是這種布局方式的主要對象，使頁面布局不再依賴表格，只需要div和css。2025/2/6《Web程序設計》55<body><divclass="container"><divid="top">上</div><divid="main">中</div><divid="footer">下</div></div></body><style>.container{width:1200px;height:600px;margin:5pxauto;text-align:center}#top{width:100%;height:120px;background:lightblue;}#main{width:100%;height:500px;background-color:lime;}#footer{width:100%;height:50px;background-color:#7FFFD4;}</style>兩列自適應布局（1）寬度自適應兩列布局兩列布局通常可以使用浮動來完成，左列設置左浮動，右列設置右浮動，這樣就不用再設置外邊距。2025/2/6《Web程序設計》56<body><divid="header">頁頭區域</div><divclass="left">左側區域</div><divclass="main">主區域</div><divid="footer">頁腳區域</div></body><style>*{margin:0;padding:0;}#header{height:50px;background:blue;}.left{width:30%;height:800px;background:red;float:left;}.main-right{width:70%;height:800px;background:pink;float:right;}#footer{clear:both;height:50px;background:gray;}</style>兩列自適應布局（2）固定寬度兩列布局要實現固定寬度的兩列布局，只需要把左右兩列包裹起來，也就是給他們增加一個父容器，然后固定父容器的寬度，父容器的寬度固定了，那么這兩列的寬度值也就固定了，就實現了固定寬度的兩列布局。2025/2/6《Web程序設計》57<body><divid="header">頁頭區域</div><divid="main"><divclass="main-left">左側區域</div><divclass="main-right">主區域</div></div><divid="footer">頁腳區域</div></body>*{margin:0;padding:0;}#header{height:50px;background:blue;}#main{width:960px;margin:0auto;overflow:hidden;}#main.main-left{width:288px;height:800px;background:red;float:left;}#main.main-right{width:672px;height:800px;background:pink;float:right;}#footer{width:960px;height:50px;background:gray;margin:0auto;}三列自適應布局三列自適應布局是指左右兩側的寬度固定，中間區域根據窗口自適應調整大小。實現方式可參考上節中提到的兩列布局，也可采用Flex布局實現。2025/2/6《Web程序設計》58采用flex模式布局的思路如下：將父元素container設為display:flex;可將container設置為彈性盒模型進行布局。2025/2/6《Web程序設計》59<body><divid="container"><divid="left">左側區域</div><divid="center">主區域</div><divid="right">右側區域</div></div></body><style>#container{width:100%;height:600px;display:flex;margin:10px;}#left,#right{width:150px;height:600px;margin:10px;background-color:#999999;}#center{flex:1;height:600px;margin:10px;/*左右margin不會疊加*/background-color:#ff0000;}</style>2025/2/6《Web程序設計》60本章結束第4章Javascript主講人：2025/2/661主要內容2025/2/6《Web程序設計》621Javascript簡介2Javascript語法3流程控制4函數5對象6文檔對象模型7事件處理本章課程目標知識目標掌握Javascript的基本語法、DOM對象以及事件處理方法；能力要求：能夠認識到解決問題有多種解決方案，并運用文獻資料檢索研究尋找可替代的方案，具備多方案比較選擇能力；能夠理解并掌握Web程序設計中的基礎知識與工作原理，將知識與原理應用于開發過程中的問題分析；2025/2/6《Web程序設計》634.1Javascript簡介Javascript是一種動態類型、弱類型、基于原型的腳本語言。是一種解釋性腳本語言，代碼不進行預編譯而直接執行。JavaScript也有自己的基本語法、數據類型、運算符和流程控制語句。它的解釋器通常被稱為JavaScript引擎。JavaScript與Java語言在命名上有些相似，但與Java不是同一公司的產品，它是Netscape（網景）公司為擴充NetscapeNavigator瀏覽器的功能而開發的一種可以嵌入Web網頁的編程語言，前身叫LiveScript。2025/2/6《Web程序設計》64JavaScript腳本語言具有以下特點：

腳本語言。JavaScript是一種解釋型的腳本語言,不需要編譯，它是在程序的運行過程中逐行進行解釋的。

基于對象。JavaScript是一種基于對象的腳本語言,它不僅可以創建對象,也能使用現有的對象。

弱數據類型。JavaScript腳本語言中采用的是弱類型的變量類型。動態性。JavaScript是一種采用事件驅動的腳本語言，它可以在瀏覽器端不需要經過Web服務器直接對用戶的輸入做出響應。跨平臺性。JavaScript腳本語言僅需要瀏覽器的支持，不依賴于操作系統。2025/2/6《Web程序設計》65主要內容2025/2/6《Web程序設計》661Javascript簡介2Javascript語法3流程控制4函數5對象6文檔對象模型7事件處理語法Javascript代碼一般嵌入到網頁中的<script></script>標簽之內，或保存一個單獨的js文件中。2025/2/6《Web程序設計》67<scripttype=”text/javascript”>vari,sum=0;for(i=0;i<=100;i++){sum+=i;}window.alert(‘總和為：’+sum);</script>JavaScript在編寫時，仍需注意以下事項：JavaScript區分大小寫。例如，變量Number與變量number是兩個不同的變量。Javascript中變量是弱類型的，因此在定義變量的時，只使用關鍵字var就可以將變量初始化任意的值。JavaScript可以使用雙斜線“//”開頭的單行注釋，也可以使用“/*”開頭，以“*/”結尾的多行注釋。JavaScript的變量名不能是系統的保留字（或關鍵字，如var、for、null等）數據類型Javascript雖然是弱數據類型，但仍然有數據類型及其運算規則。Javascript有6種數據類型，它們分別是：int（整型）float（浮點型）string（字符串類型）boolean（布爾型）object（對象類型）null（空類型）undefined（未定義類型）其中int型和float型為數值型。2025/2/6《Web程序設計》68字符串類型字符串是用雙引號（“”）或單引號（‘’）作為分界符的，字符的個數為字符串的長度。單雙引號也可嵌套使用。例如，“He’sakindman！”轉義字符用反斜杠“\”開頭2025/2/6《Web程序設計》69轉義字符含義轉義字符含義\b退格\t表示TAB符號\f換頁\'單引號\n換行\"雙引號\r回車\\反斜杠空類型與未定義類型空類型的值就是null，表示空值，這種空值通常是人為賦予的，例如在初始化時將該變量設置為null。未定義類型即undefined，指變量被聲明，但未給該變量賦值。undefined與null不同的是，undefined是變量聲明后自動具有的值，null是人為賦值的。2025/2/6《Web程序設計》70變量JavaScript中變量的命名規則如下：

必須以字母或下劃線開頭

變量名不能包含空格、加號或減號等一些特殊符號

不能使用JavaScript中的關鍵字JavaScript變量名是嚴格區分大小寫的。例如，Nchu與nchu表示兩個不同的變量在JavaScript中，使用變量之前可以先聲明變量，所有的變量都由關鍵字var聲明。2025/2/6《Web程序設計》71vara,b,c;//同時聲明a，b，c三個變量由于JavaScript采用弱類型的形式，所以在定義時可以不管變量的數據類型，把任意類型的數據賦值給變量，JavaScript將根據實際的值來確定變量的類型。例如：2025/2/6《Web程序設計》72varnumber=100;//數值數據類型varstr=“南昌航空大學”;//字符串類型varstatus=true;//布爾類型number=false;//修改number中的值為布爾類型主要內容2025/2/6《Web程序設計》731Javascript簡介2Javascript語法3流程控制4函數5對象6文檔對象模型7事件處理一個最簡單的程序是由若干條語句構成的，程序按語句位置的先后次序，逐條按順序執行，這種程序被稱為順序結構。除了順序結構外，還有用于判斷和重復執行的控制流程，分別稱為選擇和循環結構，這三種結構都是用來控制程序執行的流程。Javascript與C、Java等語言類似，也提供了相同的流程控制語句。2025/2/6《Web程序設計》74if語句2025/2/6《Web程序設計》75<html><head><metacharset="UTF-8"><title>if語句的簡單應用</title></head><body><script>vardate=newDate();varhour=date.getHours();if(hour>=6&&hour<8)alert("當前時間為："+date.toLocaleString()+""+"早上好！");if(hour>=8&&hour<12)alert("當前時間為："+date.toLocaleString()+""+"上午好！");if(hour>=12&&hour<18)alert("當前時間為："+date.toLocaleString()+""+"下午好！");if(hour>=18&&hour<23)alert("當前時間為："+date.toLocaleString()+""+"晚上好！");if(hour>=23&&hour<=24||hour>0&&hour<6)alert("當前時間為："+date.toLocaleString()+""+"夜深了，休息吧");</script></body></html>循環whiledo-whilefor2025/2/6《Web程序設計》76<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>while語句的應用</title><script>//求1+2+3+...+100的和varnum=1,sum=0;while(num<=100){sum=sum+num;num++;}document.write("1+2+3+...+100的和為："+sum);</script></head><body></body></html>主要內容2025/2/6《Web程序設計》771Javascript簡介2Javascript語法3流程控制4函數5對象6文檔對象模型7事件處理模塊化在解決復雜的問題時或較大的程序一般分為若干個較小的程序模塊，每一個模塊實現特定的功能。在Javascript語言中，每一個模塊就是一個函數。有時將常用的模塊編寫成函數，然后可以在程序中需要的地方重復調用，以增強代碼的重用性，提高代碼的可維護性。2025/2/6《Web程序設計》78模塊模塊模塊模塊模塊模塊函數定義參數說明如下：

函數名：函數的名稱，命名規范與變量名一致，不能與系統保留字沖突；

參數1，參數2：參數的名稱，可選的，是函數的形參，這里的參數只需要名稱，不需要數據類型；

代碼塊：函數的主體，即函數中要執行的數據處理邏輯；return返回值：用于返回函數的計算結果，可選的，適用于需要返回的情形，如果不需要返回，則可省略。2025/2/6《Web程序設計》79function函數名（[參數1，參數2，…]）{代碼塊;[return返回值;]}<body><script>functiongetToday()//定義函數{vartoday=newDate();returntoday.toLocaleString();}</script><h3>今天是：<span><scripttype=”text/javascript”>document.write(getToday());//調用函數</script></span></h3></body>函數參數參數是函數向內部傳遞數據的通道。在函數定義的時候確定的參數稱為形式參數（形參），而真正的參數值（稱為實際參數，簡稱實參）是在調用該函數時，由調用方傳遞給所定義的函數，從而實現調用函數向被調用函數的數據傳遞。Javascript的函數參數不需要指定參數的類型，這是因為變量類型默認是自動識別的。2025/2/6《Web程序設計》80functionmyFunc(x,y){//判斷y是否傳入實際值if(y===undefined){y=0;......}}調用時，如果沒有給y傳入值，則y的值默認為0。這句代碼也可直接寫為“y=y||0”//EMCAScript6//支持默認參數functionmyFunc(x,y=0){......}JavaScript函數有個內置的對象arguments對象，包含了函數調用的參數數組。2025/2/6《Web程序設計》81functionsumAll(){vari,sum=0;for(i=0;i<arguments.length;i++){sum+=arguments[i];}returnsum;}......x=sumAll(1,123,500,115,44,88);主要內容2025/2/6《Web程序設計》821Javascript簡介2Javascript語法3流程控制4函數5對象6文檔對象模型7事件處理基于對象（Object-based）Javascript語言是基于對象（Object-based）的程序設計語言，采用的是對象、事件驅動的編程機制。與Java類似的是，Javascript中的對象也具有一定的屬性和方法，可以根據需要進行聲明。但在類的聲明與實例時，與Java有較大的區別。2025/2/6《Web程序設計》83對象的定義Javascript對象是一種復合值：它將很多值（原始值或者其他對象）聚合在一起，可通過名字訪問這些值。對象也可看做是屬性的無序集合，每個屬性都是一個名/值對。2025/2/6《Web程序設計》84var對象名={屬性名：值,屬性名：值,......}對象名：要定義的對象名稱；屬性名：對象中的屬性名稱；值：為該屬性設置的值。定義時屬性名和值通常成對出現，也稱為“屬性-值”對，多個“屬性-值”對之間用逗號分隔。varperson={firstName:"John",lastName:"Doe",age:50,eyeColor:"blue"};對象方法的定義Javascript中對象方法是通過函數的定義方式實現的，也可以將其看作是一個屬性，這個屬性是一個函數。2025/2/6《Web程序設計》85var對象名={/*屬性列表*/....../*方法列表*/

函數名:function(){

函數體;},......};對象名：聲明的對象名稱；函數名：聲明的函數名稱，是對象的成員函數；函數體：函數的具體實現邏輯代碼。varperson={fullName:“John”,lastName:“Doe”,showFullName:function(){returnfullName+lastName;}}內置對象JavaScript腳本語言提供了一些內置對象，這些內置對象通常是一些工具對象，利用這些對象以及提供的方法可以輔助完成特定的功能。常用的內置對象主要包括：Date對象String對象Math對象Array對象......2025/2/6《Web程序設計》86Date對象屬性/方法說

明getDate()獲取當前的日期getYear()獲取當前的年份（2000年以前返回年份數后兩位，2000年以后返回后四位）getFullYear()返回以4位整數表示的年份數getMonth()獲取當前的月份getDay()獲取當周的第幾天，即星期幾getHours()獲取當前的小時getMinutes()獲取當前的分鐘getSeconds()獲取當前的秒setDate()設置當前的日期setYear()設置當前的年份setMonth()設置當前的月份setHours()設置當前的小時setMinutes()設置當前的分鐘setSeconds()設置當前的秒setTime()設置當前的時間（單位是毫秒）toLocaleString()以本地時區格式顯示，并以字符串表示2025/2/6《Web程序設計》87String對象屬性/方法說

明length求字符串的長度charAt(下標)字符對象指定位置的字符indexOf(目標字符串)目標字符串在字串對象中首次出現的位置lastIndexOf(目標字符串)目標字符串在字串對象中最后一次出現的位置substr(開始位置[,長度])截取子串substring(索引值I,索引值j)截取從索引值i到j-1的字串split(分隔符)把字符串按分隔符拆成字符串數組replace(被代替的字符串,新字符串)用新的字符串代替舊的字符串toLowerCase()變為小寫字母toUpperCase()變為大寫字母toString()獲取String對象的字符串值2025/2/6《Web程序設計》88Math對象屬性/方法說

明abs(x)返回x的絕對值max(x,y)返回兩數間的較大值exp(x)返回x的e次方log(x)返回以e為底的對數值pow(x,y)返回x的y次方sqrt(x)返回x的平方根random()返回0和1之間的一個隨機數round(x)返回x四舍五入后的整數sin(x)、cos(x)、tan(x)分別返回x的正弦、余弦、正切值asin(x)、acos(x)、atan(x)分別返回x的反正弦、反余弦、反正切值2025/2/6《Web程序設計》89Array對象Array對象是Javascript中一個特殊的對象，專門用于數組的聲明。2025/2/6《Web程序設計》90對

象屬性/方法說

明Arraypush(元素1，元素2，…)添加元素，返回數組的長度reverse()倒序數組<head><metacharset="UTF-8"><title>Array對象應用示例</title></head><body><script>varapple="蘋果",banana="香蕉",orange="橘子";vararray=newArray();array.push(apple,banana,orange);document.write("數組為："+array+"<br/>");varreverse_array=array.reverse();document.write("倒序數組為："+reverse_array);</script></body>瀏覽器對象瀏覽器對象也稱為瀏覽器內置對象（BrowserObjectModel），這些內置對象是瀏覽器自身已定義好的，可以直接使用。BOM可實現功能主要有：彈出新的瀏覽器窗口，移動、關閉瀏覽器窗口以及調整窗口的大小，頁面的前進、后退等。因此，瀏覽器對象主要有：window,location,history等。2025/2/6《Web程序設計》91window對象window對象表示一個瀏覽器窗口或一個框架。在該對象結構圖中，窗口對象window是所有對象中的最高層對象。window對象會在<body>或<frameset>出現時自動創建。window對象是一個全局對象，在同一個窗口訪問其他對象時，可以省略2025/2/6《Web程序設計》92方法描述alert(信息字串)顯示帶消息和“確定”按鈕的對話框confirm(確認信息字串)確認對話框，有“確認”和“取消”兩個按鈕，單擊“確認”返回true，單擊“取消”返回falseprompt(提示字串,[默認值])提示輸入信息對話框，返回用戶輸入信息open(URL,窗口名稱[,窗口規格])打開新窗口scroll(x坐標,y坐標)窗口滾動到指定坐標位置setTimeout(函數,毫秒)指定毫秒時間后調用函數setInterval(函數,毫秒)每隔指定毫秒時間調用一次函數clearTimeout(定時器對象)清除以setTimeout定義的定時程序clearInterval(定時器對象)清除以setInterval定義的定時程序close()關閉當前瀏覽器窗口stop()停止加載網頁moveTo(x坐標,y坐標)將窗口移動到設置的位置moveBy(水平像素值,垂直像素值)按設置的值相對地移動窗口resizeTo(寬度像素值,高度像素值)按指定的寬度和高度調整窗口resizeBy(寬度像素值,高度像素值)按指定的值相對的調整窗口大小2025/2/693屬性描述document提供窗口的文檔對象只讀引用location包含有關當前URL的信息navigator提供窗口的瀏覽器對象引用history提供窗口的歷史對象只讀引用defaultStatus設置狀態欄的默認信息status設置狀態欄的臨時信息screen提供窗口的屏幕對象引用frames提供窗口的框架對象引用name設置或返回存放窗口的名稱event提供窗口的事件對象引用self返回對當前窗口的引用top返回最頂層的先輩窗口parent返回父窗口window對象使用示例(alert方法)2025/2/6《Web程序設計》94<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>警告對話框的應用</title><script>functioncheckPasswod(object){if(object.value.length<6)alert("密碼長度不得小于6位"); }</script></head><body>//當失去焦點時發生密碼：<inputtype="password"onblur="checkPasswod(this)"/></body></html>window對象使用示例(confirm方法)2025/2/6《Web程序設計》95<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><script>functionConfirm(){if(confirm("確認刪除嗎？"))alert("已刪除");elsealert("您取消了刪除");}</script></head><body><inputtype="button"value="刪除"onclick="Confirm()"/></body></html>定時器應用示例2025/2/6《Web程序設計》96<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><script>functionshowtime(){document.getElementById("mytime").innerText=newDate().toLocaleString();}//每隔一秒種調用一次showtime()函數setInterval("showtime()",1000);</script></head><body><spanid="mytime"></span></body></html>location對象location對象是window對象的子對象，是瀏覽器內置的一個靜態對象，它包含有關當前URL（統一資源定位符）信息。2025/2/6《Web程序設計》97屬性/方法描述href設置或返回完整的URLhost設置或返回URL的主機名和端口號hostname設置或返回URL的主機名port設置或返回URL的端口號pathname設置或返回URL的路徑部分protocol設置或返回URL的協議search設置或返回從“？”開始的URL部分（查詢部分）hash設置或返回從“#”開始的URL部（錨）reload()重新加載當前網頁replace(url)用url指定的網址代替當前的網頁assign(url)用url指定的網址加載新的網頁主要內容2025/2/6《Web程序設計》981Javascript簡介2Javascript語法3流程控制4函數5對象6文檔對象模型7事件處理DOM（DocumentObjectModel，文檔對象模型），是中立于平臺和語言的接口，它允許程序和腳本動態地訪問、更新文檔的內容、結構和樣式。當網頁被加載時，瀏覽器會創建頁面的文檔對象模型。HTMLDOM模型被結構化為對象樹如圖所示。2025/2/6《Web程序設計》99DOM用途通過這個對象模型，JavaScript可以完成以下內容：JavaScript能改變頁面中的所有HTML元素JavaScript能改變頁面中的所有HTML屬性JavaScript能改變頁面中的所有CSS

溫馨提示

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

評論

0/150

提交評論