版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
1任務(wù)一、一行三列布局布局。要求:根據(jù)設(shè)計(jì)稿完成網(wǎng)頁布局,要設(shè)計(jì)三個(gè)層。2一、思路
此網(wǎng)頁為三行一列結(jié)構(gòu),先設(shè)計(jì)HTML部分,再根據(jù)各層次高度設(shè)計(jì)樣式。3二、HTML部分<divid="main"> <divid="top"> </div> <divid="middle"> </div> <divid="bottom"> </div> </div>4三、CSS部分代碼#main{ margin:10pxauto;width:960px; }5
#top{ height:560px; background:#0290D8; } #middle{ height:57px; background:#9ECBEA; }
6#bottom{ height:20px; background:#5EC8FF; }7任務(wù)二、三行兩列布局。要求:根據(jù)設(shè)計(jì)稿完成網(wǎng)頁布局,需設(shè)計(jì)五個(gè)層。8一、思路
此網(wǎng)頁為三行二列結(jié)構(gòu),top層中有banner和links兩層,middle層中有左右兩層。9二、HTML部分<divid="main"> <divid="top"> <divid="banner"></div> <divid="links"></div> </div> <divid="middle"> <divid="leftbar"></div> <divid="rightbar"></div> </div> <divid="bottom"> </div></div>10三、CSS部分代碼#main{ margin:0pxauto;width:990px; }11
#top{ } #banner{ height:120px; background:#F85380; } #links{ height:100px; background:#F5F5F5; }
12
#middle{ background:#9ECBEA;} #leftbar{ height:600px; width:770px; float:left; background:#F85380; } #rightbar{ height:600px; width:190px; float:right; background:#B20000; }13
#bottom{height:110px; clear:both; background:#EAEAEA; }14任務(wù)三、三行三列布局。要求:根據(jù)設(shè)計(jì)稿完成網(wǎng)頁布局,需設(shè)計(jì)9個(gè)層。15一、思路
此網(wǎng)頁為三行三列結(jié)構(gòu),頂部有banner,links和others三個(gè)層,中部有l(wèi)eft,center,right三個(gè)層,底端有g(shù)uide,list和address三個(gè)層。16二、HTML部分<divid="main"> <divid="top"> <divid="banner"></div> <divid="links"></div> <divid="others"></div> </div><divid="middle"> <divid="leftbar"></div> <divid="centerbar"></div> <divid="rightbar"></div> </div>17
<divid="bottom"> <divid="guide"> </div> <divid="list"> </div> <divid="address"> </div></div> </div>18三、CSS部分代碼
#main{ margin:0pxauto;width:990px; }19#top{} #banner{ height:100px; background:#1B94E5; } #links{ height:90px; background:#97E8F9; } #others{ height:80px; background:#FF9D1C; }20
#middle{background:#9ECBEA;} #leftbar{height:600px; width:230px; float:left; background:#0764FF;} #centerbar{height:600px; width:500px; margin-left:20px; float:left; background:#F85380;} #rightbar{height:600px; width:220px; float:right; background:#F96D0C;}21
#bottom{clear:both;} #address{ height:50px; background:#656565;
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 知識(shí)產(chǎn)權(quán)評(píng)估服務(wù)合同續(xù)簽
- 商鋪?zhàn)赓U協(xié)議書
- 第一單元第1課時(shí)在直線上表示數(shù)(課件)六年級(jí)下冊(cè)數(shù)學(xué)人教版
- 版權(quán)許可爭(zhēng)議解決合同
- 2024年社會(huì)人文科學(xué)研究服務(wù)項(xiàng)目合作計(jì)劃書
- 2024年P(guān)CB高純化學(xué)品項(xiàng)目建議書
- 2024年高純低羥基石英玻璃項(xiàng)目建議書
- 2024年卸氣柱合作協(xié)議書
- 2024年水解彈性蛋白項(xiàng)目建議書
- 高職單招課件高三下學(xué)期主題班會(huì)
- 養(yǎng)生技師崗位保證承諾書
- 南京大學(xué)中國語言文學(xué)(一級(jí)學(xué)科)博士研究生培養(yǎng)方案
- 鄭大遠(yuǎn)程教育教學(xué)學(xué)位英語考試真題
- 婦產(chǎn)科學(xué)女性生殖系統(tǒng)解剖優(yōu)秀課件
- 【山西】大同火山群國家地質(zhì)公園旅游總體規(guī)劃
- 小學(xué)科學(xué)教育科學(xué)三年級(jí)上冊(cè)水《加快溶解》 -PPT
- 符號(hào)檢驗(yàn)教案課件
- 中國文旅特色小鎮(zhèn)發(fā)展研究報(bào)告
- 游戲美術(shù)外包制作合同模版
- 小學(xué)體育與健康人教~年級(jí)全一冊(cè)第三部分體育運(yùn)動(dòng)技能籃球行進(jìn)間運(yùn)球教學(xué) 省賽獲獎(jiǎng)
- 人教版小學(xué)音樂二年級(jí)上冊(cè)《過新年》課件
評(píng)論
0/150
提交評(píng)論