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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

35、色”為#000000，“陰影模糊”為 5px。圖片，粘貼到第二列和第三列中，將圖片替換為“仿蘋果官網(wǎng)素材App 排行榜thimbleweedpark.jpg”和“仿蘋果官網(wǎng)素材App 排行榜apple_store.jpg”。第五步 預覽運行效果保存后預覽，運行效果如下圖所示。3.3.4 制作分割線在頁面中放入一個“區(qū)塊”組件，設置“高度”為 30px，設置“自定義樣式”屬性顯示背景圖片，圖片來源為“仿蘋果官網(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ū)在頁面中放入一個“區(qū)塊”組件，設置“寬度”為 980px，“對內(nèi)邊距”為 43px，“上內(nèi)邊距”為 28px。式”為，“左右第二步 顯示文字在第一步放入的區(qū)塊中，放入“文本”組件，設置“文本”為“熱門字間距”為 2px。App”，“文再放入“按鈕”組件，設置“文本”為“查看所有”，“預定義”為 link，“圖標”選擇icon 分組中的 icon-arrow-right-b，“圖標位置”為“”，“文字顏色”為#08c。第三步 顯示一行五列在第一步放入的區(qū)塊

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