仿蘋果官網(wǎng)案例講義

1、號后，進(jìn)入云臺(tái)，如下圖所示。2.2 制作小程序、APP2.2.1 創(chuàng)建點(diǎn)擊云臺(tái)左側(cè)菜單樹上的“小程序/APP/”菜單，頁面右側(cè)顯示“創(chuàng)建小程序”圖片和已創(chuàng)建小程序圖片，如下圖所示。l點(diǎn)擊“創(chuàng)建小程序”圖片創(chuàng)建一個(gè)新的小程序。l點(diǎn)擊已創(chuàng)建小程序圖片，進(jìn)入云制作臺(tái)制作已有小程序。2.2.2 預(yù)覽制作的頁面可以通過預(yù)覽看到更接近真實(shí)的運(yùn)行效果。在預(yù)覽前先保存，才能在預(yù)覽中看到最新的效果。l點(diǎn)擊“保存”按鈕保存頁面的編輯l點(diǎn)擊“預(yù)覽”按鈕，打開預(yù)覽頁面預(yù)覽頁面如下圖所示l中間是頁面運(yùn)行效果，l左側(cè)是頁面列表，點(diǎn)擊某個(gè)頁面直接運(yùn)行這個(gè)頁面l右側(cè)是兩個(gè)都可安裝，下面的用于apploader 到上，蘋果和安

2、卓按鈕“掃，可以在安裝 apploader 后，運(yùn)行 apploader，點(diǎn)擊上面的大描實(shí)現(xiàn)跳轉(zhuǎn)”，出現(xiàn)掃描界面，掃描預(yù)覽頁面中右側(cè)第一個(gè)上看到應(yīng)用的運(yùn)行效果預(yù)覽頁面是自動(dòng)刷新的，不用關(guān)閉這個(gè)預(yù)覽頁面，再點(diǎn)預(yù)覽按鈕。主要預(yù)覽頁面開著， 在制作區(qū)保存后，預(yù)覽頁面會(huì)自動(dòng)刷新。如果遇到不刷新的情況，也可以按瀏覽器的刷新按鈕手動(dòng)刷新。2.2.3 發(fā)布點(diǎn)擊云制作臺(tái)右上角的發(fā)布按鈕進(jìn)入發(fā)布頁面，根據(jù)頁面提示可發(fā)布為 APP，可下載小程序版本，在開發(fā)者工具中導(dǎo)入項(xiàng)目，即可在中看到小程序的運(yùn)行效果。2.3 制作 PC 網(wǎng)頁點(diǎn)擊云臺(tái)左側(cè)菜單樹上的“網(wǎng)頁”菜單，頁面右側(cè)顯示“創(chuàng)建網(wǎng)頁”圖片和已創(chuàng)建網(wǎng)頁圖片，如下圖

3、所示。制作和預(yù)覽網(wǎng)頁的方法同制作小程序。2.4 頁面制作區(qū)簡介頁面制作區(qū)如下圖所示，分為 5 個(gè)部分。l頂部的導(dǎo)航欄，可以切換到數(shù)據(jù)制作區(qū)，可以保存、預(yù)覽和發(fā)布l左上角的頁面欄，可以切換正在編輯的頁面l左下角的組件欄，選擇合適的組件放入到正在編輯的頁面中l(wèi)中間的設(shè)計(jì)區(qū)，編輯當(dāng)前頁面，可以放入組件，拖拽組件，設(shè)置組件的屬性l右側(cè)的屬性欄，在設(shè)計(jì)設(shè)置組件的屬性選中某個(gè)組件，屬性欄中顯示該組件的屬性，用于在設(shè)計(jì)放入組件有兩種方法，一種是先選中父組件，然后雙擊要添加的組件，另一種是先單擊組件，再在父組件中單擊。在設(shè)計(jì)拽?？梢灾苯油献ЫM件，不過為了拖拽到正確的位置，建議在“頁面結(jié)構(gòu)”中拖3 項(xiàng)目制作3.

4、1 創(chuàng)建項(xiàng)目進(jìn)入制作，點(diǎn)擊“制作”-“網(wǎng)頁”-“創(chuàng)建網(wǎng)頁”，如下圖所示。根據(jù)項(xiàng)目的需求選擇不同的模板，本項(xiàng)目選擇“流式布局空白模板”，如下圖所示。模板確定之后，創(chuàng)建網(wǎng)頁，根據(jù)提示輸入項(xiàng)目相關(guān)信息，如下圖所示。創(chuàng)建后就可以點(diǎn)擊“立即打開”進(jìn)入制作界面進(jìn)行項(xiàng)目開發(fā)，如下圖所示。進(jìn)入制作界面，如下圖。3.2 制作主頁新創(chuàng)建的項(xiàng)目有一個(gè)空白的頁面主頁，就是項(xiàng)目運(yùn)行的首頁。3.2.1 制作頁頭第一步 制作固定區(qū)域在頁面中放入“區(qū)塊”組件，設(shè)置“方式”為“固定”，“距離頂部”為 0px，“距離左邊”為 0px，“距離右邊”為 0px，“優(yōu)先級”為 100，如下圖所示。第二步 制作中灰色背景在第一步放入的區(qū)

5、塊中，再放入一個(gè)“區(qū)塊”組件，設(shè)置“高度”屬性為 40px，“行高”為 40px，“背景顏色”為#444，“字體大小”為 12px，“字體顏色”為#999999，如下圖所示。第三步 制作內(nèi)容區(qū)在第二步放入的區(qū)塊中，再放入一個(gè)“區(qū)塊”組件，設(shè)置“寬度”為 980px，“對式”為，“文字樣式”為右對齊，如下圖所示。第四步 顯示文字在第三步放入的區(qū)塊中，放入“文本”組件，設(shè)置“文本”為，如下圖所示。第五步 制作深灰色背景在第一步放入的區(qū)塊中，再放入一個(gè)“區(qū)塊”組件，設(shè)置“背景顏色”為#2d2d2d，“字體顏色”為#ffffff。第六步 制作內(nèi)容區(qū)在第五步放入的區(qū)塊中，再放入一個(gè)“區(qū)塊”組件，設(shè)置“寬

6、度”為 980px，“高度”屬性為 44px，“行高”為 44px，“對式”為。第七步 制作導(dǎo)航按鈕在第六步放入的區(qū)塊中，放入 3 個(gè)“按鈕”組件，如下圖所示。選中第一個(gè)按鈕，單擊“圖標(biāo)”中的按鈕，選擇 icon 分組中的 icon-social-apple 圖標(biāo)，如下圖所示。設(shè)置“預(yù)定義”屬性為 link，“按鈕展示形式”為“只顯示圖標(biāo)”，“”為“大按鈕”，“寬度”為 90px，“文字顏色”為#ffffff，“左內(nèi)邊距”為 0px，如下圖所示。設(shè)置第二個(gè)按鈕的設(shè)置“文本”為 Mac，“預(yù)定義”為 link，“寬度”為 110px，“文字顏色”為#ffffff。設(shè)置第三個(gè)按鈕的設(shè)置“文本”為

7、iPad，“預(yù)定義”為 link，“寬度”為 110px，“文字顏色”為#ffffff。右擊 Mac 按鈕，彈出快捷菜單，選擇“”菜單命令，如下圖所示。右擊第六步放入的區(qū)塊，彈出快捷菜單，選擇”粘貼“菜單命令，如下圖所示，后的效果如下圖所示。修改“文本”為，作為第四個(gè)按鈕。再按鈕，修改“文本”為 Watch，作為第五個(gè)按鈕，再按鈕，修改“文本”為 Music，作為第六個(gè)按鈕，再按鈕，修改“文本”為“技術(shù)支持”，“文字大小”為 12px，作為第七個(gè)按鈕。第一個(gè)按鈕（蘋果圖標(biāo)按鈕），修改“圖標(biāo)”為 icon-ios7-search-strong，如下圖所示。“寬度”為 100px，清空“左內(nèi)邊距”

8、，作為第八個(gè)按鈕，再第一個(gè)按鈕，修改“圖標(biāo)”為 icon-bag，如下圖所示?！拔淖謽邮健睘椤坝覍R”，清空“左內(nèi)邊距”，設(shè)置“右內(nèi)邊距”為 0px，作為第九個(gè)按鈕。第八步 預(yù)覽運(yùn)行效果點(diǎn)擊屏幕右上角的“保存”按鈕，保存后點(diǎn)擊“預(yù)覽”按鈕，查看運(yùn)行效果。如下圖所示。預(yù)覽后在瀏覽器中會(huì)顯示新的頁，在頁面中顯示出運(yùn)行效果，如下圖所示。左側(cè)顯示項(xiàng)目中的頁面，可以點(diǎn)擊“項(xiàng)目目錄”右邊的按鈕，隱藏左側(cè)區(qū)域。3.2.2 制作限時(shí)第一步 制作黑色背景在頁面中放入“區(qū)塊”組件，設(shè)置“背景顏色”屬性為#000000，“下邊框”為實(shí)線 12px，顏色#222，“上外邊距”為 84px，“上下內(nèi)邊距”為 51px，

9、如下圖所示。第二步 制作內(nèi)容區(qū)在第一步放入的區(qū)塊中，再放入一個(gè)“區(qū)塊”組件，設(shè)置“寬度”為980px，“對式”為，“文字樣式”為“對齊”，“文字顏色”為#ffffff。第三步 顯示內(nèi)容在第二步放入的區(qū)塊中，放入“文本”組件。設(shè)置“文本”為“限時(shí)”，“是否可見”為 inline-block，“文字顏色”為#bbb，“邊框”為 1px #bbb 實(shí)線，“圓角角度”為 5px，“上下內(nèi)邊距”為 4px，“左右內(nèi)邊距”為 15px。在第二步放入的區(qū)塊中，再放入“區(qū)塊”組件。設(shè)置“文字樣式”為“內(nèi)邊距”為 15px，“下內(nèi)邊距”為 10px。對齊”，“上在剛放入的區(qū)塊中，再放入 3 個(gè)文本組件，設(shè)置第一

10、個(gè)文本組件的“文本”為“折抵換購，X”，“文字大小”為 30px ，在“文字樣式”中選擇 B。設(shè)置第二個(gè)文本組件的“文本”為“R”，“文字大小”為 24px“文本”為“僅 RMB 4399 起，在“文字樣式”中選擇 B。設(shè)置第三個(gè)文本組件的Xs 僅 RMB 6599 起*。”，“文字大小”為 30px ，在“文字樣式”中選擇 B，“左外邊距”為 2px。在第二步放入的區(qū)塊中，再放入“文本”組件。設(shè)置“文本”為“前往附近的 Apple Store零售店，手上的升級換購成一個(gè)新的，時(shí)機(jī)正好?！?，“是否可見”為 block，“文字大小”為 20px，“下內(nèi)邊距”為 10px。在第二步放入的區(qū)塊中，放

11、入“按鈕”組件，設(shè)置“文本”為“查找零售店”，“預(yù)定義”為 link，圖標(biāo)選擇 linear 分組下的 linear-chevronright，設(shè)置“圖標(biāo)位置”為“大小”為 18px，“文字顏色”為#66bbff?！?，“文字第四步 預(yù)覽運(yùn)行效果保存后預(yù)覽，運(yùn)行效果如下圖所示。3.2.3 制作XR第一步 制作黑色背景在頁面中放入“區(qū)塊”組件，設(shè)置“背景顏色”屬性為#000000，“下邊框”為實(shí)線 12px，顏色#222，“上內(nèi)邊距”為 51px。第二步 制作內(nèi)容區(qū)在第一步放入的區(qū)塊中，再放入一個(gè)“區(qū)塊”組件，設(shè)置“寬度”為980px，“對式”為，“文字樣式”為“對齊”，“文字顏色”為#fffff

12、f。第三步 顯示內(nèi)容在第二步放入的區(qū)塊中，放入“圖片”組件，如下圖所示。單擊“圖像 URL”右側(cè)的按鈕，打開屬性編輯器，單擊“上傳至當(dāng)前目錄”按鈕，如下圖所示。選擇“仿蘋果官網(wǎng)素材官網(wǎng)_xr_logo.png”圖片，圖片上傳至云服務(wù)器，并顯示在界面中，單擊圖片，圖片左上角出現(xiàn)綠色對勾，表示圖片被選中，單擊確定按鈕，如下圖所示。選擇的圖片在設(shè)計(jì)器中了，如下圖所示。在第二步放入的區(qū)塊中，再放入“文本”組件。設(shè)置“文本”為“全面屏設(shè)計(jì)，上最強(qiáng)的電池續(xù)航，出類拔萃的性能，”，“是否可見”為 block，“文字大小”為 22px，“上內(nèi)邊距”為 15px。在第二步放入的區(qū)塊中，再放入“文本”組件，設(shè)置“

13、文本”為“以及影棚質(zhì)感的效果?！?，“是否可見”為 block，“文字大小”為 22px，“上內(nèi)邊距”為 5px，“下內(nèi)邊距”為10px。添加的按鈕組件（查找零售店），在第二步放入的區(qū)塊中粘貼 2 次，修改“文本”為“進(jìn)一步了解”和“”第四步 顯示圖片在第一步放入的區(qū)塊中，放入“圖片”組件，圖片來源為“仿蘋果官網(wǎng)素材官網(wǎng)_xr_large.jpg”，“對式”為“”，“上外邊距”為 20px。第五步 預(yù)覽運(yùn)行效果保存后預(yù)覽，運(yùn)行效果如下圖所示。3.2.4 制作XS第一步并修改第一添加的區(qū)塊，在頁面中粘貼。第一個(gè)圖片的圖片來源為“仿蘋果官網(wǎng)素材官網(wǎng)_xs_logo.png”；第二個(gè)圖片的圖片來源為“

14、仿蘋果官網(wǎng)素材官網(wǎng)_xs_large.jpg”；刪除一個(gè)文本組件，將剩余的那個(gè)文本組件的“文本”改為“上最大的超視網(wǎng)膜顯示屏，性能出類拔萃的 A12 仿生，安全性更進(jìn)一步的面容 ID，以及支持景深的突破性雙鏡頭系統(tǒng)。”，設(shè)置“寬度”為 620px，“對內(nèi)邊距”為 10px。式”為，“上內(nèi)邊距”為 15px，“下第二步 預(yù)覽運(yùn)行效果保存后預(yù)覽，運(yùn)行效果如下圖所示。3.2.5 制作商品列表第一步 制作白色背景在頁面中放入“區(qū)塊”組件，設(shè)置“文字顏色”為#111。第二步 制作第一行在第一步放入的區(qū)塊中，添加“行列”組件，如下圖所示。設(shè)置“背景顏色”為#fafafa，“上外邊距”為 6px，刪除一列，

15、保留兩列，如下圖所示，設(shè)置每列的列寬樣式為“非常小 6/12”，如下圖所示。設(shè)置第一列的“文字樣式”為“對齊”。在行列組件的第一列中，添加 1 個(gè)“圖片”組件，1 個(gè)“文本組件和 2 個(gè)”按鈕“組件。設(shè)置圖片組件的圖片來源為“仿蘋果官網(wǎng)素材官網(wǎng)apple_watch_logo.jpg”，“對式”為“”，“上外邊距”為 250px。設(shè)置文本組件的“文本”為“煥然一新，喚醒更好的你”，“是否可見”為 block，“文字大小”為 22px。“文字樣式”為“對齊”，“上內(nèi)邊距”為 15px，“下內(nèi)邊距”為 8px。中放入的兩個(gè)按鈕“進(jìn)一步了解”和“”，“文字顏色”改為#0070c9。在行列組件的第二列

16、中，放入“圖片”組件。圖片來源為“仿蘋果官網(wǎng)素材官網(wǎng)apple_watch_large.jpg”。第三步 制作第二行在第二放入的行列組件，粘貼到在第一步放入的區(qū)塊中。設(shè)置“左上右外邊距”為 12px，設(shè)置第一列的“上內(nèi)邊距”為 50px，在第一列中添加文本組件，調(diào)整組件的順序。設(shè)置第一個(gè)文本組件的“文本”為 iPad Pro，“文字大小”為 34px，“文字樣式”為加粗。設(shè)置第二個(gè)文本組件的“文本”為“全新，全面屏，全方位強(qiáng)大”，“是否可見”為 block，“文字大小”為 17px，“文字樣式”為“對齊”清空 2 個(gè)按鈕組件的“文字大小”屬性。圖片組件的圖片來源改為“仿蘋果官網(wǎng)素材官網(wǎng)ipad

17、_pro_large.jpg”，設(shè)置“對式”為，“上外邊距”為 50px。刪除第二列，第一列為新的第二列。設(shè)置“左邊框”為 12px 白色實(shí)線，修改其中的文本和圖片。文本改為 MacBook Air 和“輕輕地，再次傾心”。圖片來源改為“仿蘋果官網(wǎng)素材官網(wǎng)macbook_air_large.jpg”，圖片的“上外邊距”改為 100px。第四步 制作第三行在第三放入的行列組件，粘貼到在第一步放入的區(qū)塊中。第一列中的組件設(shè)置如下：設(shè)置第一個(gè)文本組件的“文本”為 AirPods。設(shè)置第二個(gè)文本組件的“文本”為“無線，無繁瑣，只有妙不可言”。圖片組件的圖片來源改為“仿蘋果官網(wǎng)素材官網(wǎng)airpods_l

18、arge.jpg”。第二列中的組件設(shè)置如下：設(shè)置第一個(gè)文本組件的“文本”為“2018 年度精選”。設(shè)置第二個(gè)文本組件的“文本”年度的 app 和佳作，等你來體驗(yàn)”。刪除 1 個(gè)按鈕組件，修改剩余的按鈕組件的“文本”為“到 App Store 里看看”。圖片組件的圖片來源改為“仿蘋果官網(wǎng)素材官網(wǎng)best_of_large.jpg”。第五步 制作第四行在第三放入的行列組件，粘貼到在第一步放入的區(qū)塊中。設(shè)置行列組件的“下外邊距”為 12px，設(shè)置列的“高度”為 580px，第一列的“方式”為“相對”。為兩列分別增加背景圖片，通過自定義樣式實(shí)現(xiàn)。選中第一列，單擊“自定義樣式”右側(cè)的按鈕，打開自定義樣式

19、編輯器。單擊“通用樣式”右側(cè)的“添加”按鈕，輸入樣式“名稱”，如下圖所示。在“背景圖片”中選擇已上傳的“仿蘋果官網(wǎng)素材官網(wǎng)apple_music_large.jpg”圖片，在“是否重復(fù)”中選擇 no-repeat，在“背景位置”中選擇 center center。選中樣式列表中選擇復(fù)選框，單擊確定按鈕添加自定義樣式，如下圖所示。樣式的 CSS 代碼如下：background-image:url(./images/apple_music_large.jpg);background-repeat:no-repeat;background-position:center center;選中第二列，設(shè)

20、置“自定義樣式”，如下圖所示。樣式的 CSS 代碼如下：background-image:url(./images/mac_mini_large.jpg);background-repeat:no-repeat;background-position:center center;調(diào)整每列中的文本和圖片組件。第一列中的組件設(shè)置如下：設(shè)置文本組件的“文本”為“海量歌曲，敬請沉醉”，“文字顏色”為#ffffff，“上內(nèi)邊距”為 10px。設(shè)置 2 個(gè)按鈕的“文字顏色”為#ffffff，設(shè)置其中一個(gè)按鈕組件的“文本”為“用*”。試設(shè)置第一個(gè)圖片組件的圖片來源為“仿蘋果官網(wǎng)素材官網(wǎng) music_logo

21、.png”。設(shè)置第二個(gè)圖片組件的圖片來源為“仿蘋果官網(wǎng)素材官網(wǎng) icon_apple_music.png”，“定位方式”為“絕對”，“距離下邊”為 8%，“距離左邊”為 47%。第二列中的組件設(shè)置如下：設(shè)置第一個(gè)文本組件的“文本”為“Mac Mini”，“文字顏色”為#ffffff。設(shè)置第二個(gè)文本組件的“文本”為“全身大改造。”，“文字顏色”為#ffffff。設(shè)置 2 個(gè)按鈕的“文字顏色”為#66bbff。第六步 預(yù)覽運(yùn)行效果保存后預(yù)覽，運(yùn)行效果如下圖所示。3.2.6 制作頁腳第一步 制作淺灰色背景在頁面中放入“區(qū)塊”組件，設(shè)置“背景顏色”為#f2f2f2。第二步 制作內(nèi)容區(qū)在第一步放入的區(qū)塊

22、中，再放入一個(gè)“區(qū)塊”組件，設(shè)置“寬度”為式”為。980px，“對第三步 顯示兩行文本在第二步放入的區(qū)塊中，再放入一個(gè)“區(qū)塊”組件，設(shè)置“文字大小”為 10px，“文字顏色”為#888，“下邊框”為 1px #d6d6d6 實(shí)線，“上內(nèi)邊距”為 15px，“下內(nèi)邊距”為 20px。再剛放入的區(qū)塊中放入 2 個(gè)“文本”組件，設(shè)置第一個(gè)文本組件的“文本”為“* 所示的XR 64GB 機(jī)型和XS 64GB 機(jī)型價(jià)格是使用活動(dòng)截止日期為 2019 年 1 月7 Plus 32GB 機(jī)型進(jìn)行31 日。折抵金額僅可在限定折抵換購的價(jià)格。本限時(shí) 時(shí)間內(nèi)使用，并且要求用于狀況、配置及制造年份。此新，以限制條款

23、為準(zhǔn)。實(shí)際折抵金額取決于設(shè)備的僅適用于在Apple Store 零售店內(nèi)進(jìn)行折抵換購，并不適用于 Apple商店。Apple Store 零售店和 Apple商店的折抵價(jià)值可能有所不同。年滿18 周歲及以上者才能享受此項(xiàng)折抵換購服務(wù)。店內(nèi)折抵換購需出示頒發(fā)并附有的有效件 (當(dāng)?shù)胤煽赡軙?huì)要求該信息)?？赡苄枰袷?Apple 或 Apple 折抵服務(wù)合作伙伴的其他條款?！?，“是否可見”為 block，“下內(nèi)邊距”為 10px。設(shè)置第二個(gè)文本組件的“文本”為“* 僅限新訂閱用戶。當(dāng)試用期結(jié)束后，會(huì)員方案將按月自動(dòng)續(xù)訂。”第四步 制五列在第二步放入的區(qū)塊中，再放入一個(gè)“區(qū)塊”組件，設(shè)置“文字大小”

24、為 11px，“上內(nèi)邊距”為 20px。再剛放入的區(qū)塊中放入“行列”組件，刪除 2 列，保留 1 列，設(shè)置列的列寬為“非常小2/12”.在列中添加 1 個(gè)文本和 1 個(gè)按鈕。設(shè)置文本組件的“文本”為“選購及了解”，“是否可見”為 block，“文字樣式”為加粗，“下內(nèi)邊距”為 10px。設(shè)置按鈕組件的“文本”為 Mac，“預(yù)定義”為 link，“是否可見”為 block，“文字大小”為 12px，“文字樣式”為左對齊，“文字顏色”為#888，“左內(nèi)邊距”為 0px。這個(gè) Mac 按鈕，在第一列中粘貼 11 次，依次修改按鈕的文本為“iPad”“Watch”“Music”“iTunes”“Hom

25、ePod”“iPod touch”“配件”“App Store 充值卡”。”將做好的第一列，本和按鈕。為行列組件的第二列、第三列、第四列和第五列。修改其中的文第五步 顯示三行文本在第二步放入的區(qū)塊中，再放入一個(gè)“區(qū)塊”組件，設(shè)置“文字大小”為 10px，“文字顏色”為#888，“上內(nèi)邊距”為 35px，“下內(nèi)邊距”為 20px。再剛放入的區(qū)塊中放入 2 個(gè)“區(qū)塊”組件和 1 個(gè)“文本”組件。設(shè)置文本組件的“文本”為“京網(wǎng)安備 11010502008968 京 ICP 備 10214630 營業(yè)執(zhí)照”，“是否可見”為 block，“文字顏色”為#666，“上內(nèi)邊距”為 10px。設(shè)置第一個(gè)區(qū)塊組

26、件的“下邊框”為 1px #d6d6d6 實(shí)線，“下外邊距”為 7px，“下內(nèi)邊距”為 8px。在這個(gè)區(qū)塊中放入 2 個(gè)文本組件和 2 個(gè)按鈕組件，設(shè)置文本組件的“文本”分別為“更多選購方式：前往”和“，致電設(shè)置按鈕組件的“文本”分別為“Apple或查找在你附近的”，“下內(nèi)邊距”均為 8px。Store 零售店”和“經(jīng)銷商”，“預(yù)定義”均為link，“文字大小”均為 10px，“文字顏色”均為#0070c9，“左右內(nèi)邊距”均為 0px。在第二個(gè)區(qū)塊中添加 6 個(gè)文本組件，設(shè)置文本組件的“文本”分別為“Copyright 2019Apple Inc. 保留所利。”“隱私政策”“使用條款”“銷售政

27、策”“法律信息”“地圖”，其中第一個(gè)文本組件的“右外邊距”為 30px，其余 5 個(gè)文本的“文字顏色”均為#555，中間 4 個(gè)文本的“右邊框”均為 1px #d6d6d6 實(shí)線，“右外邊距”均為 7px，“右內(nèi)邊距”均為 10px。第六步 預(yù)覽運(yùn)行效果保存后預(yù)覽，運(yùn)行效果如下圖所示。3.3 制作排行榜頁排行榜頁是從主頁打開的頁面。因此需要新建一個(gè)頁面。3.3.1 新增頁面點(diǎn)擊在默認(rèn)分組右邊的+按鈕，彈出“添加頁面”框。在“添加頁面”框的“頁面名稱”輸入框中輸入“App 排行榜”，如下圖所示，點(diǎn)擊確定按鈕，創(chuàng)建排行榜頁面。3.3.2 制作頁頭第一步頁頭將“3.2.1 制作頁頭”一節(jié)中制作的內(nèi)容

28、到排行榜頁面中。第二步 添加本頁頁頭在過來的區(qū)塊中，再添加一個(gè)“區(qū)塊”組件，設(shè)置“對式”為“”，“寬度”為 980px，“背景顏色”為#ffffff，“下邊框”為 1px #d6d6d6 實(shí)線。在區(qū)塊中添加“行列”組件，設(shè)置“高度”為 52px，“行高”為 52px，刪除 1 列，保留2 列，設(shè)置每列的列寬為 6/12，設(shè)置第二列的“文字樣式”為“右對齊”。在第一列中放入“文本”組件，設(shè)置“文本”為“iTunes”，“文字大小”為 26px，“文字顏色”為#333。在第二列中放入“按鈕”組件，設(shè)置“文本”為“概覽”，“預(yù)定義”為 link，“文字大小”為 10px，“文字顏色”為#333。這個(gè)

29、按鈕，并將“文本”改為“音樂”。在第二列中再放入“文本”組件，設(shè)置“文本”為“App Store 排行榜”，“文字大小”為 10px，“文字顏色”為#cccccc，“右外邊距”為 10px。在第二列中再放入“按鈕”組件，設(shè)置“文本”為“文字大小”為 10px，“文字顏色”為#ffffff，“邊框”為 1px 10px，“上下內(nèi)邊距”為 2px?！?，“背景顏色”為#2189db，#07c 實(shí)線，“左右內(nèi)邊距”為第三步 預(yù)覽運(yùn)行效果保存后預(yù)覽，運(yùn)行效果如下圖所示。3.3.3 制作 App 排行榜第一步 制作內(nèi)容區(qū)在頁面中放入一個(gè)“區(qū)塊”組件，設(shè)置“寬度”為 980px，“對式”為，“文字樣式”為“

30、對齊”，“上外邊距”為 136px，“上內(nèi)邊距”為 50px。第二步 顯示 3 行文字在第一步放入的區(qū)塊中，放入“文本”組件，設(shè)置“文本”為“App Store 排行榜”，“是否可見”為 block?！拔淖执笮　睘?44px，“文字間距”為 2px，“下外邊距”為 10px。再放入“文本”組件，設(shè)置“文本”為“App Store 總有源源不斷的涌現(xiàn)。在這內(nèi)容?！?，“是否可里，你可以了解本周的全，并瀏覽排行榜前 100 位的 app 及見”為 block?！拔淖执笮　睘?16px，“文字顏色”為#404040，“下外邊距”為 10px，“左右內(nèi)邊距”為 150px。再放入“按鈕”組件，設(shè)置“文本

31、”為“立即前往 App Store 選購”，“預(yù)定義”為 link，“圖標(biāo)”選擇右箭頭圖標(biāo)，“圖標(biāo)位置”為“#0088cc，“下外邊距”為 10px?！?，“文字大小”為 16px，“文字顏色”為第三步 顯示按鈕等在第一步放入的區(qū)塊中，放入“區(qū)塊”組件，設(shè)置“背景顏色”為#e6e6e6，“文字大小”為 14px，“文字樣式”為加粗，“上下外邊距”為 30px，“內(nèi)邊距”為 13px。在區(qū)塊中放入“按鈕”組件，設(shè)置“文本”為“精選”，“陰影顏色”為#444444，“陰影模糊”為 2px，“圓角角度”為 12px，“背景顏色”為#989898，“文字樣式”為加粗，“文字顏色”為#ffffff，“邊框

32、”為 1px #4c4c4c 實(shí)線，“右外邊距”為 10px，“上下內(nèi)邊距”為 4px，“左右內(nèi)邊距”為 12px。在區(qū)塊中放入 2 個(gè)“文本”組件，分別設(shè)置“文本”為“右外邊距”為 10px。App”和“App”，第四步 顯示圖片在第一步放入的區(qū)塊中，放入“區(qū)塊”組件，設(shè)置“方式”為“相對”。在區(qū)塊中，放入“行列”組件，設(shè)置“左右內(nèi)邊距”為 15px。設(shè)置第一列的寬度樣式為 2/12，“高度”為 478px，設(shè)置“自定義樣式”屬性顯示背景圖片，圖片來源為“仿蘋果官網(wǎng)素材App 排行榜left_scrim.png”，如下圖所示。CSS 代碼如下：background-image:url(./i

33、mages/left_scrim.png);background-repeat:no-repeat;background-position:top left;設(shè)置第三列的寬度樣式為 2/12，“高度”為 478px，“左內(nèi)邊距”為 0px，設(shè)置“自定義樣式”屬性顯示背景圖片，圖片來源為“仿蘋果官網(wǎng)素材App如下圖所示。排行榜right_scrim.png”，CSS 代碼如下：background-image:url(./images/right_scrim.png);background-repeat:no-repeat;background-position:top right;設(shè)置第二列的

34、寬度樣式為 8/12.在第二列中添加文本組件，設(shè)置“文本”為“精選“文字顏色”為#999999，“下外邊距”為 8px。+ App”，“是否可見”為 block，在第二列中添加“區(qū)塊”組件，設(shè)置“寬度”為 680px。在區(qū)塊中添加“圖片”組件，圖片來源為“仿蘋果官網(wǎng) 素材App 排行榜 art_of_conquest.jpg”，“陰影顏色”為#000000，“陰影模糊”為 5px，“下外邊距”為 20px。在區(qū)塊中添加“行列”組件。設(shè)置第一列和第二列的“分割線”為“在右側(cè)”。在第一列中添加“ 圖片” 組件。圖片來源為“ 仿蘋果官網(wǎng) 素材App 排行榜stormbound.jpg”，設(shè)置“陰影顏

35、色”為#000000，“陰影模糊”為 5px。圖片，粘貼到第二列和第三列中，將圖片替換為“仿蘋果官網(wǎng)素材App 排行榜thimbleweedpark.jpg”和“仿蘋果官網(wǎng)素材App 排行榜apple_store.jpg”。第五步 預(yù)覽運(yùn)行效果保存后預(yù)覽，運(yùn)行效果如下圖所示。3.3.4 制作分割線在頁面中放入一個(gè)“區(qū)塊”組件，設(shè)置“高度”為 30px，設(shè)置“自定義樣式”屬性顯示背景圖片，圖片來源為“仿蘋果官網(wǎng)素材App 排行榜driver_up.png”，如下圖所示。CSS 代碼如下：background-image:url(./images/driver_up.png);background

36、-repeat:no-repeat;background-position:bottom center;3.3.5 制作熱門第一步 制作內(nèi)容區(qū)在頁面中放入一個(gè)“區(qū)塊”組件，設(shè)置“寬度”為 980px，“對內(nèi)邊距”為 43px，“上內(nèi)邊距”為 28px。式”為，“左右第二步 顯示文字在第一步放入的區(qū)塊中，放入“文本”組件，設(shè)置“文本”為“熱門字間距”為 2px。App”，“文再放入“按鈕”組件，設(shè)置“文本”為“查看所有”，“預(yù)定義”為 link，“圖標(biāo)”選擇icon 分組中的 icon-arrow-right-b，“圖標(biāo)位置”為“”，“文字顏色”為#08c。第三步 顯示一行五列在第一步放入的區(qū)塊

37、中，放入“行列”組件（行列 A），設(shè)置“下邊框”為 1px #d6d6d6實(shí)線，“上內(nèi)邊距”為 8px，“下內(nèi)邊距”為 24px。刪除 2 列，保留 1 列，設(shè)置列的“寬度”為 20%。在列中再添加“行列”組件（行列 B），刪除 1 列，保留 2 兩列，設(shè)置第一列的列寬為1/12，第二列的列寬為 10/12.在第一列中放入“文本”組件，設(shè)置“文本”為“1.”，在第二列中放入“圖片”組件，圖片來源為“仿蘋果官網(wǎng)素材App 排行榜“陰影顏色”為#000000，“陰影模糊”為 3px，“圓角角度”為 15px.jpg”，在第二列中放入“文本”組件，設(shè)置“文本”為“短- 好玩的”，“是否可見”為 block，“文字大小”為 12px，“文字樣式”為加粗，“文字顏色”為#4c4c4c，“上外邊距”為 10px。在第二列中再放入“