資源簡介

(共90張PPT)
07列表樣式控制任務 1 制作輪播圖任務 2 繪制 CSS 圖形制作輪播圖任務 1● 掌握 transform 屬性的設置。本任務將使用 transform 屬性來實現輪播圖及其指示器的定位，進而完成繽購樂食電子商務網站首頁制作。完成效果如圖所示。繽購樂食電子商務網站首頁效果步驟一：將全部內容設為 div，取名為“ banner-nav”。盒子的寬度與瀏覽器同寬，設置為 100%，高度為 455 像素。盒子里面包含一個輪播圖無序列表 ul，還包含一個居中顯示的盒子 div，取名為“nav-center”。具體代碼如圖所示。banner-nav 代碼接下來將盒子放置在父元素正中間的位置，這其中使用了一個定位技巧，就是先通過 “ left:50%”把盒子定位到父元素的中間位置，然后再通過平移代碼“ transform:translate（-50%）”將 .banner-nav 向相反的方向平移 50%，這樣就可以讓盒子居于父元素的正中間的位置。設置的 CSS 代碼如圖所示。CSS 代碼運行上圖中的代碼，效果如圖所示。輪播區效果圖 1步驟二：在中間區域設置輪播圖圓點指示器。這里設計 6 個圓點，一般情況下，一個元素默認占據一個長方形的空間。要想把這個元素變為圓形，首先這個元素必須是正方形，也就是寬度和高度要相等且為 10 像素。然后要設置一個屬性 border-radius，當這個屬性值大于或等于正方形邊長的一半時，這個元素的形狀就變成了圓形。具體代碼如圖所示。nav-center 代碼設置的 CSS 代碼如圖所示。CSS 代碼在進行具體編碼時，有三種方式可以表示顏色：一是用顏色的英文單詞，如 white 表示白色；二是用十六進制，如 #FFFFFF 表示白色；三是用 RGB 表示法，如（255，255，255）表示白色。一、transform 屬性在 CSS 3 中，可以利用 transform 屬性來實現文字或圖像的旋轉、縮放、傾斜、移動這四種類型的變化處理。transform 屬性的基本語法格式如下。transform 的屬性值∕函數及其說明見表。transform 的屬性值∕函數及其說明二、rotate（ ）函數應用 transform 屬性的 rotate（angle）函數可以實現 2D 旋轉。參數 angle 用于指定旋轉的角度，其值可取正或負。正值代表順時針旋轉，負值代表逆時針旋轉。在使用該函數之前，可以應用 transform-origin（設置旋轉元素的基點位置）屬性定義變換的中心點。三、scale（ ）函數應用 transform 屬性的 scale（x，y）、scaleX（x）、scaleY（y）函數可以實現縮放。其中，scale（x，y）函數可以實現在 X 軸和 Y 軸上同時縮放，而后面的兩個函數則用于單獨實現在X 軸或者 Y 軸上縮放。當使用 scale（x，y）函數時，如果只指定一個參數，那么在 X 軸和 Y軸都縮放參數所指定的比例。實現縮放的這三個函數的參數絕對值大于 1，代表放大；參數絕對值小于 1，代表縮小。當參數為負數時，對象反轉。當參數為 1 時，表示不進行縮放。四、transform（ ）函數應用 transform 屬性的 translate（x，y）、translateX（x）和 translateY（y）函數可以實現2D 平移。其中，translate（x，y）函數可以實現在 X 軸和 Y 軸上同時平移，而后面的兩個函數則用于單獨實現在 X 軸或者 Y 軸上平移。如果將 translate（x，y）函數中的第一個參數設置為 0，那么可以實現 translateY（y）函數的效果；如果將第二個參數設置為 0，那么可以實現 translateX（x）函數的效果。實現平移的這三個函數的參數值都是像素值，可以是正值，也可以是負值。X 軸參數為正值時，代表向右移動；X 軸參數為負值時，代表向左移動。Y 軸參數為正值時，代表向下移動；Y 軸參數為負值時，代表向上移動。五、border-radius 屬性首先寫一個 div，這個 div 默認占據的是一個長方形的區域，取名為“ circle”。在將它變為圓形之前要確保它首先是一個正方形，所以設置它的寬度和高度相同。然后將這個正方形變成圓形，將正方形變成圓形的關鍵在于 border-radius 屬性值的大小，若此屬性值大于或等于邊長的一半，則該 div 將變成一個圓形形狀；若此屬性值小于邊長的一半，則該 div 將變成一個橢圓形狀。具體代碼如圖所示。用 border 制作圓形的代碼繪制 CSS 圖形任務2● 掌握用 CSS 繪制圖形的方法。在網頁中，CSS 圖形十分常見，各式各樣的 CSS 圖形可以使網頁的交互更加美觀，從而提高用戶的體驗滿意度。那么，CSS 圖形是如何制作出來的呢？本任務將重點學習 CSS圖形的制作，并對其進行詳細講解，從而使讀者達到在網頁設計中靈活運用 CSS 圖形的目的。下面將通過學習 CSS 圖形繪制，并結合無序列表、盒子模型等知識點來繼續完成繽購樂食電子商務網站首頁的制作。制作完成的網頁效果如圖所示。繽購樂食電子商務網站首頁繽購樂食電子商務網站首頁繽購樂食電子商務網站首頁步驟一：在本項目任務 1 中已經完成了首頁網頁的輪播圖效果，接下來完成首頁中剩下的部分。根據對網頁的分析，左側導航欄中每一項包含三項內容：一張圖片、一段文字和一個右箭頭。這里用 ul 無序列表來進行布局，每個列表項包含以上三項內容。導航菜單一共有 10 個菜單項，插入 10 對 li 標簽與之對應。具體代碼如圖所示。導航菜單結構布局導航菜單結構布局這里將 ul 的寬度設置為 148 像素，每一個 li 的高度設置為 46 像素。每一個 li 列表項設置下邊框線，以達到與背景色形成對比效果的目的。具體 CSS 代碼如圖所示。無序列表樣式設置無序列表樣式設置制作左側導航欄后的網頁效果如圖所示。制作左側導航欄后的網頁效果步驟二：接著要通過 CSS 代碼把圖片、文字、箭頭設置為垂直方向居中，水平方向對齊，并且使顏色搭配美觀。通過使用偽類，當光標懸停在某一項上的時候，背景變為白色，文字變為深色。具體 CSS 代碼如圖所示。用 CSS 代碼設置圖片、文字、箭頭及偽類用 CSS 代碼設置圖片、文字、箭頭及偽類步驟三：下面制作網頁中的今日推薦部分。使用 div 盒子模型布局，一個大盒子里面包含四個小盒子，每個小盒子包含對應的圖文內容。具體代碼如圖所示。設置左側導航欄格式后的網頁效果今日推薦區部分網頁結構布局今日推薦區部分網頁結構布局步驟四：為今日推薦部分的網頁元素設置 CSS 代碼。在 html 代碼中，大盒子取名為“recommen-dation”，寬度為 1 000 像素。它里面包含的四個小盒子寬度均分，即每個小盒子寬度都為 250像素，且每個小盒子里面都包含一張圖片和一段文字信息。這里需要注意，在為每個小盒子里面的元素做絕對定位時，一定不要忘記為它的父元素設置相對定位屬性，這樣子元素的絕對定位值才是相對于父元素的值。用 CSS 設置今日推薦部分樣式的代碼如圖所示。用 CSS 設置今日推薦部分樣式的代碼用 CSS 設置今日推薦部分樣式的代碼用 CSS 設置今日推薦部分樣式的代碼步驟五：下面制作網頁中活動區的部分。一個大盒子 div 中包含上下兩個子盒子，上面的子盒子只包含文字信息，下面的子盒子又包含四個小盒子，每一個小盒子的寬度為 250 像素。每一個小盒子里面有三個更小的盒子，更小的盒子里包含具體的文字和圖片信息。具體代碼如圖所示。活動區部分網頁結構布局活動區部分網頁結構布局活動區部分網頁結構布局步驟六：接著為活動區的網頁元素設置 CSS 代碼。最大的盒子命名為“ activity”，上面的子盒子命名為“shopTitle”，下面的子盒子命名為“am-g”，下面的子盒子包含的四個小盒子都命名為“am-u-sm-3”。具體 CSS 代碼如圖所示。用 CSS 設置活動區網頁元素樣式的代碼用 CSS 設置活動區網頁元素樣式的代碼用 CSS 設置活動區網頁元素樣式的代碼用 CSS 設置活動區網頁元素樣式的代碼用 CSS 設置活動區網頁元素樣式的代碼運行上圖中的代碼，活動區網頁效果如圖所示。活動區網頁效果步驟七：制作商品展示區甜品層。甜品層分為上下兩個盒子，下面的盒子中又包含五個子盒子。其中最左側的圖文盒子的樣式設置較其他四個圖文盒子風格不同，需要單獨設置樣式。右邊的四組圖文盒子風格一致，可以一起設置樣式。具體代碼如圖所示。甜品層網頁結構布局甜品層網頁結構布局甜品層網頁結構布局甜品層網頁結構布局甜品層網頁結構布局甜品層網頁結構布局步驟八：接著為甜品層設置 CSS 代碼。最左側的圖文盒子用到了 CSS 圓形技巧和折角技巧。具體 CSS 代碼設置如圖所示。用 CSS 設置商品展示區甜品層樣式的代碼用 CSS 設置商品展示區甜品層樣式的代碼用 CSS 設置商品展示區甜品層樣式的代碼用 CSS 設置商品展示區甜品層樣式的代碼用 CSS 設置商品展示區甜品層樣式的代碼用 CSS 設置商品展示區甜品層樣式的代碼用 CSS 設置商品展示區甜品層樣式的代碼運行上圖中的代碼，網頁效果如圖所示。商品展示區甜品層網頁效果步驟九：商品展示區甜品層下面是堅果層，堅果層的文字和圖片風格與甜品層風格一致，只是文字內容和顏色選擇有一些變化，所以堅果層的樣式設置與甜品層可共用。具體代碼如圖所示。商品展示區堅果層網頁結構布局商品展示區堅果層網頁結構布局商品展示區堅果層網頁結構布局商品展示區堅果層網頁結構布局商品展示區堅果層網頁結構布局商品展示區堅果層網頁結構布局堅果層與甜品層的樣式完全一樣，只是背景顏色有所區別，所以這里 CSS 的代碼只需要設置顏色的變化即可。具體設置如圖所示。用 CSS 設置商品展示區堅果層樣式的代碼運行上圖中的代碼，網頁效果如圖所示。商品展示區堅果層網頁效果商品展示區堅果層網頁效果商品展示區堅果層網頁效果步驟十：把“ border:1px solid blue;”和“ border:1px solid red;”這種幫助看盒子區域大小和位置的紅藍框線的代碼去掉，并把之前在注冊和登錄網頁制作的 footer 部分（即網頁底部部分）代碼添加到首頁中來，最終電子商務網站首頁的完整效果如圖所示。繽購樂食電子商務網站首頁繽購樂食電子商務網站首頁繽購樂食電子商務網站首頁一、使用 border 制作三角形三角形屬于常見的幾何圖形，在網頁設計中應用較為廣泛。在實際應用中，除了采用圖片來實現前端圖像展示外，純 CSS 代碼也可以實現圖像的繪制。這里使用 CSS 中的 border屬性來繪制三角形。用 border 屬性繪制三角形是“一門傳統手藝”。由于瀏覽器對該屬性的支持性很好，幾乎沒有兼容性問題，主流的三角形繪制方案一般都基于 border 屬性來實現。用 border 制作三角形的代碼下面通過圖 詳細講解如何使用 border 制作三角形。三角形效果運行上圖中的代碼，效果如圖所示。二、使用 border 制作折疊三角形這里用一個案例來演示如何使用 border 制作一個折疊三角形。先在 body 里面寫一個div，并設置 id 的屬性值為“triangle2”，具體語法格式如下。用 border 制作折疊三角形的代碼具體代碼如圖所示。用 border 制作折疊三角形的代碼折疊三角形效果運行上圖中的代碼，效果如圖所示。三、使用 border-radius 制作圓形首先寫一個 div，這個 div 默認占據的是一個長方形的區域，取名為“ circle”。在把它變為圓形之前要確保它是一個正方形，所以設置它的寬度和高度相同。然后將這個正方形變成圓形，將正方形變成圓形的關鍵在于 border-radius 屬性值的大小，若此屬性值大于或等于邊長的一半，則該 div 將變成一個圓形形狀；若此屬性值小于邊長的一半，則該 div 將變成一個橢圓形狀。具體代碼如圖所示。用 border 制作圓形的代碼圓形效果運行上圖中的代碼，效果如圖所示。

展開更多......

收起↑