資源簡介

(共53張PPT)
11html5 新增標簽的使用任務 1 制作支付成功網頁任務 2 制作查看訂單網頁制作支付成功網頁任務 1● 掌握 html5 新增 bdi 標簽的用法。本任務將通過使用 CSS 設置支付成功圖文信息的樣式，利用 html5 新增 bdi 標簽共同完成支付成功網頁，網頁效果如圖所示。支付成功網頁效果步驟：制作支付成功網頁。使用 div 盒子進行嵌套布局，在制作收件人信息部分使用了 bdi 標簽，用于隔離父元素樣式對子元素樣式的影響。具體 html 代碼如圖所示。支付成功網頁結構布局接著設置 CSS 代碼。這里需要注意，用 background 設置背景圖像時，scroll 表示窗口內容滾動時圖片也會跟著滾動，即圖片與其他內容相對靜止，一般此處默認值為 scroll。如果想讓圖片不隨窗口的滾動而跟著變化，此處需設置為 xed。圖所示為用 CSS 設置支付成功網頁樣式的代碼。用 CSS 設置支付成功網頁樣式的代碼用 CSS 設置支付成功網頁樣式的代碼用 CSS 設置支付成功網頁樣式的代碼bdi 標簽是 html5 中的新標簽。bdi 標簽指的是 bidi 隔離。bdi 標簽允許設計者設置一段文本，使其脫離其父元素的文本方向設置。在發布用戶評論或其他無法完全控制的內容時，建議使用該標簽。bdi 標簽的常用屬性及描述見表。bdi 標簽的屬性及描述制作查看訂單網頁任務2● 掌握 html5 新增 header 標簽、footer 標簽的用法。html5 吸取了 xhtml2 的一些優點，為了使文檔的結構更加清晰、明確，html5 又新增了一些改善文檔結構的元素，如 header、footer、article、aside、section 等，從而使網頁開發人員能夠更加語義化地創建文檔。而在之前的 html4 中，開發者都將 div 標簽作為網頁的主要容器。本任務使用 header、footer 語義化標簽和其他傳統標簽共同制作了查看訂單網頁，效果如圖所示。查看訂單網頁效果步驟一：先制作左側主菜單部分，它主要通過一個 ul 無序列表嵌套四個子 ul 無序列表來實現布局。具體 html 代碼如圖所示。左側主菜單部分結構布局左側主菜單部分結構布局左側主菜單部分結構布局接著設置 CSS 代碼，這里應注意，當設置 color 顏色的值是用十六進制來表示時，如果每兩位的值相同，則可縮寫一半，例如，“ color：#FF6699”可簡寫為“ color：#F69”。用CSS 設置左側主菜單部分樣式的代碼如圖所示。用 CSS 設置左側主菜單部分樣式的代碼用 CSS 設置左側主菜單部分樣式的代碼運行代碼，效果如圖所示。制作完左側主菜單的網頁效果步驟二：制作買家訂單流程進度圖。流程進度圖使用 div 標簽制作，每一個節點的圓圈使用 em標簽制作，圓圈中的圖標使用 i 標簽制作。具體 html 代碼如圖所示。買家訂單流程進度圖結構布局買家訂單流程進度圖結構布局設置 CSS 代碼，這里注意“ text-align:justify”的含義表示該元素包含的內容實行兩端對齊，即其子元素均分水平方向的間隔。這里的“ letter-spacing”和“ word-spacing”分別表示字間距和詞間距，都用來控制文字橫向之間的間隔。用 CSS 設置買家訂單流程進度圖樣式的代碼如圖所示。用 CSS 設置買家訂單流程進度圖樣式的代碼用 CSS 設置買家訂單流程進度圖樣式的代碼用 CSS 設置買家訂單流程進度圖樣式的代碼用 CSS 設置買家訂單流程進度圖樣式的代碼用 CSS 設置買家訂單流程進度圖樣式的代碼運行代碼，效果如圖所示。制作完成買家訂單流程進度的網頁效果步驟三：制作物流信息更新展示部分，其主要布局與之前項目十任務 1 中的布局類似，具體 html代碼如圖所示。物流信息更新展示部分結構布局物流信息更新展示部分結構布局用 CSS 設置物流信息更新展示部分樣式的代碼如圖所示。用 CSS 設置物流信息更新展示部分樣式的代碼用 CSS 設置物流信息更新展示部分樣式的代碼用 CSS 設置物流信息更新展示部分樣式的代碼用 CSS 設置物流信息更新展示部分樣式的代碼運行代碼，效果如圖所示。制作完物流信息更新展示部分的網頁效果步驟四：制作訂單信息顯示部分。與之前項目十任務 2 中的訂單布局類似，具體 html 代碼如圖所示。訂單信息顯示部分結構布局訂單信息顯示部分結構布局訂單信息顯示部分結構布局訂單信息顯示部分結構布局訂單信息顯示部分結構布局訂單信息顯示部分結構布局訂單信息顯示部分結構布局訂單信息顯示部分結構布局用 CSS 設置訂單信息顯示部分的代碼，如圖所示。用 CSS 設置訂單信息顯示部分的代碼用 CSS 設置訂單信息顯示部分的代碼用 CSS 設置訂單信息顯示部分的代碼用 CSS 設置訂單信息顯示部分的代碼用 CSS 設置訂單信息顯示部分的代碼用 CSS 設置訂單信息顯示部分的代碼一、header 標簽header 標簽用于定義文檔或者文檔一部分區域的頁眉，可以作為介紹內容或者導航列表的容器。在一個文檔中可以定義多個 header 標簽。header 標簽具體使用代碼如圖所示。head 標簽二、footer 標簽footer 標簽用于定義整個網頁或網頁中一個內容區塊的頁腳，可以作為一個區塊的尾部內容，通常包括一些附加信息。footer 標簽具體使用代碼如圖所示。footer 標簽

展開更多......

收起↑