1. <strike id="yxst4"></strike>
        1. <li id="yxst4"></li>
          <li id="yxst4"><pre id="yxst4"></pre></li>
          <track id="yxst4"></track>
          1. 歡迎訪問邯鄲翱翔電腦學校

            邯鄲翱翔學校地址:河北省邯鄲市邯鄲學院北路滏西大街交口西北角  咨詢熱線: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 邯鄲翱翔