《HTML+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)教程》課件-7. 第五章 網(wǎng)頁(yè)設(shè)計(jì)綜合案例_第1頁(yè)
《HTML+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)教程》課件-7. 第五章 網(wǎng)頁(yè)設(shè)計(jì)綜合案例_第2頁(yè)
《HTML+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)教程》課件-7. 第五章 網(wǎng)頁(yè)設(shè)計(jì)綜合案例_第3頁(yè)
《HTML+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)教程》課件-7. 第五章 網(wǎng)頁(yè)設(shè)計(jì)綜合案例_第4頁(yè)
《HTML+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)教程》課件-7. 第五章 網(wǎng)頁(yè)設(shè)計(jì)綜合案例_第5頁(yè)
已閱讀5頁(yè)，還剩76頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

目錄CONTENTS第一章網(wǎng)頁(yè)設(shè)計(jì)綜述第二章HTML語(yǔ)言第三章CSS第四章JavaScript第五章網(wǎng)頁(yè)設(shè)計(jì)綜合案例05網(wǎng)頁(yè)設(shè)計(jì)綜合案例目錄5.1網(wǎng)站介紹及定位5.2準(zhǔn)備工作5.3網(wǎng)頁(yè)布局分析5.4網(wǎng)頁(yè)頭部分析與實(shí)現(xiàn)5.5導(dǎo)航部分分析與實(shí)現(xiàn)5.6廣告部分分析與實(shí)現(xiàn)5.7主體部分的分析與實(shí)現(xiàn)騰訊網(wǎng)（）作為門(mén)戶網(wǎng)站，從2003年創(chuàng)立至今，已經(jīng)成為集新聞信息，區(qū)域垂直生活服務(wù)、社會(huì)化媒體資訊和產(chǎn)品為一體的互聯(lián)網(wǎng)媒體平臺(tái)。騰訊網(wǎng)下設(shè)新聞、科技、財(cái)經(jīng)、娛樂(lè)、體育、汽車(chē)、時(shí)尚等多個(gè)頻道，充分滿足用戶對(duì)不同類(lèi)型資訊的需求。同時(shí)專(zhuān)注不同領(lǐng)域內(nèi)容，打造精品欄目，并順應(yīng)技術(shù)發(fā)展趨勢(shì)，推出網(wǎng)絡(luò)直播等創(chuàng)新形式，改變了用戶獲取資訊的方式和習(xí)慣。5.1網(wǎng)站介紹及定位5.2.1建立站點(diǎn)站點(diǎn)對(duì)于制作維護(hù)一個(gè)網(wǎng)站很重要，它能夠幫助我們系統(tǒng)地管理網(wǎng)站中的各類(lèi)文件，一個(gè)網(wǎng)站通常包括圖片文件、網(wǎng)頁(yè)文件、樣式文件、腳本文件、視頻文件等。建立站點(diǎn)就是創(chuàng)建一個(gè)存放網(wǎng)站文件的文件夾，并對(duì)其中的文件進(jìn)行合理的分類(lèi)和管理，可以在網(wǎng)站文件夾中創(chuàng)建文件夾對(duì)文件進(jìn)行分類(lèi)，創(chuàng)建images文件夾來(lái)管理圖片文件、創(chuàng)建css文件夾來(lái)管理樣式文件等，這樣就形成了清晰的站點(diǎn)組織結(jié)構(gòu)圖，方便增加或刪除網(wǎng)站的文件，這對(duì)于網(wǎng)站本身的上傳維護(hù)、移植等都有重要的影響5.2準(zhǔn)備工作5.2.1建立站點(diǎn)下面介紹使用webstorm講解創(chuàng)建網(wǎng)站的過(guò)程。1.創(chuàng)建項(xiàng)目網(wǎng)站根目錄，在D盤(pán)下創(chuàng)建“騰訊首頁(yè)”文件夾，作為網(wǎng)站根目錄。2.在根目錄下新建“css”、“images”、“js”文件夾，用于存放網(wǎng)站所需的css文件、圖片文件和js腳本文件。3.新建站點(diǎn)項(xiàng)目，在webstorm菜單欄中，選擇【file】-【new】-【project】選項(xiàng)，在彈出的窗口中選擇項(xiàng)目位置為E:\騰訊首頁(yè)，單擊“保存”按鈕，完成站點(diǎn)的創(chuàng)建。5.2.2素材準(zhǔn)備由于是仿作騰訊網(wǎng)站首頁(yè)，因此需要網(wǎng)站上的各類(lèi)圖片或視頻，下面介紹兩種獲取網(wǎng)站上的圖片的方法。1.使用“圖片另存為...”方法來(lái)獲取圖片2.通過(guò)網(wǎng)站源代碼分析圖片的地址獲取圖片從網(wǎng)頁(yè)的效果圖可分析出整個(gè)頁(yè)面可以分為頭部、導(dǎo)航、廣告和焦點(diǎn)輪播圖、快速鏈接、主體部分和版權(quán)信息6個(gè)模塊。采用div+css對(duì)網(wǎng)頁(yè)進(jìn)行布局設(shè)計(jì)，遵循內(nèi)容和樣式分離原則，并且使網(wǎng)站的頁(yè)面結(jié)構(gòu)更加清晰和條例。5.3網(wǎng)頁(yè)布局分析5.3.1網(wǎng)頁(yè)整體布局

<!DOCTYPEhtml><html><head><metacharset="gb2312"><title>騰訊首頁(yè)</title><metacontent="資訊,新聞,財(cái)經(jīng),房產(chǎn),視頻,NBA,科技,騰訊網(wǎng),騰訊,QQ,Tencent"name="Keywords"><linkrel="stylesheet"href="index.css"type="text/css"charset="utf-8"></head><body><divclass="layout"><!--頭部開(kāi)始--><divclass="qq-top"></div><!--頭部結(jié)束-->

<!--導(dǎo)航開(kāi)始--><divclass="qq-nav"></div><!--導(dǎo)航結(jié)束--><!--廣告開(kāi)始--><divclass="qq-gg"></div><!--廣告結(jié)束--><!--主體內(nèi)容開(kāi)始--><!--要聞開(kāi)始--><divclass="qq-main"></div><!--要聞結(jié)束--><!--主體內(nèi)容結(jié)束--></div></body></html>5.3.2標(biāo)簽頁(yè)圖標(biāo)和文字顯示當(dāng)我們打開(kāi)一個(gè)網(wǎng)站時(shí)，在網(wǎng)站的標(biāo)簽上顯示的圖標(biāo)稱(chēng)為標(biāo)簽頁(yè)圖標(biāo)。在head頭標(biāo)簽中添加如下代碼即可實(shí)現(xiàn)。<title>騰訊首頁(yè)</title><linkrel="shortcuticon"href="favicon.ico"type="image/x-icon">5.3.2標(biāo)簽頁(yè)圖標(biāo)和文字顯示一般要求標(biāo)簽頁(yè)圖標(biāo)格式是.ico格式，文件名一般命名為favicon,favicon是favoritesicon的縮寫(xiě)。對(duì)于不同的瀏覽器，要求不同，對(duì)于IE瀏覽器，要求favicon.ico文件必須放置在網(wǎng)站根目錄下，瀏覽器會(huì)自動(dòng)檢索。而對(duì)于火狐瀏覽器或谷歌瀏覽器圖標(biāo)格式?jīng)]有IE那么嚴(yán)格，GIF和PNG格式的圖標(biāo)也可以顯示，圖標(biāo)名稱(chēng)也可以不是favcion，文件位置也可以不是網(wǎng)站根目錄。5.3.2標(biāo)簽頁(yè)圖標(biāo)和文字顯示當(dāng)我們打開(kāi)一個(gè)網(wǎng)站時(shí)，在網(wǎng)站的標(biāo)簽上顯示的圖標(biāo)稱(chēng)為標(biāo)簽頁(yè)圖標(biāo)。在head頭標(biāo)簽中添加如下代碼即可實(shí)現(xiàn)。<title>騰訊首頁(yè)</title><linkrel="shortcuticon"href="favicon.ico"type="image/x-icon">5.3.3定義公共樣式為了清除瀏覽器和各個(gè)HTML元素的默認(rèn)樣式，使得網(wǎng)頁(yè)在個(gè)瀏覽器中顯示的效果一致、通常要對(duì)元素的CSS樣式進(jìn)行初始化，并聲明一些通用的樣式。/*重置瀏覽器的默認(rèn)樣式*/body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0px;padding:0px;list-style:none;}/*設(shè)置圖片樣式*/img{border:0;vertical-align:top}/*設(shè)置頁(yè)面字體大小*/body{font-size:16px}/*設(shè)置超級(jí)鏈接文字的樣式*/a{color:#333;text-decoration:none}/*設(shè)置鼠標(biāo)移至超級(jí)鏈接文字的樣式*/a:hover{color:#0c82ff}5.3.4定義頁(yè)面的大小本頁(yè)面定義頁(yè)面的初始寬度為1000px，當(dāng)屏幕寬度超過(guò)1400px時(shí)，可以進(jìn)行頁(yè)面寬度的調(diào)整，使用@media屬性完成。設(shè)置頁(yè)面寬度的CSS樣式代碼如下：/*設(shè)置頁(yè)面寬度為1000px*/.layout{width:1000px;margin:0auto}5.3.5浮動(dòng)效果實(shí)現(xiàn)本案例中為了實(shí)現(xiàn)層與層之間的布局，使用了浮動(dòng)功能，特定義兩個(gè)類(lèi)選擇器fl和fr的樣式，用于引用方便，.fl用于左浮動(dòng)，.fr用于右浮動(dòng)。.fl{ float:left;}.fr{ float:right;}5.4.1效果圖分析頭部部分由三部分組成，左邊是騰訊網(wǎng)的Logo，中間是一個(gè)文本搜索框，當(dāng)鼠標(biāo)移動(dòng)到文本框左側(cè)的時(shí)候，會(huì)顯示一個(gè)下拉列表，鼠標(biāo)點(diǎn)擊列表選項(xiàng)后所點(diǎn)擊的文字會(huì)更新到文本框左側(cè)。顯示效果如圖5-11所示。右邊是三個(gè)按鈕，當(dāng)鼠標(biāo)移動(dòng)到相應(yīng)按鈕上時(shí)，按鈕會(huì)通過(guò)切換成另外一個(gè)圖片達(dá)到加亮顯示效果。5.4.1效果圖分析頭部部分由三部分組成，左邊是騰訊網(wǎng)的Logo，中間是一個(gè)文本搜索框，當(dāng)鼠標(biāo)移動(dòng)到文本框左側(cè)的時(shí)候，會(huì)顯示一個(gè)下拉列表，鼠標(biāo)點(diǎn)擊列表選項(xiàng)后所點(diǎn)擊的文字會(huì)更新到文本框左側(cè)。顯示效果如圖5-11所示。右邊是三個(gè)按鈕，當(dāng)鼠標(biāo)移動(dòng)到相應(yīng)按鈕上時(shí)，按鈕會(huì)通過(guò)切換成另外一個(gè)圖片達(dá)到加亮顯示效果。5.4頭部分析與實(shí)現(xiàn)5.4.1效果圖分析圖5-11搜索框效果圖5.4.2頭部布局分析頭部分采用左中右三欄居中布局方式，按照內(nèi)容和表現(xiàn)形式分離的網(wǎng)頁(yè)設(shè)計(jì)原則，采用div+css技術(shù)，使用div布局結(jié)構(gòu)代碼如下：5.4.2頭部布局代碼<!--頭部開(kāi)始--><divclass="qq-top"><!--logo開(kāi)始--><divclass="top-logo"></div><!--logo結(jié)束--><!--搜索框開(kāi)始--><divclass="top-search"></div><!--搜索框結(jié)束--><!--登錄開(kāi)始--><divclass="top-login"></div><!--登錄結(jié)束--></div><!--頭部結(jié)束-->5.4.3左側(cè)的騰訊Logo圖片<!--logo開(kāi)始--><divclass="top-logofl"><imgsrc="images/qq_logo_2x.png"width="130px"height="35px"/></div><!--logo結(jié)束-->.qq-top{width:1000px;height:35px;margin-top:20px;margin-bottom:10px;}.qq-top.top-logo{width:130px;height:35px;}5.4.4中間的搜索框代碼實(shí)現(xiàn)對(duì)搜索框進(jìn)行分析，該搜索框由四部分組成：顯示搜索類(lèi)別的層，一個(gè)下拉列表，用于輸入文字的文本框和按鈕組成。下拉列表可以用列表來(lái)實(shí)現(xiàn)，該下拉列表顯示在顯示搜索類(lèi)別層的下面，可以通過(guò)絕對(duì)定位來(lái)實(shí)現(xiàn)，文本框和按鈕用表單元素來(lái)實(shí)現(xiàn)，下面依次來(lái)實(shí)現(xiàn)以上功能。5.4.4中間的搜索框代碼實(shí)現(xiàn)1.搜索框的圓角矩形實(shí)現(xiàn)搜索框用定義一個(gè)class為top-search的層，并設(shè)置該層border-radius屬性來(lái)實(shí)現(xiàn)圓角矩形，還需要設(shè)置其width和height屬性來(lái)限制框的大小，設(shè)置border邊框?qū)傩院蚥ackground-color背景顏色來(lái)突出效果，設(shè)置margin屬性來(lái)固定層的位置,設(shè)置float為left，實(shí)現(xiàn)和頭部的其他兩個(gè)層之間左中右布局。具體代碼如下：<!--搜索框開(kāi)始--><divclass="top-search"></div><!--搜索框結(jié)束-->.top-search{width:450px;height:32px;line-height:32px;border:1pxsolid#dfdfdf;/*設(shè)置層的邊框樣式*/background-color:#f3f6f8;/*設(shè)置背景顏色樣式*//*匹配不同瀏覽器的圓角邊框*/-webkit-border-radius:20px;-moz-border-radius:20px;-ms-border-radius:20px;-o-border-radius:20px;border-radius:20px;/*設(shè)置左浮動(dòng)效果*/float:left;margin:23px00218px;}5.4.4中間的搜索框代碼實(shí)現(xiàn)1.搜索框的圓角矩形實(shí)現(xiàn)5.4.4中間的搜索框代碼實(shí)現(xiàn)2.搜索框的布局實(shí)現(xiàn)具體代碼如下：<!--搜索框開(kāi)始--><divclass="top-search"><formid="searchForm"target="_blank"><!--搜索類(lèi)型選擇：下拉列表框開(kāi)始--><divclass="searchMenufl"><divclass="searchSelected"id="searchSelected">網(wǎng)頁(yè)</div><divclass="searchTab"id="searchTab"><ul><liclass="selected">網(wǎng)頁(yè)</li><li>圖片</li><li>視頻</li><li>音樂(lè)</li><li>地圖</li><li>問(wèn)問(wèn)</li><li>百科</li><li>新聞</li><li>購(gòu)物</li></ul></div></div><!--搜索類(lèi)型選擇：下拉列表框結(jié)束--><!--文本框開(kāi)始--><inputid="sougouTxt"type="text"autocomplete="off"><!--文本框結(jié)束--><!--搜索按鈕開(kāi)始--><divclass="fr"><buttonid="searchBtn"class="searchBtn"type="submit">搜狗搜索

</button></div><!--搜索按鈕結(jié)束--></form></div>下面對(duì)這四部分進(jìn)行CSS樣式分析，searchMesnu層中包括兩個(gè)層，一個(gè)是class為searchSelected的層，用于顯示選中的搜索類(lèi)型，一個(gè)class屬性為searchTab的層，用于顯示列表。這兩個(gè)層布局是上下布局，searchTab層顯示在searchSelected層的下方的位置。3.searchMenu層CSS樣式分析與設(shè)計(jì)

3.searchMenu層CSS樣式分析與設(shè)計(jì)下面對(duì)這四部分進(jìn)行CSS樣式分析，searchMesnu層中包括兩個(gè)層，一個(gè)是class為searchSelected的層，用于顯示選中的搜索類(lèi)型，一個(gè)class屬性為searchTab的層，用于顯示列表。這兩個(gè)層布局是上下布局，searchTab層顯示在searchSelected層的下方的位置。searchMenu層的樣式如下：.searchMenu{position:relative;/*設(shè)置定位方式為相對(duì)定位*/width:68px;color:#404040}4.searchSelected層的樣式代碼如下：.searchSelected{

padding:019px;

cursor:pointer;

font-size:14px;

}5.searchTab層的樣式如下：.top-search.searchMenu.searchTab{display:none;/*設(shè)置默認(rèn)不可見(jiàn)*/position:absolute;/*設(shè)置定位方式為絕對(duì)定位,相對(duì)父容器層searchMenu*/top:33px;/*圓角矩形框的下方*/left:0;padding:019px;background-color:#fff;text-align:center;z-index:20}6.下拉列表searchTab層默認(rèn)是不可見(jiàn)的，當(dāng)用鼠標(biāo)滑過(guò)“網(wǎng)頁(yè)”文字附近時(shí)，該層可以顯示。.top-search.searchMenu:hover.searchTab{

display:block;

}7.searchTab層中列表項(xiàng)li的樣式如下：.top-search.searchMenu.searchTabli{

font-size:14px;

color:#a8a8a8;

cursor:pointer;/*設(shè)置鼠標(biāo)指針變成手的形狀*/

border-bottom:3pxsolid#FFF;

}8.鼠標(biāo)滑動(dòng)時(shí)列表項(xiàng)的樣式以及默認(rèn)選中的li的樣式如下：.top-search.searchMenu.searchTabli.selected,.top-search.searchMenu.searchTabli:hover{color:#404040;/*設(shè)置字體顏色*/border-bottom-color:#f2630a/*設(shè)置下邊框顏色*/}10.文本框標(biāo)簽input的CSS樣式分析與設(shè)計(jì).top-searchinput{float:left;border:#63F1pxsolid;font-size:14px;line-height:22px;width:250px;height:24px;padding:4px10px;background:none}11.按鈕層fr的Css樣式分析與設(shè)計(jì)<!--搜索按鈕開(kāi)始-->

<divclass="fr">

<buttonid="searchBtn"class="searchBtn"type="submit">搜狗搜索</button>

</div>

.fr{float:right;}.searchBtn{border:none;height:32px;/*高度和top-search高度相同*/line-height:32px;/*文字垂直居中顯示*/padding:023px;/*設(shè)置文字的內(nèi)邊距*/color:#FFF;/*設(shè)置字體顏色為白色*/background-color:#1479d7;/*設(shè)置背景顏色為藍(lán)色*//*以下5條border-radius屬性設(shè)置圓角矩形，適合于不同的瀏覽器*/-webkit-border-radius:20px;-moz-border-radius:20px;-ms-border-radius:20px;-o-border-radius:20px;border-radius:20px;font-size:16px;/*設(shè)置字體大小*/cursor:pointer;font-family:'MicrosoftYahei','PingFangSC';/*設(shè)置字體*/margin:0}12、實(shí)現(xiàn)鼠標(biāo)滑過(guò)的動(dòng)態(tài)效果

在“網(wǎng)頁(yè)”文字后面添加向下箭頭，當(dāng)鼠標(biāo)滑過(guò)“網(wǎng)頁(yè)”文字附近時(shí)，箭頭變成向上的箭頭。該部分可以使用CSS3的偽元素::after來(lái)實(shí)現(xiàn)。::after選擇器作用是在被選元素的內(nèi)容后面插入內(nèi)容，它必須和content屬性配合使用，用content屬性來(lái)指定要插入的內(nèi)容，如果沒(méi)有具體內(nèi)容，至少也應(yīng)該是’’空字符。同時(shí)還可以設(shè)置其他屬性，對(duì)后面插入的內(nèi)容設(shè)置樣式。/*設(shè)置在searchSelected層后面添加元素以及樣式*/.top-search.searchMenu.searchSelected::after{content:'';position:absolute;/*相對(duì)searchSelected*/right:-5px;top:13px;width:20px;height:6px;background-image:url(../images/so_arr.png);background-repeat:no-repeat}/*設(shè)置鼠標(biāo)滑過(guò)searchMenu層，在searchSelected層元素樣式*/.top-search.searchMenu:hover.searchSelected::after{background-position:0-30px;/*更改背景圖片的位置*/}13.選中下拉列表值的更改JS實(shí)現(xiàn)<scriptlanguage="javascript">window.onload=function(){vartxt=document.getElementById("searchSelected");varlb=document.getElementById("searchTab").getElementsByTagName("li");for(vari=0;i<lb.length;i++)lb[i].onclick=function(){txt.innerHTML=this.innerHTML;}}</script>1.效果圖分析5.4.5右側(cè)的三個(gè)QQ功能按鈕的實(shí)現(xiàn)2.登錄部分布局分析在右側(cè)的層中包括3個(gè)層，三個(gè)層水平排列，因此三個(gè)層都要左浮動(dòng)，引用.fl樣式實(shí)現(xiàn)左浮動(dòng)。其布局結(jié)構(gòu)代碼如下：<!--登錄開(kāi)始--><divclass="top-loginfr"><divclass="item-zonefl"><ahref="/"></a></div><divclass="item-qmailfl"><ahref="/"></a></div><divclass="item-loginfl"><aclass="l-login"href="javascript:;"onclick="userLogin()">登錄</a></div></div><!--登錄結(jié)束-->3.鼠標(biāo)滑過(guò)效果

為了實(shí)現(xiàn)鼠標(biāo)滑過(guò)，更改圖片效果，需要準(zhǔn)備2個(gè)相同大小顏色不同的圖片，因此需要準(zhǔn)備4個(gè)圖片。當(dāng)鼠標(biāo)滑過(guò)時(shí)，更改a標(biāo)簽的背景圖片可以實(shí)現(xiàn)以上效果。.qq-top.top-login{height:32px;width:120px;margin:22px00;}.item-zonea{display:block;width:27px;height:28px;margin-right:10px;background-image:url(../images/z1.jpg);}.item-zonea:hover{background-image:url(../images/z2.jpg);}.item-qmaila{display:block;width:31px;height:24px;margin-right:10px;background-image:url(../images/e1.jpg);}.item-qmaila:hover{background-image:url(../images/e2.jpg);}4.登錄按鈕CSS樣式代碼如下：.qq-top.top-login.l-login{display:inline-block;width:31px;height:31px;line-height:31px;text-align:center;border:1pxsolid#ededed;color:#60a5e4;background-color:#f5f5f5;font-size:14px;}5.5.1效果圖分析對(duì)騰訊首頁(yè)導(dǎo)航效果圖進(jìn)行分析，該導(dǎo)航有兩部分組成，一部分是導(dǎo)航欄，如圖5-21所示，一部分是鼠標(biāo)指向“更多”時(shí)，在下方顯示二級(jí)導(dǎo)航。5.5導(dǎo)航部分分析與實(shí)現(xiàn)將class屬性值為qq-nav的div作為導(dǎo)航層的外層，在該div中包括一個(gè)class屬性值為nav-main的UL元素和一個(gè)class屬性值為nav-more的div兩部分，這兩個(gè)部分是左右布局，nav-main中用來(lái)顯示主導(dǎo)航，nav-more用來(lái)顯示更多導(dǎo)航，這兩部分要設(shè)置浮動(dòng)屬性為左浮動(dòng)，可以使用前面定義好的類(lèi)選擇器.fl。nav-more層中包括兩個(gè)層，一個(gè)class為more-txt的層和一個(gè)class屬性值為nav-sub的層，分別用來(lái)顯示“更多”文字和二級(jí)導(dǎo)航。（代碼省略）5.5.2導(dǎo)航部分布局整體設(shè)計(jì)1.qq-nav層的樣式代碼如下:5.5.3導(dǎo)航部分的CSS樣式分析與設(shè)計(jì)

.qq-nav{

width:1000px;/*設(shè)置寬度為1000px*/

position:relative;/*設(shè)置定位為相對(duì)定位，此屬性是為nav-more指定父容器*/

height:50px;/*設(shè)置導(dǎo)航層的高度為50px*/

background-color:#1479d7;/*設(shè)置藍(lán)色背景*/

font-size:16px;

/*設(shè)置圓角矩形*/

-webkit-border-radius:3px;

-moz-border-radius:3px;

-ms-border-radius:3px;

-o-border-radius:3px;

border-radius:3px;

}2.nav-main層的樣式代碼如下：.qq-nav.nav-main{width:920px;line-height:50px;}3.列表項(xiàng)nav-item的樣式代碼如下：.qq-nav.nav-item{float:left;/*設(shè)置列表項(xiàng)左浮動(dòng),將列表項(xiàng)默認(rèn)豎排變成橫排*/width:57px;/*設(shè)置列表項(xiàng)的寬度*/text-align:center;/*設(shè)置列表項(xiàng)文字水平居中顯示*/line-height:50px;/*設(shè)置列表項(xiàng)文字垂直居中顯示*/}4.超級(jí)鏈接a標(biāo)簽的樣式代碼如下：.qq-nav.nav-maina{padding:5px;color:#FFF}/*鼠標(biāo)滑過(guò)a標(biāo)簽的樣式*/.qq-nav.nav-maina:hover{color:#14539a;background-color:#cbe1ed}5.nav-more層的CSS樣式代碼如下：.qq-nav.nav-more{width:80px;/*和nav-main的高度相同*/height:50px;}6.“更多”文字more-txt層的CSS樣式代碼如下：.qq-nav.nav-more.more-txt{line-height:50px;/*和nav-main的高度相同*/text-align:center;/*設(shè)置文字水平居中*/color:#FFF;/*設(shè)置文字顏色為白色*/.qq-nav.nav-more{width:80px;/*和nav-main的高度相同*/height:50px;cursor:pointer/*設(shè)置鼠標(biāo)指針變成手的形狀*/}7.二級(jí)導(dǎo)航nav-sub層的樣式.qq-nav.nav-more.nav-sub{display:block;padding:10px10px;position:absolute;right:0;top:50px;width:990px;line-height:32px;background-color:#f9fbfc;z-index:100}.qq-nav.nav-more.nav-suba{color:#455569/*設(shè)置二級(jí)導(dǎo)航超級(jí)鏈接的字體顏色*/}.qq-nav.nav-more.nav-suba:hover{color:#0c82ff/*設(shè)置二級(jí)導(dǎo)航超級(jí)鏈接鼠標(biāo)滑過(guò)的字體顏色*/}8.在“更多”文字后面添加向下箭頭.qq-nav.nav-more.more-txt::after{content:'';position:absolute;right:2px;top:22px;width:20px;height:6px;background-image:url(../images/nav_arr.png);background-repeat:no-repeat}.qq-nav.nav-more.more-txt:hover::after{background-position:0-30px}5.6.1效果圖分析

騰訊首頁(yè)廣告部分效果圖如圖5-28所示，看出該部分分為左右兩部分，左邊是一個(gè)廣告圖片，右邊是有輪播效果的的焦點(diǎn)圖，輪播效果需要用js代碼來(lái)實(shí)現(xiàn)。5.6廣告部分分析與實(shí)現(xiàn)

廣告部分布局分為左右結(jié)構(gòu)，定義了class為qq-gg,col-1,col-2三個(gè)div,qq-gg層中包括col-1和col-2兩個(gè)層，col-1層中包括一個(gè)img標(biāo)簽，用于進(jìn)行超級(jí)鏈接；在col-2層是實(shí)現(xiàn)輪播效果的焦點(diǎn)圖，其中定義了一個(gè)class為banner_pic的層和一個(gè)id屬性為button的ol列表，banner_pic層用于顯示要輪播的圖片，該層中可包括多個(gè)img標(biāo)簽，ol列表中可包括和img標(biāo)簽數(shù)相同的li,用于顯示輪播的按鈕。5.6.2廣告部分布局分析與實(shí)現(xiàn)需要說(shuō)明的是：由于輪播中顯示的圖片和按鈕的樣式和不顯示的圖片的樣式不同，因此設(shè)置了class值為current值表示當(dāng)前正在顯示的圖片和按鈕，class值為pic表示隱藏的圖片，class值為but表示不突出顯示的按鈕，通過(guò)設(shè)置它們的樣式，可以看到不同的效果。5.6.2廣告部分布局分析與實(shí)現(xiàn)<!--廣告開(kāi)始--><divclass="qq-gg"><divclass="col-1"><a><imgsrc="images/gg.jpg"width="700"height="75"/></a></div><divclass="col-2"><divclass="banner_pic"id="banner_pic"><divclass="current"><imgsrc="images/lb1.png"/></div><divclass="pic"><imgsrc="images/lb2.png"/></div><divclass="pic"><imgsrc="images/lb3.png"/></div></div><olid="button"><liclass="current"></li><liclass="but"></li><liclass="but"></li></ol></div></div><!--廣告結(jié)束-->1.設(shè)置qq-gg層的寬度為1000px，和頁(yè)面寬度一致，高度為75px，和圖片的寬度相同，上邊距為20px,和導(dǎo)航層的邊距為20px。col-1層和col-2層左右布局，高度都為75px,col-1層寬度為700px,col-2層寬度280，兩個(gè)層之間邊距為20px。設(shè)置col-2層的overflow屬性為hidden,意思是col-2層中有多張圖片，一次只能顯示一個(gè)輪播圖片。5.6.3廣告部分樣式分析與實(shí)現(xiàn).qq-gg{height:75px;width:1000px;margin:20px00;/*設(shè)置該層的上外邊距為20px*/}.qq-gg.col-1{width:700px;height:75px;float:left;margin-right:20px;}.qq-gg.col-2{float:right;width:280px;height:75px;position:relative;/*為ol指定相對(duì)容器*/overflow:hidden;/*超過(guò)其大小部分，將隱藏起來(lái)，一次只能顯示一個(gè)輪播圖片。*/}2.當(dāng)進(jìn)行圖片輪播時(shí)，將要顯示的圖片的樣式display屬性設(shè)置為block,不顯示圖片的display屬性值設(shè)置為none,表示不顯示。class為pic和current的類(lèi)選擇器樣式代碼如下：.qq-gg.col-2.banner_pic.pic{

display:none;

}

.qq-gg.col-2.banner_pic.current{

display:block;

}3.使用OL標(biāo)簽來(lái)實(shí)現(xiàn)圖片輪播時(shí)和圖片對(duì)應(yīng)的按鈕。

current和.but在樣式中，它們的區(qū)別是background-color背景顏色屬性值不同，當(dāng)輪播圖片時(shí)，按鈕也要輪播，通過(guò)設(shè)置背景顏色不同來(lái)進(jìn)行區(qū)別。在OL標(biāo)簽樣式中，設(shè)為絕對(duì)定位，其相對(duì)容器是col-2,在col-2中設(shè)置了相對(duì)定位position:relative;屬性。.qq-gg.col-2ol.but{

float:left;

width:5px;

height:5px;

margin-right:12px;

-webkit-border-radius:3px;

-moz-border-radius:3px;

-ms-border-radius:3px;

-o-border-radius:3px;

border-radius:3px;

background-color:#999;

}.qq-gg.col-2ol.current{float:left;width:5px;height:5px;margin-right:12px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;background-color:#09C;}輪播動(dòng)畫(huà)效果的實(shí)現(xiàn)需要使用JavaScript代碼，實(shí)現(xiàn)的基本思路是分為自動(dòng)輪播和用鼠標(biāo)滑過(guò)按鈕輪播兩種方式。自動(dòng)輪播需要使用定時(shí)器，設(shè)置定時(shí)器每隔3000毫秒執(zhí)行自動(dòng)切換（autoChange）函數(shù)，autoChange函數(shù)用于更換圖片和更換按鈕的索引，并將相應(yīng)索引對(duì)應(yīng)的元素的className屬性設(shè)置為current,即為前面設(shè)置的圖片和按鈕顯示的樣式。當(dāng)鼠標(biāo)滑過(guò)按鈕時(shí)，需要獲取鼠標(biāo)停留的輪播按鈕的編號(hào)，并將該編號(hào)對(duì)應(yīng)的圖片元素的className屬性設(shè)置為current,即更改了樣式，也就更改了顯示的圖片和按鈕的樣式。(代碼省略)5.6.4廣告部分動(dòng)態(tài)效果實(shí)現(xiàn)5.7.1效果圖分析5.7主體部分的分析與實(shí)現(xiàn)<divclass="qq-main"><divclass="col-1"></div><divclass="col-2"></div><divclass="col-3"></div></div>.qq-main.col-1{width:310px;margin-right:20px;float:left;}.qq-main.col-2{width:310px;margin-right:20px;float:left;}.qq-main.col-3{width:340px;float:left;}這兩部分都由三部分組成，1表示標(biāo)題，2表示頭條新聞，3表示一般新聞。5.7.2要聞部分和今日話題部分分析和實(shí)現(xiàn)1、標(biāo)題部分實(shí)現(xiàn)在圖中1部分由標(biāo)題和下劃線組成，class值為hd的層表示頭部，其中包括class值為tit的h2和class值為tit-line的span標(biāo)簽，h2用于顯示標(biāo)題文字（要聞），span用于顯示下劃線。布局代碼如下：<divclass="hd"><h2class="tit"><ahref="http://"target="_blank">要聞</a></h2><spanclass="tit-line"></span></div>.qq-main.hd{height:43px;line-height:40px;border-bottom:1pxsolid#cae0f3;}.qq-main.hd.tit{font-size:16px;}.qq-main.col-1.hd.tit-line{display:block;width:35px;height:3px;border-bottom:3pxsolid#06C;}2、要聞部分實(shí)現(xiàn)在圖2,3部分中，用一個(gè)class為bd的層作為外層，該層中包含一個(gè)UL列表，用來(lái)實(shí)現(xiàn)新聞的列舉，第一個(gè)li為頭條新聞，設(shè)置其class屬性的值為news-top,設(shè)置樣式，使其突出顯示。（代碼省略）3、今日話題分析與實(shí)現(xiàn)日話題部分與要聞部分實(shí)現(xiàn)方法相同，只是標(biāo)題下方的線長(zhǎng)度不同。具體代碼參考如下。.qq-main.col-2.hd.tit-line{display:block;width:64px;height:3px;border-bottom:3pxsolid#06C;

}<divclass="col-2"><divclass="hd"><h2class="tit"><target="_blank">今日話題</a></h2><spanclass="tit-line"></span></div><divclass="bd"><ulclass="news-list"><liclass="news-top"><atarget="_blank">臺(tái)灣名嘴赴瑞士安樂(lè)死：安樂(lè)死沒(méi)你想得那么簡(jiǎn)單</a></

溫馨提示

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

評(píng)論

0/150

提交評(píng)論