HTML CSS DIV網(wǎng)頁設計與布局（第3版）（微課版）-教案 第15章 網(wǎng)頁布局綜合案例BABY HOUSING網(wǎng)上商店_第1頁
HTML CSS DIV網(wǎng)頁設計與布局（第3版）（微課版）-教案 第15章 網(wǎng)頁布局綜合案例BABY HOUSING網(wǎng)上商店_第2頁
HTML CSS DIV網(wǎng)頁設計與布局（第3版）（微課版）-教案 第15章 網(wǎng)頁布局綜合案例BABY HOUSING網(wǎng)上商店_第3頁
HTML CSS DIV網(wǎng)頁設計與布局（第3版）（微課版）-教案 第15章 網(wǎng)頁布局綜合案例BABY HOUSING網(wǎng)上商店_第4頁
HTML CSS DIV網(wǎng)頁設計與布局（第3版）（微課版）-教案 第15章 網(wǎng)頁布局綜合案例BABY HOUSING網(wǎng)上商店_第5頁
已閱讀5頁，還剩14頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

網(wǎng)頁設計與制作授課教案學年第學期學院（部）專業(yè)（學部）課程名稱電子商務網(wǎng)頁設計與制作任課教師課內形式理論教學□課內實踐□理實一體習題復習□考核評價□其他活動□學習量安排課內：課外形式調查分析小組研討□實踐任務理論探究□考核評價□匯報展示□其他活動課外：序號11授課日期月日月日月日月日授課班級課內教學內容：第13章綜合實訓：開發(fā)視頻網(wǎng)頁課外學習任務：（1）課前：以小組為單位，討論網(wǎng)上商店的設計，交互方式等相關知識，通過查詢了解當前流行的網(wǎng)上商店網(wǎng)頁布局風格并以PPT的形式記錄下來。教學目標：知識目標掌握HTM+CSS布局。掌握JavaScript語言滾動事件。能力目標能夠獨立實現(xiàn)網(wǎng)上商店的靜態(tài)布局；能夠獨立實現(xiàn)網(wǎng)上商店的各項動態(tài)交互效果。素質目標較強的專業(yè)知識和自學能力；豐富知識結構，提升專業(yè)知識；掌握HTML+CSS+JavaScript動態(tài)網(wǎng)頁編寫技能，理解并應用專業(yè)知識。重點難點及解決方法：（1）重點：網(wǎng)上商店靜態(tài)網(wǎng)頁布局解決方法：通過知識點講解+課堂在線展示相結合的方法，教師講解通過HTML+CSS實現(xiàn)網(wǎng)上商店布局，引導學生積極思考，掌握相應知識；同時通過課堂在線展示，使學生可以更直觀的了解網(wǎng)頁編寫過程中可能遇到的問題以及解決方法；培養(yǎng)學生的思維能力和分析問題解決問題的能力。（2）難點：網(wǎng)上商店的動態(tài)交互效果解決方法：通過代碼講解+在線演示的的方式教學，細致講解網(wǎng)頁中各種動態(tài)效果是如何通過JavaScript代碼實現(xiàn)的。幫助學生掌握JavaScript代碼對網(wǎng)頁動態(tài)交互效果的實現(xiàn)方法和技巧。從實用的角度幫助學生提高專業(yè)知識。課內教學授課地點：教學媒體：微課、PPT課件、網(wǎng)頁圖片、相關教學視頻等。設備及材料：多媒體計算機、多媒體教學廣播軟件、網(wǎng)頁素材圖片、教學載體源文件等。其它資源：與本次課相關的專業(yè)技術論文電子版。學習效果評價方式：對理論知識學習效果評價：采用課堂提問、課后習題和查閱技術論文研讀筆記的方式；對技能的評價：教師對學生上交網(wǎng)頁作品按制作要求進行綜合性評價；對職業(yè)素養(yǎng)的評價：采用學生自評、小組內評價和教師評價相結合的方式。課后小結：填表說明：1.序號，指該課程授課的順序號，應與授課計劃一致；2.授課形式在相應的選項打“√”。課內教學內容及過程時間分配方法及手段1.案例分析BABYHOUSING網(wǎng)站首頁在垂直方向分為上、中、下3部分。其中，上、下兩部分的背景會自動延伸；中間的內容區(qū)域分為左、右兩列，左欄為主要內容，右欄由若干圓角框構成。網(wǎng)站首頁效果如圖15.1所示。圖15.1網(wǎng)站首頁效果此外，這個頁面具有很好的交互提示功能。例如，頁頭部分的導航菜單具有鼠標指針經(jīng)過時發(fā)生變化的效果，如圖15.2所示。圖15.2具有鼠標指針經(jīng)過時效果的導航菜單2.內容分析在設計網(wǎng)頁之前，首先要明確網(wǎng)站的內容，即通過網(wǎng)頁要傳達給訪問者什么信息，這些信息中哪些是最重要的、哪些是相對重要的，以及這些信息應該如何組織?，F(xiàn)以BABYHOUSING網(wǎng)上商店的首頁為例進行說明。首先，要有明確的網(wǎng)站名稱和標志。此外，要給訪問者方便地了解網(wǎng)站所有者自身信息的途徑，包括指向關于我們、聯(lián)系方式等內容的鏈接。接下來，網(wǎng)站的根本目的是銷售商品，因此必須有清晰的商品分類，以及合理的導航欄。網(wǎng)上商店的商品通常都是以類別組織的，首頁上通常會展示最受歡迎的和重點推薦的商品，因為首頁的訪問量明顯比其他頁面大得多，這相當于做廣告了。網(wǎng)站首頁要展示的內容大致包括以下幾種：標題、標志、主導航欄、關于我們、登錄賬號、購物車、今日推薦、最受歡迎、分類推薦、搜索商品框、商品分類、特別提示、版權信息。3.原型設計分析完網(wǎng)頁內容后，還要對網(wǎng)站的完整功能和內容進行全面分析。如果有條件，應該制作出線框圖，這個過程專業(yè)上稱為“原型設計”。例如，在具體制作網(wǎng)頁之前，就可以先設計圖15.3所示的網(wǎng)站首頁原型線框圖。網(wǎng)頁原型設計也是分步驟完成的。例如，首先要考慮把一個頁面從上至下依次分為3部分，如圖15.4所示。然后將每個部分逐漸細化，例如，頁頭部分可以細化為圖15.5所示的效果。 圖15.4首頁分成3部分的效果 圖15.5頁頭部分結構圖中間內容部分分為左、右兩欄，如圖15.6所示，再進一步細化為圖15.7所示的效果。 頁腳部分比較簡單，這里不再闡述。這時將這3部分組合起來，就形成了圖15.3所示的效果。 圖15.6中間內容部分結構圖 圖15.7對內容部分進行細化4.布局設計下面可以根據(jù)原型設計圖來設計網(wǎng)頁。先設計整體樣式，然后設計頁頭部分、中間內容部分和頁腳部分?！菊w樣式設計】首先對整個頁面進行整體設計，以下是根據(jù)圖15.3編寫的頁面基本結構代碼。代碼分為3部分：頁頭部分、中間內容部分和頁腳部分，每部分用一個div元素劃分。<body><divclass="header"> <!--頁頭部分-->頁頭內容</div><divclass="content"> <!--中間內容部分-->詳細內容</div><divclass="footer"> <!--頁腳部分-->頁腳內容</div></body>然后使用CSS設置整個頁面的共有屬性。例如，對font、margin、padding等屬性進行初始設置，這些屬性在后面的設計中用來保證這些內容在各個瀏覽器中有相同表現(xiàn)。CSS代碼如下。body{margin:0;padding:0;background:whiteurl('images/header-background.png')repeat-x;font:12px/1.6arial;}ul{margin:0;padding:0;list-style:none;}a{text-decoration:none;color:#3D81B4;}p{text-indent:2em;}使用CSS在body中設置水平背景圖像，并使這個背景圖像在水平方向平鋪，即可產(chǎn)生寬度方向自動延伸的背景效果?！卷擃^部分】下面介紹頁頭部分的設計。根據(jù)圖15.5設定的頁頭各部分來編寫HTML代碼，代碼如下。<divclass="header"><h1><span>BABYHOUSING</span></h1> <!--網(wǎng)站名稱--><divclass="logo"><imgsrc="images/logo.gif"/></div> <!--網(wǎng)站Logo--><ulclass="mainNavigation"> <!--主導航欄--><liclass="current"><ahref="#"><strong>網(wǎng)站首頁</strong></a></li><li><ahref="#"><strong>商品介紹</strong></a></li><li><ahref="#"><strong>信息</strong></a></li><li><ahref="#"><strong>暢銷排行榜</strong></a></li></ul><ulclass="topNavigation"> <!--頂部導航--><li><ahref="#"><span>關于我們</span></a></li><li><ahref="#"><span>聯(lián)系方式</span></a></li><li><ahref="#"><span>意見建議</span></a></li><ul><ulclass="accountBox"> <!--登錄賬號與購物車--><li><ahref="#"class="login"><span>登錄賬號</span></a></li><li><ahref="#"class="cart"><span>購物車</span></a></li></ul></div>在以上代碼中進行了如下設置。將整個頁頭部分放入一個div元素中，為該div設置類別名稱為header。將網(wǎng)站Logo圖像放在一個嵌套的div元素中，為該div設置類別名稱為logo。將主導航欄、頂部導航、登錄賬號與購物車分別放在不同的ul元素中，并在li元素中定義主導航欄、頂部導航、登錄賬號與購物車的詳細內容，這里的內容都設置為超鏈接。為主導航欄的列表設置類別名稱為mainNavigation。為主導航欄的第一個項目（也就是“網(wǎng)站首頁”）設置類別名稱為current。為公司介紹的鏈接列表（也就是頂部導航）設置類別名稱為topNavigation。為登錄賬號和購物車鏈接列表設置類別名稱為accountBox。當然僅僅增加這些div和設置類別名稱還不能真正起到效果，還必須設置相應的CSS樣式。1．設置頭部樣式為整個頭部設置樣式，代碼如下。.header{position:relative;width:760px;height:138px;margin:0auto;font:15px/1.6arial;}在header部分的代碼中，將position屬性設置為relative，目的是使后面的子元素使用絕對定位時，以頁頭而不是瀏覽器窗口為定位基準。然后設置寬度、高度、水平居中對齊方式和字體樣式。2．設置h1標題樣式設置h1標題的HTML代碼如下。<h1><span>BABYHOUSING</span></h1>本網(wǎng)站的h1標題是插入了title.png圖片，并設置圖片不平鋪。將margin屬性設置為0，避免干擾其他元素的定位，CSS代碼如下。.headerh1{background:transparenturl('images/title.png')no-repeatbottomleft;height:63px;margin:0;margin-left:40px;}圖15.8h1標題效果設置完成后的效果如圖15.8所示。圖15.8h1標題效果3．設置網(wǎng)站Logo樣式設置網(wǎng)站Logo的HTML代碼如下。<divclass="logo"><imgsrc="images/logo.gif"/></div>在CSS中將Logo圖片所在的div設置為絕對定位，并設置它的位置，代碼如下。.header.logo{position:absolute;top:10px;left:0px;}圖15.9網(wǎng)站Logo效果網(wǎng)站圖15.9網(wǎng)站Logo效果4．設置頂部導航欄樣式設置頂部導航欄的HTML代碼如下。<ulclass="topNavigation"> <!--頂部導航--><li><ahref="#"><span>關于我們</span></a></li><li><ahref="#"><span>聯(lián)系方式</span></a></li><li><ahref="#"><span>意見建議</span></a></li><ul>在CSS中，將頂部導航欄的列表設置為絕對定位，右上角對齊到header的右上角，代碼如下。.header.topNavigation{position:absolute;top:0;right:0;}將頂部導航欄的列表項目li元素設置為左浮動，且使它們水平排列，并使項目之間有一定的間隔，代碼如下。.header.topNavigationli{float:left;padding:02px;}設置頂部導航欄中的鏈接樣式a元素，代碼如下。.header.topNavigationa{display:block;line-height:25px;padding:00015px;background:transparenturl('images/top-navi-white.gif')no-repeat;}.header.topNavigationaspan{display:block;padding:015px00;background:transparenturl('images/top-navi-white.gif')no-repeatright;}上段代碼是將a元素由行內元素變?yōu)閴K級元素，設置行高的目的是使文字能在垂直方向居中顯示。將已經(jīng)設置好的圖片設置為a元素的背景圖像，這樣鏈接樣式就成了圓角的樣式。頂部導航欄設置完成的效果如圖15.10所示。圖15.10頂部導航欄效果5．設置主導航欄樣式圖15.10頂部導航欄效果設置主導航欄的HTML代碼如下。<ulclass="mainNavigation"> <!--主導航欄--><liclass="current"><ahref="#"><strong>網(wǎng)站首頁</strong></a></li><li><ahref="#"><strong>商品介紹</strong></a></li><li><ahref="#"><strong>信息</strong></a></li><li><ahref="#"><strong>暢銷排行榜</strong></a></li></ul>在CSS中使用同樣的方法，將主導航欄的列表設置為絕對定位，并定位到適當?shù)奈恢?，代碼如下。.header.mainNavigation{position:absolute;color:white;font-weight:bold;top:88px;left:0;}將主導航欄的列表項目li元素設置為左浮動，且使它們水平排列，并使項目之間有一定的間隔。代碼如下。.header.mainNavigationli{float:left;padding:5px;}對主導航欄中的a元素進行設置，其設置方法和頂部導航欄的設置方法基本一樣，代碼如下。.header.mainNavigationa{display:block;line-height:25px;text-decoration:none;padding:00015px;color:white;}.header.mainNavigationastrong{display:block;padding:015px00;}與頂部導航欄不同的是，這里希望只有當前頁的菜單項有圓角背景，其他菜單項沒有背景圖像。因此，可以針對類別名稱為current的項目進行設置，也就是設置“網(wǎng)站首頁”的樣式。這里分別設置current類別的li中的a元素和strong元素的圓角背景圖像，代碼如下。.header.mainNavigation.currenta{color:white;background:transparenturl('images/main-navi.gif')no-repeat;}.header.mainNavigation.currentastrong{color:white;background:transparenturl('images/main-navi.gif')no-repeatright;}至此，主導航欄就設置完成了，效果如圖15.11所示。圖15.11主導航欄效果圖15.11主導航欄效果設置登錄賬號與購物車的HTML代碼如下。<ulclass="accountBox"> <!--登錄賬號與購物車--><li><ahref="#"class="login"><span>登錄賬號</span></a></li><li><ahref="#"class="cart"><span>購物車</span></a></li></ul>在CSS中，將登錄賬號與購物車所在的div的列表設置為絕對定位，并放到右側的適當位置，代碼如下。.header.accountBox{position:absolute;top:44px;right:10px;}同樣地，將登錄賬號與購物車所在的div的列表項目li元素設置為左浮動，且使它們水平排列，并使項目之間有一定的間隔，代碼如下。.header.accountBoxli{float:left;top:0;right:0;width:93px;height:110px;text-align:center;}設置鏈接a元素。設置鏈接的display屬性值為block，即將鏈接由行內元素變?yōu)閴K級元素，以使鼠標指針進入圖像范圍即可觸發(fā)鏈接，代碼如下。.header.accountBoxa{display:block;height:110px;width:93px;}最后分別設置登錄賬號和購物車各自的背景圖像，代碼如下。.header.accountBox.login{background:transparenturl('images/account-left.jpg')no-repeat;}.header.accountBox.cart{background:transparenturl('images/account-right.jpg')no-repeat;}登錄賬號與購物車效果如圖15.12所示。至此，網(wǎng)頁頁頭部分設計完成，頁頭部分整體效果如圖15.13所示。 圖15.12登錄賬號與購物車效果 圖15.13頁頭部分整體效果【中間內容部分】下面開始設計網(wǎng)頁的中間內容部分。根據(jù)15.6，將中間內容部分分為“主要內容”和“側邊欄”兩部分，每部分用div元素進行劃分，然后在每個div元素中分別設置里面的詳細內容。1．主要內容（1）HTML設置部分在“今日推薦”中，首先使用<h2></h2>標簽設置標題，然后設置一個圖片鏈接，最后使用p元素來顯示“今日推薦”的文本內容。設置“今日推薦”的HTML代碼如下。<divclass="mainContent"><divclass="recommendationimg-left"><h2>今日推薦</h2><ahref="#"><imgid="binner1"src="images/ex4.jpg"width="210"height="150"/></a><p>環(huán)保印花件套，采用超柔和進口面料，手感極其柔軟、舒適。采用高支高密精梳純棉織物作為面料，手感柔軟舒適，經(jīng)久耐用，多款圖案風格能夠與不同家居設計完美搭配。</p><p></p></div></div>“最受歡迎”和“分類推薦”的設置方法與“今日推薦”的設置方法一樣，設置“最受歡迎”和“分類推薦”的HTML代碼如下所示。<divclass="recommendation"><h2>最受歡迎</h2><divclass="img-right"><ahref="#"><imgsrc="images/ex5.jpg"width="210"height="150"/></a></div><p>九孔棉冬被選用優(yōu)質滌綸面料，手感柔軟、花型獨特，填充料采用高科技的聚酯螺旋纖維精制而成，該纖維細如發(fā)，彈性極強，且飽含空氣，恒溫性強，使您倍感輕軟舒適。經(jīng)特殊工藝加工后，長期保持松軟如新，為您提供健康舒適的睡眠體驗。</p></div><divclass="recommendationmultiColumn"><h2>分類推薦</h2><ul><p>休閑款式，柔軟富有彈性。舒服自然，飄逸聰穎。</p></li><p>小兔子披肩，柔軟富有彈性。舒服自然，飄逸聰穎。</p></li><li><ahref="#"><imgsrc="images/ex3.jpg"width="120"height="120"/></a><p>精梳棉材質，不起球、不變形、更透氣。</p></li></ul></div>至此，“主要內容”的HTML設置就完成了。（2）CSS樣式設置部分接下來設置“主要內容”部分的CSS樣式。首先設置“主要內容”的寬度并設置圖像為左浮動，代碼如下。.mainContent{float:left;width:540px;}然后為“主要內容”中展示的圖像設置邊框樣式，這樣可以使圖像看起來更精致，代碼如下。.contentaimg{padding:5px;background:#BDD6E8;border:1px#DEAF50solid;}這時，“主要內容”部分中的圖像增加了一個邊框，如圖15.14所示。圖15.14給圖像設置邊框接著，設置“今日推薦”的樣式?？梢钥闯觯敖袢胀扑]”中的圖像是在文本的左邊。這里要使圖像向左浮動，并使圖像與文本間隔10px，代碼如下。.img-leftimg{float:left;margin-right:10px;}再設置“最受歡迎”的樣式。要使圖像向右浮動，并使圖像與文本間隔10px，代碼如下。.img-right{float:right;margin-left:10px;}設置“分類推薦”的樣式是先將其分為3列的欄目，并設置每個列表項目的固定高度，然后設置使用浮動方式排列，代碼如下。.multiColumnli{float:left;width:160px;margin:010px;text-align:center;}接下來，對“主要內容”中的<h2></h2>中標題樣式做一些CSS樣式設置，使其效果更精致。本例設置了標題的字體、顏色、下畫線，以及在標題的最右端插入一個裝飾花的圖片，代碼如下。.recommendationh2{padding-top:20px;color:#069;border-bottom:1px#DEAF50solid;font:bold22px/24px楷體_GB2312;background:transparenturl('images/rose.png')no-repeatbottomright;}至此，“主要內容”設計完成，效果如圖15.15所示。2．側邊欄設計中間內容部分的“側邊欄”，仍然使用div元素將“側邊欄”部分劃分為“搜索商品框”“商品分類”“特別提示”3部分。（1）HTML設置部分在“搜索商品框”部分，插入一個表單form元素，然后在form元素中添加一個文本框和一個顯示“查詢商品”的按鈕，用以搜索商品?！八阉魃唐房颉辈糠值腍TML代碼如下。<divclass="searchBox"><span><form><inputname=""type="text"/><inputname=""type="submit"value="查詢商品"/></form></span></div>在“商品分類”部分，插入一個表示標題的h2元素和一個顯示“商品分類”內容的ul元素。“商品分類”部分的HTML代碼如下。<divclass="menuBox"><span><h2>商品分類</h2><ul><li><ahref="#">新生兒必備</a></li><li><ahref="#">喂養(yǎng)用品</a></li><li><ahref="#">嬰兒車</a></li><li><ahref="#">玩具</a></li><li><ahref="#">育兒書籍</a></li><li><ahref="#">嬰幼兒食品</a></li></ul></span></div>在“特別提示”部分，插入一個表示標題的h2元素和一個顯示“特別提示”內容的p元素?！疤貏e提示”部分的HTML代碼如下。<divclass="extraBox"><span><h2>特別提示</h2><p>新品每周三8.8折優(yōu)惠，兩件8.5折優(yōu)惠</p></span></div>（2）CSS樣式設置部分下面設置“側邊欄”的CSS樣式。首先設置“側邊欄”的整體樣式，代碼如下。.sideBar{float:right;width:186px;margin-right:10px;margin-top:20px;display:inline;/*IE6瀏覽器不兼容*/}.sideBardiv{margin-top:20px;background:transparenturl('images/sidebox-bottom.png')no-repeatbottom;width:100%;}.sideBardivspan{display:block;background:transparenturl('images/sidebox-top.png')no-repeat;padding:10px;}上面的代碼其實很簡單，就是為div元素和span元素分別設置一個背景元素。這里div元素使用的是高的背景圖像，span元素使用的是矮的背景圖像，因為span元素在div元素中，所以span元素的背景圖像div元素的背景圖像上，它遮蓋住了頂部，從而實現(xiàn)圓角框的效果，如圖15.16所示。接下來，具體設置圓角框中的樣式。（1）對“側邊欄”中的<h2></h2>中標題進行統(tǒng)一設置，包括邊距、字體、顏色和居中顯示，CSS代碼如下。.sideBarh2{margin:0px;font:bold22px/24px楷體_GB2312;color:#069;text-align:center;}（2）設置“搜索商品框”的樣式，使文本輸入框和按鈕都居中對齊，并設置間距，代碼如下。.sideBar.searchBox{text-align:center;}.sideBarinput{margin:5px0;}（3）設置“商品分類”的列表樣式，包括列表的字體、高度、各行高和上邊框的樣式，然后設置列表中鏈接a元素的樣式，在每個鏈接前面插入一張蝴蝶形狀的裝飾圖，代碼如下。.sideBar.menuBoxlia{display:block;padding-left:35px;background:transparenturl('images/menu-bullet.png')no-repeat10pxcenter;height:25px;}至此，“側邊欄”設計完成，效果如圖15.17所示。 圖15.16“側邊欄”設置圓角框后的效果 圖15.17“側邊欄”設計效果【頁腳部分】頁腳部分的設置非常簡單，就是在div元素中添加兩個p元素，用以顯示鏈接和版權信息。頁腳部分的HTML代碼如下。<divclass="footer"><pclass="p1"><ahref="#">網(wǎng)站首頁</a>|<ahref="#">商品介紹</a>|<ahref="#">信息</a>|<ahref="#">暢銷排行榜</a></p><pclass="p2">版權屬于前沿科技</p></div>頁腳部分的CSS樣式設計也非常簡單。在頁腳部分插入一張背景圖像，設置頁腳部分的文字顏色為白色，并設置行高和邊距，CSS代碼如下。.footer{clear:both;height:53px;margin:0;background:transparenturl('images/footer-background.png')repeat-x;text-indent:0px;text-align:center;}.footerp{margin:0px;}.footera{color:white;}.footer.p1{line-height:23px;}.footer.p2{line-height:30px;}上面代碼中的clear屬性用來保證頁腳內容在頁面的最下端顯示。頁腳部分的設計效果如圖15.18所示。圖15.18頁腳部分的設計效果至此，整個網(wǎng)站首頁的視覺設計就完成了，效果如圖15.1所示。在網(wǎng)站首頁制作過程中，讀者可以發(fā)現(xiàn)反復運用了一些元素，如列表、超鏈接等，只是它們在不同的地方產(chǎn)生了不同的效果。因此，建議讀者一定要熟練掌握一些基本的方法，這樣才能將其靈活運用在各個需要的地方。5.交互效果設計本節(jié)進行一些交互效果的設計，主要是為網(wǎng)頁元素增加鼠標指針經(jīng)過時的效果。當鼠標指針經(jīng)過主導航欄、頂部導航欄、登錄賬號與購物車圖像時，會有不同的效果。這一設計效果是為了提示用戶所進行的選擇，以提升用戶體驗?！卷敳繉Ш綑凇繛轫敳繉Ш綑谠黾邮髽酥羔樈?jīng)過時的效果，首先準備一個與原有背景圖像的形狀相同，但是顏色不同的新圖像top-navi-hover.gif，如圖15.19所示。為頂部導航欄中的鏈接元素增加“:hover”偽類，在其中更換背景圖像，同時更換“:hover”包含的span元素的背景圖像，并適當修改文字的顏色，代碼如下。.header.topNavigationa:hover{color:white;background:transparenturl('images/top-navi-hover.gif')no-repeat;}.header.topNavigationa:hoverspan{background:transparenturl('images/top-navi-hover.gif')no-repeatright;}設置完成后，鼠標指針經(jīng)過頂部導航欄時的效果如圖15.20所示?！局鲗Ш綑凇恐鲗Ш綑诘脑O置方法與頂部導航欄的設置方法一樣，準備背景圖像main-navi-hover.gif，如圖15.21所示。為主導航欄中的鏈接元素增加“:hover”偽類，在其中更換背景圖像，同時更換“:hover”包含的span元素的背景圖像，并適當修改文字的顏色，代碼如下。.header.mainNavigationa:hover{color:white;background:transparenturl('images/main-navi-hover.gif')no-repeat;}.header.mainNavigationa:hoverstrong{background:transparenturl('images/main-navi-hover.gif')no-repeatright;color:#3D81B4;}設置完成后，鼠標指針經(jīng)過主導航欄時的效果如圖15.22所示。 【登錄賬號和購物車】本小節(jié)實現(xiàn)“登錄賬號”和“購物車”圖像的鼠標指針經(jīng)過時的效果。實際上，這里同樣是更換背景圖像，不過會介紹一種略有變化的方法。這種方法就是把鼠標指針經(jīng)過前和鼠標指針經(jīng)過時的兩張圖片用同一張圖片表示，只是在鼠標指針經(jīng)過時，通過改變背景圖像的位置來實現(xiàn)交互效果。例如，將原來的圖片分別修改為圖15.23所示的樣子。每一張圖像的上半部分和下半部分完全一樣，區(qū)別就在于下半部分的顏色比上半部分淺一些。這樣，當鼠標指針沒有經(jīng)過時顯示的是上半部分，當鼠標指針經(jīng)過時更換為顯示下半部分。分別對兩個鏈接元素的“:hover”偽類進行如下設置。.header.accountBox.login:hover{}.header.accountBox.cart:hover{}從上面代碼可以看到，圖像文件名和鼠標指針未經(jīng)過時的文件名是一樣的，而區(qū)別是最后的bottom。bottom表示從底端開始顯示，而在默認情況下是從上端開始顯示的，這樣就實現(xiàn)了所需要的效果，如圖15.23所示。購物車部分的設置與登錄賬號部分的設置類似，這里不再詳述?！緢D像邊框】接下來實現(xiàn)鼠標指針經(jīng)過某個展示的圖片時，邊框發(fā)生變化的效果，如圖15.24所示。以看到，鼠標指針經(jīng)過“最受歡迎”商品圖片時，圖像的邊框顏色發(fā)生了變化，由黃色變?yōu)樗{色，背景色由淺藍色變?yōu)樯钏{色。要實現(xiàn)這種效果，對推薦區(qū)域中鏈接的“:hover”偽類進行如下設置即可。.contenta:hoverimg{padding:5px;background:#3D81B4;border:1px#3D81B4solid;}【商品分類】本小節(jié)實現(xiàn)“側邊欄”中“商品分類”列表的鼠標指針經(jīng)過時的效果，如圖15.25所示。實現(xiàn)圖15.25所示效果的代碼如下。.sideBar.menuBoxlia{display:block;padding-left:35px;background:transparenturl('images/menu-bullet.png')no-repeat10pxcenter;height:25px;}.sideBar.menuBoxlia:hover{display:block;color:#069;background:whiteurl('images/menu-bullet.png')no-repeat10pxcenter;}6.Banner自動輪播效果本節(jié)將通過JavaScript語言實現(xiàn)Banner的自動輪播效果，以及使用鼠標控制Banner停止輪播和繼續(xù)輪播的效果。當打開網(wǎng)頁之后，“今日推薦”中的Banner會自動輪播5張圖片。例如，輪播到第2張圖片時的效果如圖15.26所示。當鼠標指針移動

溫馨提示

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

最新文檔

評論

0/150

提交評論