這里寫目錄標題

• 前言
• 1 整體構造思想
• 2 設計前的摸索
• 3 網頁頂端和導航欄的設計
• 4 nav導航欄的固定效果
• 5 輪播圖部分
• 6 明星機型設計
• 7 精選配件設計
• 8 搜索歐珀區域
• 9 服務和售后區域
• 10 網頁頁腳
• 11 返回頂部按鈕
• 12 遇到的問題
• 13 網頁的全部資源鏈接

前言

??該網上購物商城首頁自己參考慕課上學習的，作為自己的學習筆記。此處先展示設計的網頁效果

1 整體構造思想

??先對整個網頁布局按照自頂向下的方式進行分塊，按照塊元素依次去實現；有的塊區域中還存在多個小塊，同樣也是按照小塊元素依次去實現效果。

??在某個區域內實現效果時，首先應該在html文件中這個區域中的框架（使用html的標簽元素），搭建完框架之后再想向其中填補內容，可以一次性填充所有的內容（包括一些文字或者圖片、圖標等內容）。填充完成之后再進行對應區域的CSS樣式設計，也是自頂向下的思想去定義對應標簽元素的CSS樣式。

2 設計前的摸索

??最開始對需要設計的頁面進行布局分析，發現當前需要分割出10塊區域，因此使用div標簽來上下布局這10塊區域，效果圖如下：

（一共顯示10行，圖未截全，而且最上面一行綠色的條也是一個div區域）

3 網頁頂端和導航欄的設計

??正在設計網頁的導航欄 首先把要現實的內容先放入nav導航欄中，進行占位，也方便后續進行位置的布局與調整。然后對第一行文字使用文件夾中的圖片替換插入即可。在此處需要設置浮動顯示，使用float:left和float:right樣式來控制內容分布在導航欄的兩端。總體實現難度不大。

4 nav導航欄的固定效果

??實際上就是等到滾動條滑動到nav導航欄上部和頁面的頂部重合的時候，修改nav導航欄區域的屬性postion為fixed即可。

部分JS控制邏輯代碼：

 // 對吸頂燈效果進行設置
if (scrollT >= navTop) {nav.style.position = "fixed";      //設置為固定位置樣式nav.style.top = 0;nav.style.left = 0;nav.style.zIndex = 100;         //代表層級  數值越大層級越高 不會被遮蓋住
} else {nav.style.position = "";      //position屬性置空
}

5 輪播圖部分

??輪播圖的實現比較復雜，因此此處使用了輪播圖的swpier插件（swiper.css和swiper.js）來幫助完成效果顯示，顯示效果為cube方式。swiper插件鏈接如下：https://www.swiper.com.cn/download/

輪播圖部分html代碼展示：

<div id="banner"><!-- banner部分不加上container  因為加上后會限制圖片的尺寸顯示 --><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="imgs/photo/banner1.jpg" width="100%;" height="630"></div><div class="swiper-slide"><img src="imgs/photo/banner2.jpg" width="100%;" height="630"></div><div class="swiper-slide"><img src="imgs/photo/banner3.jpg" width="100%;" height="630"></div><div class="swiper-slide"><img src="imgs/photo/banner4.jpg" width="100%;" height="630"></div></div><!-- Add Pagination --><div class="swiper-pagination"></div><!-- 標頁碼 --><div class="swiper-button-next"></div><!-- “后一個”控件按鈕 --><div class="swiper-button-prev"></div><!-- “前一個”控件按鈕 --></div><div class="banner-nav-bg"></div></div>

6 明星機型設計

??明星機型區域的布局比較明顯，首先是區域整體分成上下結構，上部分是標題區域，該區域主要是一個圖片樣式，下半部分是一個list列表，因為布局一直不同的只是其中的內容和圖片，因此考慮使用ul和li標簽來制作。每一塊內容都放入到li標簽中，此處li標簽包括了圖片和下面的三行文字內容。當鼠標懸停hover在li標簽所覆蓋的區域時，li標簽區域整體向上移動，使用動畫過渡效果translateY(-10px)來實現效果。為了保持過渡效果整體的流暢性，記住在li中設置transform屬性來控制過渡效果。

html代碼：

    <div id="star"><div class="container"><div class="star_top"><!-- star部分標題區域 --></div><ul><li><div><img src="imgs/photo/20141030152751NRihyRENa7.jpg" alt="綠色機型圖"></div><h3>N3</h3><p>1600萬電動旋轉攝像頭</p><p class="more">&yen;3999 立即購買 <span></span></p></li><li class="line"></li><li><div><img src="imgs/photo/20141029162235J7aJmCHkFm.jpg" alt="綠色機型圖"></div><h3>R5</h3><p>薄至4.85mm</p><p class="more">&yen;2999 立即購買 <span></span></p></li><li class="line"></li><li><div><img src="imgs/photo/20150120092342k2ABsEHnQN.jpg" alt="綠色機型圖"></div><h3>R1C</h3><p>磚石流光鏡面</p><p class="more">&yen;2999 立即購買 <span></span></p></li><li class="line"></li><li><div><img src="imgs/photo/20150423183545tYnFzYnn3p.jpg" alt="綠色機型圖"></div><h3>A31</h3><p>鏡在掌握</p><p class="more">&yen;999 立即購買 <span></span></p></li></ul></div></div>

7 精選配件設計

??該區域內容的整體結構也是分為上下結構，上部分是區域的標題頭header，該標題頭的內容實際上就是插入一張圖片，而下部分是展示內容content的主體。在content區域中實際上又劃分為左右兩部分。在content左邊的第一、三、四圖實際上知識圖片，只需要用一個div容器包裝即可，第二個方框不是圖片，內含一些文字設計和一個list內容。content的右半區域設計也很簡單，也都是單純地在div區域中嵌入圖片即可。過渡效果也是當鼠標懸浮在某塊內容上，整體向上位移而且邊框底部顏色變綠，和“明星機型”中的設計類似。

html結構代碼：

   <div id="accessory"><div class="container"><div class="acc_top"><img src="imgs/bgi/acc.png" alt="精選配件"></div><div class="acc_main"><div class="acc_left left"><div><img src="imgs/photo/20150413174400N0dPnxUKHk.jpg" alt="OPPO find7"></div><div class="acc_all"><!-- 該區域不是圖片 需要自己布局設計 --><p class="peijian">OPPO手機官網ACCESSORY配件</p><h5 class="line"></h5><ul><li class="left">耳機</li><li class="right">移動電源</li><li class="left">保護殼</li><li class="right">貼膜</li><li class="left">皮套</li><li class="right">數據線</li></ul><h5 class="line"></h5><p class="all_parts">全部配件<span></span></p></div><div><img src="imgs/photo/20131120165101xYIYzhkVEy.jpg" alt="充電插頭"></div><div><img src="imgs/photo/20150413174340NLV2gvV4FU.jpg" alt="充電線"></div></div><div class="acc_right right"><div><img src="imgs/photo/20150123182505RO822scYYt.jpg" alt="閃充配件"></div><div><img src="imgs/photo/20141230145609l7Fsk7CdHy.jpg" alt="頭戴式藍牙耳機"></div><div><img src="imgs/photo/20141011101157yZEFpMrk0h.jpg" alt="有線耳機"></div><div><img src="imgs/photo/201410270957132inlm3IwsV.jpg" alt="無線藍牙耳機"></div></div></div></div></div>

8 搜索歐珀區域

??歐珀區域的整體設計仍然也是上下結構，上部分結構是一個圖片格式的區域標題，只需要使用div套住圖片并且居中果顯示即可。下部分content內容分成左右兩塊區域，該區域的屬性也要設置float屬性，左半部分為left浮動，右半部分為right浮動。content左部分實際上是一個list列表，每個列表中存在div標簽，然后往div標簽中嵌套img標簽以加入圖片。content右半部分是一個列表，由于此處使用了圖文混排格式，因此我們在此處考慮使用dt和dd標簽來替換ul和li標簽（但實際上ul和li也能達到這個效果），我們將圖片放入dt標簽中，對圖片內容的解釋文字放入在dd標簽中。dd和dt是一對自定義列表的組合標簽。

html代碼：

    <div id="world"><div class="container"><div class="world_top"><img src="imgs/bgi/world.png" alt="搜索歐珀"></div><div class="world_main"><div class="world_left left"><ul><li><div class="w1 fade"><div><img src="imgs/photo/201403261455420lqMPNGENc.png" alt="購物賺積分"></div></div></li><li><div class="w2 fade"><div><img src="imgs/photo/20150226100534QqezQ85N6y.jpg" alt="分期付款"></div></div></li><li><div class="w3 fade"><div><img src="imgs/photo/20140926184007v2rjcVFcbW.jpg" alt="貨到付款"></div></div></li><li><div class="w4 fade"><div><img src="imgs/photo/20131212113902waaLqQUWfB.jpg" alt="固件升級"></div></div></li></ul></div><div class="world_right right"><div class="world_title"><div class="news"><p>新聞</p></div><div class="weibo"><p>微博</p></div></div><div class="world_content"><!-- 下面是自定義列表項（適合這種圖片+文字解釋組合的情況） --><dl><div><dt><img src="imgs/photo/20150227161036GqO59Dvta2.jpg" alt="夢幻之旅"></dt><dd><p>OPPO R5金色版 打造紐約時裝周夢幻之旅</p></dd></div><div><dt><img src="imgs/photo/201502271135596D2wBJxvH0.jpg" alt="封面大片"></dt><dd><p>OPPO 手機攜手時尚大咖 首度打造雜志封面大片</p></dd></div><div><dt><img src="imgs/photo/20140604145924CFBnAtVjqN.jpg" alt="振膜耳機"></dt><dd><p>業界革命 OPPO發布全球最高靈敏度平面振膜耳機PM-1</p></dd></div><div><dt><img src="imgs/photo/20140919101741cvR0TcGkaq.jpg" alt="HIFI大獎"></dt><dd><p>極致原音 OPPO PM-1耳機斬獲EISA年度HIFI大獎</p></dd></div></dl></div></div></div></div></div>

9 服務和售后區域

??該區域的設計也相對簡單明晰，主要是用的就是ul和li標簽去控制布局，和明顯這些樣式類似，因此我們就可以使用列表標簽元素，但要注意元素與元素之間的邊距設置，保持美觀的效果。如何控制邊距的設置可以在瀏覽器中打開后端控制臺進行查看元素（審查元素），可以在瀏覽器中對元素的css屬性進行調節（但是這個調節只是幫助我們了解如何設置元素屬性，但是頁面的源代碼仍未改變，因此在獲取到合適的元素屬性之后仍然要返回源代碼中去修改CSS樣式）。

html代碼：

    <div id="serve"><div class="container"><ul><li><dl><dt><img src="imgs/bgi/f1.jpg" alt="正品保障"></dt><dd class="dd1">正品保障</dd><dd class="dd2">所有商品都是原裝正品</dd></dl></li><li><dl><dt><img src="imgs/bgi/f2.png" alt="包郵"></dt><dd class="dd1">79元起包郵</dd><dd class="dd2">高效的物流直達配送</dd></dl></li><li><dl><dt><img src="imgs/bgi/f3.png" alt="退換貨"></dt><dd class="dd1">7天退換貨</dd><dd class="dd2">支持7天退貨,30天換貨</dd></dl></li><li><dl><dt><img src="imgs/bgi/f4.png" alt="自提點"></dt><dd class="dd1">285自提點</dd><dd class="dd2">輕松自在,覆蓋各大城市</dd></dl></li><li><dl><dt><img src="imgs/bgi/f5.png" alt="客服網點"></dt><dd class="dd1">356家客服網點</dd><dd class="dd2">專業保修服務就在家門口</dd></dl></li></ul><p class="serve_line"></p></div></div><div id="after_sale"><div class="container"><ul><li><dl><dt>關于我們</dt><dd>關于OPPO</dd><dd>新聞中心</dd><dd>人才招聘</dd></dl></li><li><dl><dt>推薦機型</dt><dd>N3</dd><dd>R5</dd><dd>R1C</dd><dd>Find 7</dd></dl></li><li><dl><dt>購物相關</dt><dd>幫助中心</dd><dd>周邊產品</dd><dd>OPPO體驗店</dd><dd>客戶服務政策</dd></dl></li><li><dl><dt>會員中心</dt><dd>產品注冊</dd><dd>會員注冊</dd><dd>會員登錄</dd></dl></li><li><dl><dt>關注我們</dt><dd><span><img src="imgs/bgi/i-h-sinawb.png" alt=""></span>新浪微博</dd><dd><span><img src="imgs/bgi/i-h-qqwb.png" alt=""></span>騰訊微博</dd><dd><span><img src="imgs/bgi/i-h-sinawb.png" alt=""></span>人人網</dd><dd><span><img src="imgs/bgi/i-h-sinawb.png" alt=""></span>QQ空間</dd></dl></li><li><dl><dt>聯系我們</dt><dd class="text2"><span><img src="imgs/bgi/contact_1.jpg" alt=""></span>4001-666-888</dd><dd class="text1">7*24小時客服電話</dd><dd class="text2"><span><img src="imgs/bgi/contact_2.jpg" alt=""></span>在線客服</dd><dd class="text1">服務時段：8：30--22:00</dd></dl></li></ul></div></div>

10 網頁頁腳

??網頁的頁腳設計的設計思路和網頁頂部和nav導航欄一致，也是利用浮動將內容在左右兩邊排開。其中注意span標簽的使用，span是行內標簽in-line類型，則不會自動換行，非常適合在這個場景中進行應用，嵌入一些文字或者圖片。

html代碼：

    <div id="footer"><div class="container"><p><img src="imgs/bgi/i-f-logo.png"><span>@2021 北京市xxxxxxx 版權歸屬_xwh</span><a href="#">版權說明</a><a href="#">使用協議</a><a href="#">網站地圖</a><a href="#">友情鏈接</a><a href="#">聯系我們</a></p><!-- 此處在這個區域使用p標簽的原因是 這里頁腳只是一行顯示 沒有必要使用容量較大的div標簽 --></div></div>

11 返回頂部按鈕

??此處實際上使用的是一個a標簽，只不過其中a標簽的背景設置為了圖片顯示。返回頂部的效果實現需要結合JS代碼完成，當網頁的“第一頁”消失的時候，開始呈現出返回頂部的按鈕。當點擊返回頂部按鈕之后，通過控制滾動條頂部到document文檔的距離來控制頁面的滾動，當滾動條上端和document文件（指當前網頁）重合（距離為0）時，代表已經返回了頂部。此外，也可以增加一些效果控制滾動條的滾動快慢。

html的顯示代碼：

    <div id="totop"><a href="javascript:;" id="btn"></a></div>

JS控制代碼：

// 該部分JS代碼用于控制返回頂部按鈕的實現功能window.onload = function () {   // 上一行代表當窗口進行刷新加載的時候  便執行function中的函數var backTop = document.getElementById("btn");       //通過dom操作獲取返回頂部按鈕對象var nav = document.getElementById("nav");backTop.style.display = "none";//初始化將返回按鈕圖標進行隱藏var scrollT = null;var navTop = nav.offsetTop;        //記錄nav區域頂端到document頂部的距離var pageHeight = 700;             //頁面高度window.onscroll = function () {     //當滾動條發生滾動的時候觸發函數scrollT = document.documentElement.scrollTop || document.body.scrollTop;//滑動頁面的時候 才會獲取滾動條位置  而不能在頁面刷新的時候就獲取位置  否則這個值一直都會是0if (scrollT > pageHeight) {backTop.style.display = "block";} else {backTop.style.display = "none";}// 對吸頂燈效果進行設置if (scrollT >= navTop) {nav.style.position = "fixed";      //設置為固定位置樣式nav.style.top = 0;nav.style.left = 0;nav.style.zIndex = 100;         //代表層級  數值越大層級越高 不會被遮蓋住} else {nav.style.position = "";      //position屬性置空}}var timer = null; //  記錄周期性定時器的名稱backTop.onclick = function () {     //  這是點擊返回頂部按鈕的觸發執行函數timer = setInterval(function () {// 周期性定時器函數  代表進行周期性進行執行函數體scrollT = document.documentElement.scrollTop || document.body.scrollTop;var temp = scrollT / 5;document.documentElement.scrollTop = scrollT - temp;        //此處一定要賦值給對象document.documentElement.scrollTop 否則沒有效果 不能賦值給變量scrollT// 相當于每次減少滾動條到頂部的五分之一if (scrollT <= 0) clearInterval(timer);      //滾動條到頂端后進行定時器的清除}, 30);}}

12 遇到的問題

??以線為邊界分上下兩個區域，紅線本應該是上區域的底部線條，但是紅線會出現被下區域覆蓋的情況，將下區域的整體div設置margin-top為10px時，才顯示了紅色部分的線條。

原因分析及解決方案：
??原來是上區域的div的高度默認設置為了100px，沒有進行及時更新高度，導致上區域的ul列表剛好占滿了該塊區域（因為ul的高度剛好是100px）。因此ul后邊的高度為1px的線條都無法顯示出來，因為線條是被溢出來的。最后，將上區域高度設置為102px，變能夠容納下ul和線條兩部分內容了，結果如下圖所示：

??當需要對一塊區域設置動畫效果和transform屬性的時候，無法隨同一個標簽全部設置，因為會產生沖突的現象導致transform效果無法顯示出來。有時候的解決辦法是使用兩層div進行嵌套，例如最外層的div顯示動畫效果，動畫效果展示完全之后便對內部的div進行transform效果展示。

13 網頁的全部資源鏈接

https://download.csdn.net/download/qq_44174803/55575542

總結

以上是生活随笔為你收集整理的简易的网上购物商城首页设计流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。