《電子商務網(wǎng)頁設計與制作》 課件 項目7、8 列表樣式控制、頁面文字樣式控制

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圖形繪制，并結合無序列表、盒子模型等知識點來繼續(xù)完成繽購樂食電子商務網(wǎng)站首頁的制作。制作完成的網(wǎng)頁效果如圖所示。412413繽購樂食電子商務網(wǎng)站首頁414繽購樂食電子商務網(wǎng)站首頁415繽購樂食電子商務網(wǎng)站首頁416步驟一：在本項目任務1中已經(jīng)完成了首頁網(wǎng)頁的輪播圖效果，接下來完成首頁中剩下的部分。根據(jù)對網(wǎng)頁的分析，左側導航欄中每一項包含三項內(nèi)容：一張圖片、一段文字和一個右箭頭。這里用ul無序列表來進行布局，每個列表項包含以上三項內(nèi)容。導航菜單一共有10個菜單項，插入10對li標簽與之對應。具體代碼如圖所示。417導航菜單結構布局418導航菜單結構布局419這里將ul的寬度設置為148像素，每一個li的高度設置為46像素。每一個li列表項設置下邊框線，以達到與背景色形成對比效果的目的。具體CSS代碼如圖所示。無序列表樣式設置420無序列表樣式設置421制作左側導航欄后的網(wǎng)頁效果如圖所示。制作左側導航欄后的網(wǎng)頁效果422步驟二：接著要通過CSS代碼把圖片、文字、箭頭設置為垂直方向居中，水平方向?qū)R，并且使顏色搭配美觀。通過使用偽類，當光標懸停在某一項上的時候，背景變?yōu)榘咨?，文字變?yōu)樯钌＞唧wCSS代碼如圖所示。用CSS代碼設置圖片、文字、箭頭及偽類423用CSS代碼設置圖片、文字、箭頭及偽類424步驟三：下面制作網(wǎng)頁中的今日推薦部分。使用div盒子模型布局，一個大盒子里面包含四個小盒子，每個小盒子包含對應的圖文內(nèi)容。具體代碼如圖所示。設置左側導航欄格式后的網(wǎng)頁效果425今日推薦區(qū)部分網(wǎng)頁結構布局426今日推薦區(qū)部分網(wǎng)頁結構布局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)頁結構布局432活動區(qū)部分網(wǎng)頁結構布局433活動區(qū)部分網(wǎng)頁結構布局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ū)甜品層。甜品層分為上下兩個盒子，下面的盒子中又包含五個子盒子。其中最左側的圖文盒子的樣式設置較其他四個圖文盒子風格不同，需要單獨設置樣式。右邊的四組圖文盒子風格一致，可以一起設置樣式。具體代碼如圖所示。甜品層網(wǎng)頁結構布局441甜品層網(wǎng)頁結構布局442甜品層網(wǎng)頁結構布局443甜品層網(wǎng)頁結構布局444甜品層網(wǎng)頁結構布局445甜品層網(wǎng)頁結構布局446步驟八：接著為甜品層設置CSS代碼。最左側的圖文盒子用到了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)頁結構布局456商品展示區(qū)堅果層網(wǎng)頁結構布局457商品展示區(qū)堅果層網(wǎng)頁結構布局458商品展示區(qū)堅果層網(wǎng)頁結構布局459商品展示區(qū)堅果層網(wǎng)頁結構布局460商品展示區(qū)堅果層網(wǎng)頁結構布局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折疊三角形效果運行上圖中的代碼，效果如圖所示。476三、使用border-radius制作圓形首先寫一個div，這個div默認占據(jù)的是一個長方形的區(qū)域，取名為“circle”。在把它變?yōu)閳A形之前要確保它是一個正方形，所以設置它的寬度和高度相同。然后將這個正方形變成圓形，將正方形變成圓形的關鍵在于border-radius屬性值的大小，若此屬性值大于或等于邊長的一半，則該div將變成一個圓形形狀；若此屬性值小于邊長的一半，則該div將變成一個橢圓形狀。具體代碼如圖所示。477用border制作圓形的代碼478圓形效果運行上圖中的代碼，效果如圖所示。08頁面文字樣式控制479任務1制作網(wǎng)頁背景圖任務2設置網(wǎng)頁文本顯示樣式480制作網(wǎng)頁背景圖任務1481●1.掌握網(wǎng)頁背景圖像的設置?！?.掌握文本裝飾屬性的設置。482一般而言，網(wǎng)頁可通過背景圖像給用戶留下深刻的印象，如節(jié)日題材的網(wǎng)站一般會采用喜慶祥和的圖像來突出節(jié)日氛圍，所以在網(wǎng)頁設計中合理地運用背景顏色以及背景圖像至關重要。本任務主要通過使用CSS設置網(wǎng)頁背景圖像及運用文本裝飾屬性，再結合盒子模型來制作繽購樂食電子商務網(wǎng)站商品詳情網(wǎng)頁。最終網(wǎng)頁完成效果如圖所示。483484繽購樂食電子商務網(wǎng)站商品詳情頁面485步驟一：引入網(wǎng)頁的公共部分，它包含兩個部分，分別為網(wǎng)頁上方的搜索導航部分以及網(wǎng)頁下方的頁底部分，如圖所示。網(wǎng)頁公共部分效果圖486步驟二：設計并制作“網(wǎng)頁位置信息”和“商品詳情信息”左側的圖片區(qū)。主盒子的寬度仍然是1000像素，居于網(wǎng)頁中間位置?！熬W(wǎng)頁位置信息”區(qū)使用一個ul無序列表標簽來實現(xiàn)，每個列表項包含一段位置描述文字，該區(qū)橫向排列；“商品詳情信息”區(qū)左側包含一張大商品圖和三張小商品圖，三張小商品圖也使用ul無序列表標簽來實現(xiàn)，每個列表項包含一張小圖，該區(qū)也橫向排列。此時網(wǎng)頁結構具體代碼如圖所示。487“網(wǎng)頁位置信息”和“商品詳細信息”左側圖片區(qū)結構布局488“::after”為尾部偽類選擇器，它的作用是在標簽后面添加內(nèi)容。用CSS設置“網(wǎng)頁位置信息”樣式的代碼489用CSS設置“商品詳細信息”左側圖片樣式的代碼490運行上圖中的代碼，效果如圖所示。制作完“網(wǎng)頁位置信息”和“商品詳細信息”左側圖片區(qū)的網(wǎng)頁效果491步驟三：設計并制作“商品詳情信息”右側的商品價格部分。其主要結構是盒子模型，大盒子代表一行，小盒子包含一行中不同的文字內(nèi)容。具體代碼如圖所示。商品價格區(qū)結構布局492商品價格區(qū)結構布局493商品價格區(qū)結構布局494“點擊領券”指示箭頭的圖標為16像素寬、16像素高，圖片設置為8像素寬、8像素高，這里需要對background-size進行設置，讓圖片能夠根據(jù)設置空間給予的寬度和高度進行適應性縮放，設置background-size屬性為“background-size:100%100%；”。用CSS設置商品價格區(qū)樣式的代碼，如圖所示。495用CSS設置商品價格區(qū)樣式的代碼496用CSS設置商品價格區(qū)樣式的代碼497用CSS設置商品價格區(qū)樣式的代碼498運行上圖所示代碼，效果如圖所示。制作完商品價格區(qū)的網(wǎng)頁效果499步驟四：制作地址選擇區(qū)和銷量信息區(qū)。地址選擇區(qū)和銷量信息區(qū)結構布局500地址選擇區(qū)和銷量信息區(qū)結構布局501用CSS設置地址選擇區(qū)和銷量信息區(qū)樣式的代碼，如圖所示。用CSS設置地址選擇區(qū)和銷量信息區(qū)樣式的代碼502用CSS設置地址選擇區(qū)和銷量信息區(qū)樣式的代碼503運行上圖中的代碼，效果如圖所示。制作完地址選擇區(qū)和銷量信息區(qū)的網(wǎng)頁效果504步驟五：制作口味、包裝和數(shù)量選擇區(qū)。口味和包裝區(qū)均使用ul無序列表實現(xiàn)，數(shù)量選擇區(qū)主要使用input表單控件來實現(xiàn)。具體代碼如圖所示?？谖?、包裝和數(shù)量選擇區(qū)結構布局505口味、包裝和數(shù)量選擇區(qū)結構布局506口味和包裝的選項選中狀態(tài)使用類選擇器“.selected”來設置，選中狀態(tài)時會出現(xiàn)一個紅色對勾，此對勾實為一張三角形圖片，使用絕對定位將其定位到選項的右下角。用CSS設置口味、包裝和數(shù)量選擇區(qū)樣式的代碼如圖所示。用CSS設置口味、包裝和數(shù)量選擇區(qū)樣式的代碼507用CSS設置口味、包裝和數(shù)量選擇區(qū)樣式的代碼508用CSS設置口味、包裝和數(shù)量選擇區(qū)樣式的代碼509運行代碼，效果如圖所示。制作完成口味、包裝和數(shù)量選擇區(qū)的網(wǎng)頁效果510步驟六：制作“立即購買”和“加入購物車”按鈕，兩個按鈕均使用超鏈接a標簽來實現(xiàn)，具體代碼如圖所示。制作“立即購買”和“加入購物車”按鈕的代碼511用CSS代碼設置兩個按鈕樣式，如圖所示。用CSS設置“立即購買”和“加入購物車”按鈕樣式的代碼512用CSS設置“立即購買”和“加入購物車”按鈕樣式的代碼513運行代碼，效果如圖所示。“立即購買”和“加入購物車”按鈕效果514步驟七：制作優(yōu)惠套裝區(qū)?；舅悸愤€是使用無序列表ul，每個li列表項向左浮動來設置優(yōu)惠套裝區(qū)的布局。具體代碼如圖所示。優(yōu)惠套裝區(qū)結構布局515優(yōu)惠套裝區(qū)結構布局516此處需要注意應清除浮動，消除商品詳情區(qū)代碼產(chǎn)生的影響，清除浮動使用的代碼是“clear:both;”。用CSS設置優(yōu)惠套裝區(qū)樣式的代碼如圖所示。用CSS優(yōu)惠套裝樣式的代碼517用CSS優(yōu)惠套裝樣式的代碼518用CSS優(yōu)惠套裝樣式的代碼519用CSS優(yōu)惠套裝樣式的代碼520用CSS優(yōu)惠套裝樣式的代碼521一、background-position屬性的設置background-position屬性的默認值為“00”或“topleft”，即背景圖像位于元素的左上角。background-position屬性的取值有多種，具體情況如下。1.使用不同單位（最常用的是像素px）的數(shù)值：直接設置圖像左上角在元素中的坐標。5222.使用預定義的關鍵字：指定背景圖像在元素中的對齊方式。水平方向值：left、center、right。垂直方向值：top、center、bottom。兩個關鍵字的順序任意，若只有一個值，則另一個值默認為center。例如，center相當于centercenter（居中顯示），top相當于topcenter或centertop（水平居中且上對齊）。5233.使用百分比：按背景圖像和元素的指定點對齊。0%0%：圖像左上角與元素左上角對齊。50%50%：圖像50%50%的中心點與元素50%50%的中心點對齊。20%30%：圖像20%30%的點與元素20%30%的點對齊。100%100%：圖像右下角與元素右下角對齊，而不是圖像充滿元素。如果只有一個百分數(shù)，將作為水平值，垂直值則默認為50%。524二、text-decoration屬性的設置text-decoration屬性用于設置文本的下畫線、上畫線、刪除線等裝飾效果，其可用屬性值如下。1.none：沒有裝飾（正常文本默認值）。2.underline：下畫線。3.overline：上畫線。4.line-through：刪除線。text-decoration后可以賦多個值，用于給文本添加多種顯示效果。525下面通過案例講解利用text-decoration屬性設置下畫線，代碼如圖所示。text-decoration.html526在上圖所示代碼中定義了四個段落，使用text-decoration屬性分別對四個段落進行相應的設置。運行上圖中的代碼，效果如圖所示。文本裝飾效果設置網(wǎng)頁文本顯示樣式任務2

527●掌握CSS文本屬性的設置。528通過前面任務的學習，可以使用CSS設置文本的顯示樣式，從而讓網(wǎng)頁布局更加美觀。本任務主要通過使用CSS代碼設置文本相關屬性的樣式來美化繽購樂食電子商務網(wǎng)站商品詳情網(wǎng)頁。最終網(wǎng)頁效果如圖所示。529繽購樂食電子商務網(wǎng)站商品詳情網(wǎng)頁530繽購樂食電子商務網(wǎng)站商品詳情網(wǎng)頁531步驟一：制作商品介紹區(qū)左側其他商品推薦部分，此部分寬度為200像素，使用ul無序列表來實現(xiàn)，每個li列表項內(nèi)放置一件商品的圖文信息。具體代碼如圖所示。其他商品推薦區(qū)結構布局532其他商品推薦區(qū)結構布局533其他商品推薦區(qū)結構布局534其他商品推薦區(qū)結構布局535其他商品推薦區(qū)樣式代碼如圖所示。圖中的font-weight屬性用數(shù)值來設置，數(shù)值越大則字體越粗，用數(shù)值來控制的優(yōu)點是可以更精準地控制字體的粗細。用CSS設置其他商品推薦區(qū)樣式的代碼536運行代碼，效果如圖所示。其他商品推薦區(qū)網(wǎng)頁效果537步驟二：制作商品詳情介紹區(qū)部分。此部分的寬度為