項目七 列表樣式控制

07列表樣式控制389任務1制作輪播圖任務2繪制CSS圖形390制作輪播圖任務1391●掌握transform屬性的設置。392本任務將使用transform屬性來實現(xiàn)輪播圖及其指示器的定位，進而完成繽購樂食電子商務網(wǎng)站首頁制作。完成效果如圖所示。393繽購樂食電子商務網(wǎng)站首頁效果394步驟一：將全部內(nèi)容設為div，取名為“banner-nav”。盒子的寬度與瀏覽器同寬，設置為100%，高度為455像素。盒子里面包含一個輪播圖無序列表ul，還包含一個居中顯示的盒子div，取名為“nav-center”。具體代碼如圖所示。banner-nav代碼395接下來將盒子放置在父元素正中間的位置，這其中使用了一個定位技巧，就是先通過“l(fā)eft:50%”把盒子定位到父元素的中間位置，然后再通過平移代碼“transform:translate（-50%）”將.banner-nav向相反的方向平移50%，這樣就可以讓盒子居于父元素的正中間的位置。設置的CSS代碼如圖所示。396CSS代碼397運行上圖中的代碼，效果如圖所示。輪播區(qū)效果圖1398步驟二：在中間區(qū)域設置輪播圖圓點指示器。這里設計6個圓點，一般情況下，一個元素默認占據(jù)一個長方形的空間。要想把這個元素變?yōu)閳A形，首先這個元素必須是正方形，也就是寬度和高度要相等且為10像素。然后要設置一個屬性border-radius，當這個屬性值大于或等于正方形邊長的一半時，這個元素的形狀就變成了圓形。具體代碼如圖所示。399nav-center代碼400設置的CSS代碼如圖所示。CSS代碼401在進行具體編碼時，有三種方式可以表示顏色：一是用顏色的英文單詞，如white表示白色；二是用十六進制，如#FFFFFF表示白色；三是用RGB表示法，如（255，255，255）表示白色。402一、transform屬性在CSS3中，可以利用transform屬性來實現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動這四種類型的變化處理。transform屬性的基本語法格式如下。403transform的屬性值∕函數(shù)及其說明見表。transform的屬性值∕函數(shù)及其說明404二、rotate（）函數(shù)應用transform屬性的rotate（angle）函數(shù)可以實現(xiàn)2D旋轉(zhuǎn)。參數(shù)angle用于指定旋轉(zhuǎn)的角度，其值可取正或負。正值代表順時針旋轉(zhuǎn)，負值代表逆時針旋轉(zhuǎn)。在使用該函數(shù)之前，可以應用transform-origin（設置旋轉(zhuǎn)元素的基點位置）屬性定義變換的中心點。405三、scale（）函數(shù)應用transform屬性的scale（x，y）、scaleX（x）、scaleY（y）函數(shù)可以實現(xiàn)縮放。其中，scale（x，y）函數(shù)可以實現(xiàn)在X軸和Y軸上同時縮放，而后面的兩個函數(shù)則用于單獨實現(xiàn)在X軸或者Y軸上縮放。當使用scale（x，y）函數(shù)時，如果只指定一個參數(shù)，那么在X軸和Y軸都縮放參數(shù)所指定的比例。實現(xiàn)縮放的這三個函數(shù)的參數(shù)絕對值大于1，代表放大；參數(shù)絕對值小于1，代表縮小。當參數(shù)為負數(shù)時，對象反轉(zhuǎn)。當參數(shù)為1時，表示不進行縮放。406四、transform（）函數(shù)應用transform屬性的translate（x，y）、translateX（x）和translateY（y）函數(shù)可以實現(xiàn)2D平移。其中，translate（x，y）函數(shù)可以實現(xiàn)在X軸和Y軸上同時平移，而后面的兩個函數(shù)則用于單獨實現(xiàn)在X軸或者Y軸上平移。如果將translate（x，y）函數(shù)中的第一個參數(shù)設置為0，那么可以實現(xiàn)translateY（y）函數(shù)的效果；如果將第二個參數(shù)設置為0，那么可以實現(xiàn)translateX（x）函數(shù)的效果。407實現(xiàn)平移的這三個函數(shù)的參數(shù)值都是像素值，可以是正值，也可以是負值。X軸參數(shù)為正值時，代表向右移動；X軸參數(shù)為負值時，代表向左移動。Y軸參數(shù)為正值時，代表向下移動；Y軸參數(shù)為負值時，代表向上移動。408五、border-radius屬性首先寫一個div，這個div默認占據(jù)的是一個長方形的區(qū)域，取名為“circle”。在將它變?yōu)閳A形之前要確保它首先是一個正方形，所以設置它的寬度和高度相同。然后將這個正方形變成圓形，將正方形變成圓形的關鍵在于border-radius屬性值的大小，若此屬性值大于或等于邊長的一半，則該div將變成一個圓形形狀；若此屬性值小于邊長的一半，則該div將變成一個橢圓形狀。具體代碼如圖所示。409用border制作圓形的代碼繪制CSS圖形任務2

410●掌握用CSS繪制圖形的方法。411在網(wǎng)頁中，CSS圖形十分常見，各式各樣的CSS圖形可以使網(wǎng)頁的交互更加美觀，從而提高用戶的體驗滿意度。那么，CSS圖形是如何制作出來的呢？本任務將重點學習CSS圖形的制作，并對其進行詳細講解，從而使讀者達到在網(wǎng)頁設計中靈活運用CSS圖形的目的。下面將通過學習CSS圖形繪制，并結(jié)合無序列表、盒子模型等知識點來繼續(xù)完成繽購樂食電子商務網(wǎng)站首頁的制作。制作完成的網(wǎng)頁效果如圖所示。412413繽購樂食電子商務網(wǎng)站首頁414繽購樂食電子商務網(wǎng)站首頁415繽購樂食電子商務網(wǎng)站首頁416步驟一：在本項目任務1中已經(jīng)完成了首頁網(wǎng)頁的輪播圖效果，接下來完成首頁中剩下的部分。根據(jù)對網(wǎng)頁的分析，左側(cè)導航欄中每一項包含三項內(nèi)容：一張圖片、一段文字和一個右箭頭。這里用ul無序列表來進行布局，每個列表項包含以上三項內(nèi)容。導航菜單一共有10個菜單項，插入10對li標簽與之對應。具體代碼如圖所示。417導航菜單結(jié)構布局418導航菜單結(jié)構布局419這里將ul的寬度設置為148像素，每一個li的高度設置為46像素。每一個li列表項設置下邊框線，以達到與背景色形成對比效果的目的。具體CSS代碼如圖所示。無序列表樣式設置420無序列表樣式設置421制作左側(cè)導航欄后的網(wǎng)頁效果如圖所示。制作左側(cè)導航欄后的網(wǎng)頁效果422步驟二：接著要通過CSS代碼把圖片、文字、箭頭設置為垂直方向居中，水平方向?qū)R，并且使顏色搭配美觀。通過使用偽類，當光標懸停在某一項上的時候，背景變?yōu)榘咨淖肿優(yōu)樯钌?。具體CSS代碼如圖所示。用CSS代碼設置圖片、文字、箭頭及偽類423用CSS代碼設置圖片、文字、箭頭及偽類424步驟三：下面制作網(wǎng)頁中的今日推薦部分。使用div盒子模型布局，一個大盒子里面包含四個小盒子，每個小盒子包含對應的圖文內(nèi)容。具體代碼如圖所示。設置左側(cè)導航欄格式后的網(wǎng)頁效果425今日推薦區(qū)部分網(wǎng)頁結(jié)構布局426今日推薦區(qū)部分網(wǎng)頁結(jié)構布局427步驟四：為今日推薦部分的網(wǎng)頁元素設置CSS代碼。在html代碼中，大盒子取名為“recommen-dation”，寬度為1000像素。它里面包含的四個小盒子寬度均分，即每個小盒子寬度都為250像素，且每個小盒子里面都包含一張圖片和一段文字信息。這里需要注意，在為每個小盒子里面的元素做絕對定位時，一定不要忘記為它的父元素設置相對定位屬性，這樣子元素的絕對定位值才是相對于父元素的值。用CSS設置今日推薦部分樣式的代碼如圖所示。428用CSS設置今日推薦部分樣式的代碼429用CSS設置今日推薦部分樣式的代碼430用CSS設置今日推薦部分樣式的代碼431步驟五：下面制作網(wǎng)頁中活動區(qū)的部分。一個大盒子div中包含上下兩個子盒子，上面的子盒子只包含文字信息，下面的子盒子又包含四個小盒子，每一個小盒子的寬度為250像素。每一個小盒子里面有三個更小的盒子，更小的盒子里包含具體的文字和圖片信息。具體代碼如圖所示?；顒訁^(qū)部分網(wǎng)頁結(jié)構布局432活動區(qū)部分網(wǎng)頁結(jié)構布局433活動區(qū)部分網(wǎng)頁結(jié)構布局434步驟六：接著為活動區(qū)的網(wǎng)頁元素設置CSS代碼。最大的盒子命名為“activity”，上面的子盒子命名為“shopTitle”，下面的子盒子命名為“am-g”，下面的子盒子包含的四個小盒子都命名為“am-u-sm-3”。具體CSS代碼如圖所示。用CSS設置活動區(qū)網(wǎng)頁元素樣式的代碼435用CSS設置活動區(qū)網(wǎng)頁元素樣式的代碼436用CSS設置活動區(qū)網(wǎng)頁元素樣式的代碼437用CSS設置活動區(qū)網(wǎng)頁元素樣式的代碼438用CSS設置活動區(qū)網(wǎng)頁元素樣式的代碼439運行上圖中的代碼，活動區(qū)網(wǎng)頁效果如圖所示?；顒訁^(qū)網(wǎng)頁效果440步驟七：制作商品展示區(qū)甜品層。甜品層分為上下兩個盒子，下面的盒子中又包含五個子盒子。其中最左側(cè)的圖文盒子的樣式設置較其他四個圖文盒子風格不同，需要單獨設置樣式。右邊的四組圖文盒子風格一致，可以一起設置樣式。具體代碼如圖所示。甜品層網(wǎng)頁結(jié)構布局441甜品層網(wǎng)頁結(jié)構布局442甜品層網(wǎng)頁結(jié)構布局443甜品層網(wǎng)頁結(jié)構布局444甜品層網(wǎng)頁結(jié)構布局445甜品層網(wǎng)頁結(jié)構布局446步驟八：接著為甜品層設置CSS代碼。最左側(cè)的圖文盒子用到了CSS圓形技巧和折角技巧。具體CSS代碼設置如圖所示。用CSS設置商品展示區(qū)甜品層樣式的代碼447用CSS設置商品展示區(qū)甜品層樣式的代碼448用CSS設置商品展示區(qū)甜品層樣式的代碼449用CSS設置商品展示區(qū)甜品層樣式的代碼450用CSS設置商品展示區(qū)甜品層樣式的代碼451用CSS設置商品展示區(qū)甜品層樣式的代碼452用CSS設置商品展示區(qū)甜品層樣式的代碼453運行上圖中的代碼，網(wǎng)頁效果如圖所示。商品展示區(qū)甜品層網(wǎng)頁效果454步驟九：商品展示區(qū)甜品層下面是堅果層，堅果層的文字和圖片風格與甜品層風格一致，只是文字內(nèi)容和顏色選擇有一些變化，所以堅果層的樣式設置與甜品層可共用。具體代碼如圖所示。455商品展示區(qū)堅果層網(wǎng)頁結(jié)構布局456商品展示區(qū)堅果層網(wǎng)頁結(jié)構布局457商品展示區(qū)堅果層網(wǎng)頁結(jié)構布局458商品展示區(qū)堅果層網(wǎng)頁結(jié)構布局459商品展示區(qū)堅果層網(wǎng)頁結(jié)構布局460商品展示區(qū)堅果層網(wǎng)頁結(jié)構布局461堅果層與甜品層的樣式完全一樣，只是背景顏色有所區(qū)別，所以這里CSS的代碼只需要設置顏色的變化即可。具體設置如圖所示。用CSS設置商品展示區(qū)堅果層樣式的代碼462運行上圖中的代碼，網(wǎng)頁效果如圖所示。商品展示區(qū)堅果層網(wǎng)頁效果463商品展示區(qū)堅果層網(wǎng)頁效果464商品展示區(qū)堅果層網(wǎng)頁效果465步驟十：把“border:1pxsolidblue;”和“border:1pxsolidred;”這種幫助看盒子區(qū)域大小和位置的紅藍框線的代碼去掉，并把之前在注冊和登錄網(wǎng)頁制作的footer部分（即網(wǎng)頁底部部分）代碼添加到首頁中來，最終電子商務網(wǎng)站首頁的完整效果如圖所示。466繽購樂食電子商務網(wǎng)站首頁467繽購樂食電子商務網(wǎng)站首頁468繽購樂食電子商務網(wǎng)站首頁469一、使用border制作三角形三角形屬于常見的幾何圖形，在網(wǎng)頁設計中應用較為廣泛。在實際應用中，除了采用圖片來實現(xiàn)前端圖像展示外，純CSS代碼也可以實現(xiàn)圖像的繪制。這里使用CSS中的border屬性來繪制三角形。用border屬性繪制三角形是“一門傳統(tǒng)手藝”。由于瀏覽器對該屬性的支持性很好，幾乎沒有兼容性問題，主流的三角形繪制方案一般都基于border屬性來實現(xiàn)。470用border制作三角形的代碼下面通過圖詳細講解如何使用border制作三角形。471三角形效果運行上圖中的代碼，效果如圖所示。472二、使用border制作折疊三角形這里用一個案例來演示如何使用border制作一個折疊三角形。先在body里面寫一個div，并設置id的屬性值為“triangle2”，具體語法格式如下。473用border制作折疊三角形的代碼具體代碼如圖所示。474用border制作折疊三角形的代碼475折疊三角形效果運行上圖中的代碼，效果如圖所示。