HTML5+CSS3+JavaScript+Bootstrap網站開發(fā)技術（第3版）課件 第10章 綜合實例

第10章綜合實例用HTML5+CSS3實現(xiàn)旅游網站1用Bootstrap實現(xiàn)后臺管理頁面210.1用HTML5+CSS3實現(xiàn)旅游網站10.1.1使用HTML5結構元素組織網頁1.網頁結構描述頁面結構元素的含義描述如下。?header元素：網站的標題、logo、導航等。?nav元素:頁面導航。?aside元素：側邊欄，用來展示與當前網頁或整個網站相關的信息。?section元素：網頁的主體內容通常被放置在section?footer元素：用來放置網站的版權聲明和備案信息等。10.1.1使用HTML5結構元素組織網頁10.1.1網頁結構描述頁面結構元素的含義描述10.1.1使用HTML5結構元素組織網頁2.2用CSS3定義網站全局樣式

為網站設置全局樣式，例如背景、邊界、字體、字號和行高等屬性參數(shù)，保證不同頁面有相對一致的風格，也可以保證網頁在不同瀏覽器中穩(wěn)定的顯示效果。代碼（略）10.1.2頁頭部分的設計1.頁頭的結構描述頁頭部分由header元素聲明，由背景圖片和2個導航組成，顯示效果如圖所示。10.1.2頁頭部分的設計2.頁頭元素及CSS樣式代碼分析

頁頭部分的HTML5代碼結構頁頭部分使用的樣式代碼（略）101.3側邊導航和焦點圖的設計1.側邊導航和焦點圖版塊的內容版塊內容整體放置在section元素中。section元素具有引導和導航作用。網站的主頁可以劃分為焦點信息、最新咨訊、特色線路等多個section。10.1.3側邊導航和焦點圖的設計2.側邊導航和焦點圖版塊的代碼分析

示例頁面中的側邊導航和焦點圖版塊的如示例8-5所示。

代碼略.10.1.4精品推薦版塊的設計1.精品推薦版塊的內容精品推薦版塊通過section定義，該版塊的內容通過無序列表組織，列表項用來放置圖片及介紹文字。10.1.4精品推薦版塊的設計2.精品推薦版塊的代碼分析

示例代碼略10.1.5頁腳的設計1.頁腳的結構描述頁腳部分用footer元素聲明，其中包含了4個div元素，在每個div容器中放置了一個無序列表，列表項中內容主要是各類鏈接。10.1.5頁腳的設計2.頁腳的代碼分析

示例代碼略10.2用Bootstrap實現(xiàn)后臺管理頁面

10.2.1頁面結構描述1.頁面功能說明導航欄：包括用戶管理、內容管理、系統(tǒng)管理等功能模塊。。左側邊欄：內容管理模塊下的分類列表。主體內容部分：文章列表，實現(xiàn)查看、編輯、刪除、置頂?shù)炔僮鳌?0.2.1頁面結構描述10.2.1頁面結構描述2.Bootstrap3框架10.2.1頁面結構描述3.頁面布局代碼頁面導航條由nav元素描述；主體內容包含在應用了.container類的div容器內部，分為左側邊欄和右側內容部分。10.2.2導航部分的設計導航部分包括標題、主要功能模塊的鏈接、搜索表單、登錄按鈕等，定義在nav元素內。代碼略。10.2.3主體部分的設計主體部分在.container類描述的div容器內左側邊欄用列表組實現(xiàn)右側的路徑導航使用.breadcrumb類實現(xiàn)文章列表用一個響應式表格實現(xiàn)使用.pagination類實現(xiàn)分頁功能頁腳由.myfooter類來定義樣式10.2.4案例小結（1）關于代碼的書寫建議在Bootstrap的在線文檔中找到相關的示例，復制，然后再修改代碼，這將極大地提高頁面的開發(fā)效率。（2）理解Bootstrap框架Bootstrap框架的主要在bootstrap.css文件和bootstrap.js文件中。讀者可以添加的樣式類，或者直接修改Bootstrap框架中的代碼。（3）功能的進一步改善作業(yè)（1）簡述HTML5新增的結構元素的含義使用方法。（2）舉例說明網站中有那些元素適合定義為全局樣式。（3）說明CSS應采用什么措施避免樣式無法兼容多種瀏覽器的問題。（4