項目七 列表樣式控制

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

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