HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：使用Bootstrap柵格系統(tǒng)快速布局D清單頁面_第1頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：使用Bootstrap柵格系統(tǒng)快速布局D清單頁面_第2頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：使用Bootstrap柵格系統(tǒng)快速布局D清單頁面_第3頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：使用Bootstrap柵格系統(tǒng)快速布局D清單頁面_第4頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：使用Bootstrap柵格系統(tǒng)快速布局D清單頁面_第5頁
已閱讀5頁，還剩10頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作使用Bootstrap開源框架快速搭建響應(yīng)式網(wǎng)頁能夠使用Bootstrap的刪格系統(tǒng)完成頁面的流式布局；能夠根據(jù)網(wǎng)頁元素選擇合適的刪格系統(tǒng)樣式以響應(yīng)不同視口；能夠使用Bootstrap對D清單頁面進(jìn)行響應(yīng)式頁面布局。任務(wù)目標(biāo)

使用Bootstrap柵格系統(tǒng)快速布局D清單頁面本次任務(wù)要求通過學(xué)習(xí)Bootstrap的刪格系統(tǒng)知識和流式布局知識，完成D清單頁面的整體布局。完成后的頁面測試效果圖如2-2所示。任務(wù)描述

使用Bootstrap柵格系統(tǒng)快速布局頁面圖2-2移動(dòng)端和電腦端布局測試頁面截圖在學(xué)習(xí)以下知識技能的基礎(chǔ)上，完成頁面布局框架代碼的編寫，并對布局結(jié)果進(jìn)行測試。需要：Bootstrap的刪格系統(tǒng)知識；Bootstrap的布局容器、行和列等相關(guān)知識。根據(jù)D清單頁面效果圖使用Bootstrap完成頁面布局，并測試移動(dòng)端和電腦端的布局效果。任務(wù)分析

使用Bootstrap柵格系統(tǒng)快速布局頁面知識與技能準(zhǔn)備Bootstrap提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列，即Bootstrap將頁面的每一行劃分為12列的方式進(jìn)行頁面布局。知識與技能準(zhǔn)備1、刪格系統(tǒng)Bootstrap的刪格參數(shù)如下表：表2-2-1Bootstrap刪格參數(shù)表知識與技能準(zhǔn)備2、布局容器Bootstrap為了保證刪格布局的正常應(yīng)用，需要使用布局容器（添加.container或.container-fluid類的標(biāo)簽）來完成頁面布局。其中.container類是用于固定寬度（各視口最大寬度可參考表2-2-1）并支持響應(yīng)式布局的容器。.container-fluid類是用于100%的寬度，可占據(jù)全部視口的容器。由于padding等css屬性的原因，.container和.container-fluid類的標(biāo)簽不能互相嵌套。知識與技能準(zhǔn)備3、rowBootstrap為刪格添加了一個(gè)獨(dú)立的類.row，以適用我們的先創(chuàng)建行（row），然后在行中創(chuàng)建列（.col-xs-*等Bootstrap刪格類預(yù)定的列）的布局，同時(shí)通過為.row元素設(shè)置負(fù)值margin從而抵消了布局容器（.container-fluid和.container類）設(shè)置的左右兩邊padding，也就間接保留了“行（row）”所包含的“列（column）”（刪格類.col-xs-*,.col-sm-*,.col-md-*,.col-lg-*）設(shè)置的padding值（左右各15px），.row類在Bootstrap的定義如下：“行（row）”必須包含在.container（固定寬度）或.container-fluid（100%寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding），通常我們會(huì)通過“行（row）”在水平方向創(chuàng)建一組“列（column）”，然后將內(nèi)容放置于“列（column，刪格類.col-xs-*,.col-sm-*,.col-md-*,.col-lg-*）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。1234.row{margin-right:-15px;margin-left:-15px;}打開2.2-1素材文件夾中的web_bootstrap文件夾，在已經(jīng)配置好Bootstrap的index.html頁面編寫一個(gè)布局框架頁面，要求如下：（1）采用100%寬度的容器（2）在行（row）中創(chuàng)建一個(gè)大桌面視口下是4列、桌面視口下是2列、平板是2列、手機(jī)是1列的布局框架。課堂練習(xí)的部分代碼可參考如下示例：課堂練習(xí)2-2-1創(chuàng)建一個(gè)響應(yīng)式的刪格頁面12345678<divclass="container-fluid"><divclass="row"><divclass="col-lg-3col-md-6col-sm-6">1</div><divclass="col-lg-3col-md-6col-sm-6">2</div><divclass="col-lg-3col-md-6col-sm-6">3</div><divclass="col-lg-3col-md-6col-sm-6">4</div></div></div>知識與技能準(zhǔn)備4、列偏移Bootstrap處理定義了刪格，還為刪格的左留白定義了一套“留白刪格”，我們把它叫做列偏移樣式。如使用.col-md-offset-*類可以將列向右側(cè)偏移。這些類實(shí)際是通過使用*選擇器為當(dāng)前元素增加了左側(cè)的邊距（margin）。打開2.2-1完成的文件，在練習(xí)2.2-1的基礎(chǔ)上，在row內(nèi)的布局框架元素上方增加標(biāo)題和說明文字，要求如下：（1）標(biāo)題在任何顯示視口都是獨(dú)立的一行顯示（2）說明文字在大桌面視口、桌面視口占頁面的8等分，并居中對齊。課堂練習(xí)的部分代碼可參考如下示例：課堂練習(xí)2-2-2創(chuàng)建一個(gè)“居中”的刪格列12345678910<divclass="container-fluid"><divclass="row"><h2>標(biāo)題</h2><divclass="col-lg-8col-lg-offset-2col-md-8col-md-offset-2>說明文字</div><divclass="col-lg-3col-md-6col-sm-6">1</div><divclass="col-lg-3col-md-6col-sm-6">2</div><divclass="col-lg-3col-md-6col-sm-6">3</div><divclass="col-lg-3col-md-6col-sm-6">4</div></div></div>任務(wù)實(shí)施在任務(wù)1的基礎(chǔ)上，我們需要完成頁面的基本布局框架，以便在任務(wù)三中加入對應(yīng)內(nèi)容。通過分析效果圖片，我們不難發(fā)現(xiàn)，除了移動(dòng)視口，其它視口下左右兩邊的內(nèi)容與瀏覽器都保持著一定的邊界（padding），所以我們可以判斷頁面布局時(shí)應(yīng)該選用固定寬度容器.container。由于container是有左右留白的，針對非白色背景，為了保證有色背景是通欄，需要在其外圍添加一個(gè)標(biāo)簽來包含它，如功能介紹、下載應(yīng)用、高級會(huì)員、聯(lián)系我們，這幾個(gè)模塊都需要在container的外圍添加一個(gè)標(biāo)簽。由于本任務(wù)主要考慮布局，所以以下各步驟的參考代碼并沒有完全包含頁面的所有內(nèi)容，我們會(huì)在后續(xù)任務(wù)中再進(jìn)行完善。1、菜單欄因?yàn)椴藛螜诓糠质亲笥医Y(jié)構(gòu)，使用可以在<body>標(biāo)簽中編寫左右布局代碼。2、關(guān)于關(guān)于區(qū)域?yàn)橥冢]有分列），故只需要單獨(dú)創(chuàng)建一行就可以了。3、應(yīng)用特征此欄為“品”字形，標(biāo)題獨(dú)立一行，下方為左右結(jié)構(gòu)。在大桌面視口和桌面視口端采用左右5：7的結(jié)構(gòu)，平板和手機(jī)端為上下結(jié)構(gòu)（占12列），默認(rèn)即占12列，故不用編寫，只需要編寫大桌面視口和桌面視口端兩個(gè)端口的。任務(wù)實(shí)施4、下載此欄內(nèi)容在在大桌面視口和桌面視口端為也是“品”字結(jié)構(gòu)，上面為標(biāo)題+段落，下面是左中右結(jié)構(gòu)的布局，在平板和手機(jī)端不存在左右結(jié)構(gòu)，是垂直排列的標(biāo)題+段落+垂直的軟件特征介紹。5、會(huì)員功能該欄目標(biāo)題部分與上一欄目類似，下方是表格。6、幫助中心該欄目內(nèi)容為通欄標(biāo)題-三列內(nèi)容-通欄視頻的結(jié)構(gòu)。7、聯(lián)系我們欄目內(nèi)容為左右結(jié)構(gòu)，為了讓右邊的表單靠右，我們對其左右結(jié)構(gòu)的比例做了調(diào)

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(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ǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論