歡迎訪問邯鄲翱翔電腦學校

邯鄲翱翔學校地址:河北省邯鄲市邯鄲學院北路滏西大街交口西北角  咨詢熱線:15333301535
熱門文章
學員作品您當前所在位置:首頁 > 學員天地 > 學員作品

C55班HTML中期項目-小米商城

點擊次數:378次
導讀:(1)、簡潔的外觀吸引了人們在網上購買的吸引力;(2)、通過簡單大方的圖片和介紹各種手機、家電以及生活用品;(3)、瀏覽商品以及查看購物到完成購物的完美流程。

小組成員:

組長:孟令聚

組員:鄭國強、郭云杰

目的

(1)、簡潔的外觀吸引了人們在網上購買的吸引力;

(2)、通過簡單大方的圖片和介紹各種手機、家電以及生活用品;

(3)、瀏覽商品以及查看購物到完成購物的完美流程。

范圍

適用于網頁購買

各個模塊的介紹

一、首頁

首頁頁眉由標簽組成以及頁眉固定定位、鼠標懸浮文字變色、鼠標懸浮加深顏色、鼠標懸浮圖片發生改變、下拉菜單;

主體大圖由@keyframes關鍵幀制作的漸變輪播圖;

點擊登錄、注冊進入相應的頁面;

左上角網頁的title有小米的icon

首頁主體的商品圖是由無序列表以及div多重嵌套的div排列而成,每層樓層都有不同的動畫效果,其中搭配樓層鼠標懸浮div變成圓角、上移、有一個橙色的陰影的動畫。

配件樓層又鼠標懸浮div上移、加陰影、會有一個隱藏的div從右側選擇切出的動畫。

二、注冊、登錄

進入注冊頁面、國家/地區輸入框有非空的表單驗證、輸入框有一個圓角效果、點擊也不會出現黑框的效果,手機號輸入框有非空以及手機號必須為十一位的表單驗證。

立即注冊有一個外發光、以及漸變顏色、鼠標懸浮顏色變淺。

登錄分為賬號登陸以及掃碼登錄,賬號登錄文本框有一個內陰影、非空表單驗證以及固定賬號,此時我們的注冊以及、找回密碼鼠標懸浮變為橙色、點擊也可以點擊進入相應的界面。

這是在首頁進入智能樓層點擊瀏覽更多會進入智能家電頁面,這個頁面有智能的商品、鼠標懸浮會有上移加陰影的動畫。

點擊九號平衡車商品可以跳轉到相關詳情界面。

進入九號平衡車界面,背景是一個視頻會自動播放。

點擊立即購買

進入立即購買頁面

點擊加入購物車

此時進入新的頁面

我們的購物車已經有一件商品了,鼠標懸浮購物車會有背景以及圖片變色且拉菜單的效果,下面的推薦產品鼠標懸浮有圖片放大且加入購物車的div上移的動畫。

去購物車結算

我的購物車

數量可以點擊加減,數量發生改變、小計、總共數量以及合計都會發生改變;

數量不得小于1

這個是用js做到的一個效果

添加新地址鼠標懸浮會有半透明效果

去結算

這些支付平臺鼠標懸浮會上移加橙色陰影、變圓角的效果

選擇微信支付

會出現二維碼的div彈框

當鼠標懸浮到二維碼上回有個一手機div的彈框

當點擊二維碼會顯示支付成功

這用到了js中的window.open做的效果,有一個小網頁。

支付成功

Copyright (c) 2006-2021 邯鄲翱翔