項目十一 html5 新增標簽的使用

11html5新增標簽的使用667任務1制作支付成功網(wǎng)頁任務2制作查看訂單網(wǎng)頁668制作支付成功網(wǎng)頁任務1669●掌握html5新增bdi標簽的用法。670本任務將通過使用CSS設置支付成功圖文信息的樣式，利用html5新增bdi標簽共同完成支付成功網(wǎng)頁，網(wǎng)頁效果如圖所示。671支付成功網(wǎng)頁效果672步驟：制作支付成功網(wǎng)頁。使用div盒子進行嵌套布局，在制作收件人信息部分使用了bdi標簽，用于隔離父元素樣式對子元素樣式的影響。具體html代碼如圖所示。673支付成功網(wǎng)頁結(jié)構(gòu)布局674接著設置CSS代碼。這里需要注意，用background設置背景圖像時，scroll表示窗口內(nèi)容滾動時圖片也會跟著滾動，即圖片與其他內(nèi)容相對靜止，一般此處默認值為scroll。如果想讓圖片不隨窗口的滾動而跟著變化，此處需設置為?xed。圖所示為用CSS設置支付成功網(wǎng)頁樣式的代碼。用CSS設置支付成功網(wǎng)頁樣式的代碼675用CSS設置支付成功網(wǎng)頁樣式的代碼676用CSS設置支付成功網(wǎng)頁樣式的代碼677bdi標簽是html5中的新標簽。bdi標簽指的是bidi隔離。bdi標簽允許設計者設置一段文本，使其脫離其父元素的文本方向設置。在發(fā)布用戶評論或其他無法完全控制的內(nèi)容時，建議使用該標簽。bdi標簽的常用屬性及描述見表。bdi標簽的屬性及描述制作查看訂單網(wǎng)頁任務2

678●掌握html5新增header標簽、footer標簽的用法。679html5吸取了xhtml2的一些優(yōu)點，為了使文檔的結(jié)構(gòu)更加清晰、明確，html5又新增了一些改善文檔結(jié)構(gòu)的元素，如header、footer、article、aside、section等，從而使網(wǎng)頁開發(fā)人員能夠更加語義化地創(chuàng)建文檔。而在之前的html4中，開發(fā)者都將div標簽作為網(wǎng)頁的主要容器。本任務使用header、footer語義化標簽和其他傳統(tǒng)標簽共同制作了查看訂單網(wǎng)頁，效果如圖所示。680681查看訂單網(wǎng)頁效果682步驟一：先制作左側(cè)主菜單部分，它主要通過一個ul無序列表嵌套四個子ul無序列表來實現(xiàn)布局。具體html代碼如圖所示。左側(cè)主菜單部分結(jié)構(gòu)布局683左側(cè)主菜單部分結(jié)構(gòu)布局684左側(cè)主菜單部分結(jié)構(gòu)布局685接著設置CSS代碼，這里應注意，當設置color顏色的值是用十六進制來表示時，如果每兩位的值相同，則可縮寫一半，例如，“color：#FF6699”可簡寫為“color：#F69”。用CSS設置左側(cè)主菜單部分樣式的代碼如圖所示。用CSS設置左側(cè)主菜單部分樣式的代碼686用CSS設置左側(cè)主菜單部分樣式的代碼687運行代碼，效果如圖所示。制作完左側(cè)主菜單的網(wǎng)頁效果688步驟二：制作買家訂單流程進度圖。流程進度圖使用div標簽制作，每一個節(jié)點的圓圈使用em標簽制作，圓圈中的圖標使用i標簽制作。具體html代碼如圖所示。買家訂單流程進度圖結(jié)構(gòu)布局689買家訂單流程進度圖結(jié)構(gòu)布局690設置CSS代碼，這里注意“text-align:justify”的含義表示該元素包含的內(nèi)容實行兩端對齊，即其子元素均分水平方向的間隔。這里的“l(fā)etter-spacing”和“word-spacing”分別表示字間距和詞間距，都用來控制文字橫向之間的間隔。用CSS設置買家訂單流程進度圖樣式的代碼如圖所示。用CSS設置買家訂單流程進度圖樣式的代碼691用CSS設置買家訂單流程進度圖樣式的代碼692用CSS設置買家訂單流程進度圖樣式的代碼693用CSS設置買家訂單流程進度圖樣式的代碼694用CSS設置買家訂單流程進度圖樣式的代碼695運行代碼，效果如圖所示。制作完成買家訂單流程進度的網(wǎng)頁效果696步驟三：制作物流信息更新展示部分，其主要布局與之前項目十任務1中的布局類似，具體html代碼如圖所示。物流信息更新展示部分結(jié)構(gòu)布局697物流信息更新展示部分結(jié)構(gòu)布局698用CSS設置物流信息更新展示部分樣式的代碼如圖所示。用CSS設置物流信息更新展示部分樣式的代碼699用CSS設置物流信息更新展示部分樣式的代碼700用CSS設置物流信息更新展示部分樣式的代碼701用CSS設置物流信息更新展示部分樣式的代碼702運行代碼，效果如圖所示。制作完物流信息更新展示部分的網(wǎng)頁效果703步驟四：制作訂單信息顯示部分。與之前項目十任務2中的訂單布局類似，具體html代碼如圖所示。訂單信息顯示部分結(jié)構(gòu)布局704訂單信息顯示部分結(jié)構(gòu)布局705訂單信息顯示部分結(jié)構(gòu)布局706訂單信息顯示部分結(jié)構(gòu)布局707訂單信息顯示部分結(jié)構(gòu)布局708訂單信息顯示部分結(jié)構(gòu)布局709訂單信息顯示部分結(jié)構(gòu)布局710訂單信息顯示部分結(jié)構(gòu)布局711用CSS設置訂單信息顯示部分的代碼，如圖所示。用CSS設置訂單信息顯示部分的代碼712用CSS設置訂單信息顯示部分的代碼713用CSS設置訂單信息顯示部分的代碼714用CSS設置訂單信息顯示部分的代碼715用CSS設置訂單信息顯示部分的代碼716用CSS設置訂單信息顯示部分的代碼717一、header標簽header標簽用于定義文檔或者文檔一部分區(qū)域的頁眉，可以作為介紹內(nèi)容或者導航列表的容器。在一個文檔中可以定義多個header標簽。header標簽具