《使用HTML5實現(xiàn)響應(yīng)式布局》第十二章-綜合項目：傳奇互動游戲公司網(wǎng)站（二）學(xué)習(xí)資料_第1頁
《使用HTML5實現(xiàn)響應(yīng)式布局》第十二章-綜合項目：傳奇互動游戲公司網(wǎng)站（二）學(xué)習(xí)資料_第2頁
《使用HTML5實現(xiàn)響應(yīng)式布局》第十二章-綜合項目：傳奇互動游戲公司網(wǎng)站（二）學(xué)習(xí)資料_第3頁
《使用HTML5實現(xiàn)響應(yīng)式布局》第十二章-綜合項目：傳奇互動游戲公司網(wǎng)站（二）學(xué)習(xí)資料_第4頁
《使用HTML5實現(xiàn)響應(yīng)式布局》第十二章-綜合項目：傳奇互動游戲公司網(wǎng)站（二）學(xué)習(xí)資料_第5頁
已閱讀5頁，還剩13頁未讀， 繼續(xù)免費閱讀

付費下載

下載本文檔

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

文檔簡介

第十二章游戲公司網(wǎng)站（二）理論內(nèi)容制作公司信息頁面制作案例展示頁面1.制作公司信息頁面公司信息頁面的完成效果制作公司信息頁面（1）在DreamweaverCC中新建HTML5文檔，保存為about.html，然后編寫公司信息頁面布局的頁面結(jié)構(gòu)主體代碼<body><divclass="boxnews_box1"></div><divclass="boxnews_box3"></div><divclass="boxnews_box2"></div></body>單列布局制作公司信息頁面打開css.css文件，編寫公司信息頁面布局的樣式代碼.news_box1{ height:104px; background:url('../images/topnav_bg2.png')topcenterno-repeat;}/*省略*/div高度和背景圖片news_box1news_box2制作公司信息頁面（2）在about.html中，添加公司信息頁面頁頭和頁腳的結(jié)構(gòu)主體代碼<divclass="boxnews_box1"><divclass="wrap"> <divid="logo"><!--省略--></div> <divid="nav"><!--省略--></div></div></div><divclass="boxnews_box3"><!--省略--></div><divclass="boxnews_box2"><!--省略--></div>LOGO頁腳導(dǎo)航菜單正文制作公司信息頁面頁頭和頁腳效果制作公司信息頁面（3）編寫正文部分左邊欄結(jié)構(gòu)主體代碼<divclass="boxnews_box3"><divclass="wrap"><divid="news_left">

<h2><imgsrc="images/gsxx.png"></h2> <ul><!--省略--></ul> <pid="news_left_bottom"> </p> <pid="news_left_contact"> </p></div></div></div>側(cè)邊欄背景圖聯(lián)系我們側(cè)邊欄列表制作公司信息頁面在css.css文件中，添加正文部分左邊欄的樣式代碼#news_left{ float:left; /*省略*/}#news_left_bottom{ float:left; /*省略*/}#news_left_contact{ float:left; /*省略*/}制作公司信息頁面（4）編寫正文部分右邊欄的頁面結(jié)構(gòu)代碼<divclass="wrap"> <divid="news_left"><!--省略--></div><divid="news_right"><divid="content"class="company_content"></div><divid="news_right_bottom"> </div></div><divclass="clear"></div></div>公司簡介正文段落左邊欄結(jié)構(gòu)制作公司信息頁面在css.css文件中，添加正文部分右邊欄的樣式代碼#news_right{ float:right;/*省略*/}#pany_content{ height:220px;}#news_right_bottom{ float:left; /*省略*/}.clear{ clear:both;}清除浮動，避免影響后面的定位2.制作案例展示頁面案例展示頁面完成效果如圖制作案例展示頁面（1）在DreamweaverCC中新建HTML5文檔，保存為sample.html，然后編寫案例展示頁面布局的頁面結(jié)構(gòu)主體代碼<body><divclass="boxcase_box1"></div><divclass="boxnews_box3"></div>

<divclass="boxnews_box2"></div></body>.case_box1{

height:104px;

background:url('../images/topnav_bg.png')no-repeattop

center;}制作案例展示頁面運行sample.html頁面，效果如下news_box2case_box1制作案例展示頁面（2）在sample.html中，編寫頁頭和頁腳的結(jié)構(gòu)主體代碼、CSS3代碼，其內(nèi)容類似公司信息頁面的頁頭和頁腳，可以重用部分相同代碼，然后保存文檔。（3）在<divclass="boxnews_box3">中，編寫正文部分頁面結(jié)構(gòu)主體代碼<divclass="boxnews_box3"><divclass="wrap"><divclass="case_list"> <divclass="case_imgpngfix"></div> <divclass="case_info"></div></div></div></div>一個游戲案例展示區(qū)塊案例圖片案例文字制作案例展示頁面需要使用的樣式代碼.case_list{ float:left; /*省略*/}.case_img{ float:left; /*省略*/}.case_info{ float:left; /*省略*/}/*省略*/制作案例展示頁面（4）添加更多的游戲案例展示區(qū)塊。<divclass="wrap"> <divclass="case_list"><!--英雄啟示錄--></div> <divclass="case

溫馨提示

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

最新文檔

評論

0/150

提交評論