<strong id="1mzrt"></strong>
  • <strong id="1mzrt"></strong>

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

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

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

    點擊次數:532次
    導讀:(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 邯鄲翱翔