這里寫(xiě)目錄標(biāo)題

• 前言
• 1 整體構(gòu)造思想
• 2 設(shè)計(jì)前的摸索
• 3 網(wǎng)頁(yè)頂端和導(dǎo)航欄的設(shè)計(jì)
• 4 nav導(dǎo)航欄的固定效果
• 5 輪播圖部分
• 6 明星機(jī)型設(shè)計(jì)
• 7 精選配件設(shè)計(jì)
• 8 搜索歐珀區(qū)域
• 9 服務(wù)和售后區(qū)域
• 10 網(wǎng)頁(yè)頁(yè)腳
• 11 返回頂部按鈕
• 12 遇到的問(wèn)題
• 13 網(wǎng)頁(yè)的全部資源鏈接

前言

??該網(wǎng)上購(gòu)物商城首頁(yè)自己參考慕課上學(xué)習(xí)的，作為自己的學(xué)習(xí)筆記。此處先展示設(shè)計(jì)的網(wǎng)頁(yè)效果

1 整體構(gòu)造思想

??先對(duì)整個(gè)網(wǎng)頁(yè)布局按照自頂向下的方式進(jìn)行分塊，按照塊元素依次去實(shí)現(xiàn)；有的塊區(qū)域中還存在多個(gè)小塊，同樣也是按照小塊元素依次去實(shí)現(xiàn)效果。

??在某個(gè)區(qū)域內(nèi)實(shí)現(xiàn)效果時(shí)，首先應(yīng)該在html文件中這個(gè)區(qū)域中的框架（使用html的標(biāo)簽元素），搭建完框架之后再想向其中填補(bǔ)內(nèi)容，可以一次性填充所有的內(nèi)容（包括一些文字或者圖片、圖標(biāo)等內(nèi)容）。填充完成之后再進(jìn)行對(duì)應(yīng)區(qū)域的CSS樣式設(shè)計(jì)，也是自頂向下的思想去定義對(duì)應(yīng)標(biāo)簽元素的CSS樣式。

2 設(shè)計(jì)前的摸索

??最開(kāi)始對(duì)需要設(shè)計(jì)的頁(yè)面進(jìn)行布局分析，發(fā)現(xiàn)當(dāng)前需要分割出10塊區(qū)域，因此使用div標(biāo)簽來(lái)上下布局這10塊區(qū)域，效果圖如下：

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

3 網(wǎng)頁(yè)頂端和導(dǎo)航欄的設(shè)計(jì)

??正在設(shè)計(jì)網(wǎng)頁(yè)的導(dǎo)航欄 首先把要現(xiàn)實(shí)的內(nèi)容先放入nav導(dǎo)航欄中，進(jìn)行占位，也方便后續(xù)進(jìn)行位置的布局與調(diào)整。然后對(duì)第一行文字使用文件夾中的圖片替換插入即可。在此處需要設(shè)置浮動(dòng)顯示，使用float:left和float:right樣式來(lái)控制內(nèi)容分布在導(dǎo)航欄的兩端?？傮w實(shí)現(xiàn)難度不大。

4 nav導(dǎo)航欄的固定效果

??實(shí)際上就是等到滾動(dòng)條滑動(dòng)到nav導(dǎo)航欄上部和頁(yè)面的頂部重合的時(shí)候，修改nav導(dǎo)航欄區(qū)域的屬性postion為fixed即可。

部分JS控制邏輯代碼：

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

5 輪播圖部分

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

輪播圖部分html代碼展示：

<div id="banner"><!-- banner部分不加上container  因?yàn)榧由虾髸?huì)限制圖片的尺寸顯示 --><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><!-- 標(biāo)頁(yè)碼 --><div class="swiper-button-next"></div><!-- “后一個(gè)”控件按鈕 --><div class="swiper-button-prev"></div><!-- “前一個(gè)”控件按鈕 --></div><div class="banner-nav-bg"></div></div>

6 明星機(jī)型設(shè)計(jì)

??明星機(jī)型區(qū)域的布局比較明顯，首先是區(qū)域整體分成上下結(jié)構(gòu)，上部分是標(biāo)題區(qū)域，該區(qū)域主要是一個(gè)圖片樣式，下半部分是一個(gè)list列表，因?yàn)椴季忠恢辈煌闹皇瞧渲械膬?nèi)容和圖片，因此考慮使用ul和li標(biāo)簽來(lái)制作。每一塊內(nèi)容都放入到li標(biāo)簽中，此處li標(biāo)簽包括了圖片和下面的三行文字內(nèi)容。當(dāng)鼠標(biāo)懸停hover在li標(biāo)簽所覆蓋的區(qū)域時(shí)，li標(biāo)簽區(qū)域整體向上移動(dòng)，使用動(dòng)畫(huà)過(guò)渡效果translateY(-10px)來(lái)實(shí)現(xiàn)效果。為了保持過(guò)渡效果整體的流暢性，記住在li中設(shè)置transform屬性來(lái)控制過(guò)渡效果。

html代碼：

    <div id="star"><div class="container"><div class="star_top"><!-- star部分標(biāo)題區(qū)域 --></div><ul><li><div><img src="imgs/photo/20141030152751NRihyRENa7.jpg" alt="綠色機(jī)型圖"></div><h3>N3</h3><p>1600萬(wàn)電動(dòng)旋轉(zhuǎn)攝像頭</p><p class="more">&yen;3999 立即購(gòu)買(mǎi) <span></span></p></li><li class="line"></li><li><div><img src="imgs/photo/20141029162235J7aJmCHkFm.jpg" alt="綠色機(jī)型圖"></div><h3>R5</h3><p>薄至4.85mm</p><p class="more">&yen;2999 立即購(gòu)買(mǎi) <span></span></p></li><li class="line"></li><li><div><img src="imgs/photo/20150120092342k2ABsEHnQN.jpg" alt="綠色機(jī)型圖"></div><h3>R1C</h3><p>磚石流光鏡面</p><p class="more">&yen;2999 立即購(gòu)買(mǎi) <span></span></p></li><li class="line"></li><li><div><img src="imgs/photo/20150423183545tYnFzYnn3p.jpg" alt="綠色機(jī)型圖"></div><h3>A31</h3><p>鏡在掌握</p><p class="more">&yen;999 立即購(gòu)買(mǎi) <span></span></p></li></ul></div></div>

7 精選配件設(shè)計(jì)

??該區(qū)域內(nèi)容的整體結(jié)構(gòu)也是分為上下結(jié)構(gòu)，上部分是區(qū)域的標(biāo)題頭header，該標(biāo)題頭的內(nèi)容實(shí)際上就是插入一張圖片，而下部分是展示內(nèi)容content的主體。在content區(qū)域中實(shí)際上又劃分為左右兩部分。在content左邊的第一、三、四圖實(shí)際上知識(shí)圖片，只需要用一個(gè)div容器包裝即可，第二個(gè)方框不是圖片，內(nèi)含一些文字設(shè)計(jì)和一個(gè)list內(nèi)容。content的右半?yún)^(qū)域設(shè)計(jì)也很簡(jiǎn)單，也都是單純地在div區(qū)域中嵌入圖片即可。過(guò)渡效果也是當(dāng)鼠標(biāo)懸浮在某塊內(nèi)容上，整體向上位移而且邊框底部顏色變綠，和“明星機(jī)型”中的設(shè)計(jì)類(lèi)似。

html結(jié)構(gòu)代碼：

   <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"><!-- 該區(qū)域不是圖片 需要自己布局設(shè)計(jì) --><p class="peijian">OPPO手機(jī)官網(wǎng)ACCESSORY配件</p><h5 class="line"></h5><ul><li class="left">耳機(jī)</li><li class="right">移動(dòng)電源</li><li class="left">保護(hù)殼</li><li class="right">貼膜</li><li class="left">皮套</li><li class="right">數(shù)據(jù)線</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="頭戴式藍(lán)牙耳機(jī)"></div><div><img src="imgs/photo/20141011101157yZEFpMrk0h.jpg" alt="有線耳機(jī)"></div><div><img src="imgs/photo/201410270957132inlm3IwsV.jpg" alt="無(wú)線藍(lán)牙耳機(jī)"></div></div></div></div></div>

8 搜索歐珀區(qū)域

??歐珀區(qū)域的整體設(shè)計(jì)仍然也是上下結(jié)構(gòu)，上部分結(jié)構(gòu)是一個(gè)圖片格式的區(qū)域標(biāo)題，只需要使用div套住圖片并且居中果顯示即可。下部分content內(nèi)容分成左右兩塊區(qū)域，該區(qū)域的屬性也要設(shè)置float屬性，左半部分為left浮動(dòng)，右半部分為right浮動(dòng)。content左部分實(shí)際上是一個(gè)list列表，每個(gè)列表中存在div標(biāo)簽，然后往div標(biāo)簽中嵌套img標(biāo)簽以加入圖片。content右半部分是一個(gè)列表，由于此處使用了圖文混排格式，因此我們?cè)诖颂幙紤]使用dt和dd標(biāo)簽來(lái)替換ul和li標(biāo)簽（但實(shí)際上ul和li也能達(dá)到這個(gè)效果），我們將圖片放入dt標(biāo)簽中，對(duì)圖片內(nèi)容的解釋文字放入在dd標(biāo)簽中。dd和dt是一對(duì)自定義列表的組合標(biāo)簽。

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="購(gòu)物賺積分"></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="固件升級(jí)"></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"><!-- 下面是自定義列表項(xiàng)（適合這種圖片+文字解釋組合的情況） --><dl><div><dt><img src="imgs/photo/20150227161036GqO59Dvta2.jpg" alt="夢(mèng)幻之旅"></dt><dd><p>OPPO R5金色版 打造紐約時(shí)裝周夢(mèng)幻之旅</p></dd></div><div><dt><img src="imgs/photo/201502271135596D2wBJxvH0.jpg" alt="封面大片"></dt><dd><p>OPPO 手機(jī)攜手時(shí)尚大咖 首度打造雜志封面大片</p></dd></div><div><dt><img src="imgs/photo/20140604145924CFBnAtVjqN.jpg" alt="振膜耳機(jī)"></dt><dd><p>業(yè)界革命 OPPO發(fā)布全球最高靈敏度平面振膜耳機(jī)PM-1</p></dd></div><div><dt><img src="imgs/photo/20140919101741cvR0TcGkaq.jpg" alt="HIFI大獎(jiǎng)"></dt><dd><p>極致原音 OPPO PM-1耳機(jī)斬獲EISA年度HIFI大獎(jiǎng)</p></dd></div></dl></div></div></div></div></div>

9 服務(wù)和售后區(qū)域

??該區(qū)域的設(shè)計(jì)也相對(duì)簡(jiǎn)單明晰，主要是用的就是ul和li標(biāo)簽去控制布局，和明顯這些樣式類(lèi)似，因此我們就可以使用列表標(biāo)簽元素，但要注意元素與元素之間的邊距設(shè)置，保持美觀的效果。如何控制邊距的設(shè)置可以在瀏覽器中打開(kāi)后端控制臺(tái)進(jìn)行查看元素（審查元素），可以在瀏覽器中對(duì)元素的css屬性進(jìn)行調(diào)節(jié)（但是這個(gè)調(diào)節(jié)只是幫助我們了解如何設(shè)置元素屬性，但是頁(yè)面的源代碼仍未改變，因此在獲取到合適的元素屬性之后仍然要返回源代碼中去修改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">高效的物流直達(dá)配送</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="自提點(diǎn)"></dt><dd class="dd1">285自提點(diǎn)</dd><dd class="dd2">輕松自在,覆蓋各大城市</dd></dl></li><li><dl><dt><img src="imgs/bgi/f5.png" alt="客服網(wǎng)點(diǎn)"></dt><dd class="dd1">356家客服網(wǎng)點(diǎn)</dd><dd class="dd2">專(zhuān)業(yè)保修服務(wù)就在家門(mén)口</dd></dl></li></ul><p class="serve_line"></p></div></div><div id="after_sale"><div class="container"><ul><li><dl><dt>關(guān)于我們</dt><dd>關(guān)于OPPO</dd><dd>新聞中心</dd><dd>人才招聘</dd></dl></li><li><dl><dt>推薦機(jī)型</dt><dd>N3</dd><dd>R5</dd><dd>R1C</dd><dd>Find 7</dd></dl></li><li><dl><dt>購(gòu)物相關(guān)</dt><dd>幫助中心</dd><dd>周邊產(chǎn)品</dd><dd>OPPO體驗(yàn)店</dd><dd>客戶(hù)服務(wù)政策</dd></dl></li><li><dl><dt>會(huì)員中心</dt><dd>產(chǎn)品注冊(cè)</dd><dd>會(huì)員注冊(cè)</dd><dd>會(huì)員登錄</dd></dl></li><li><dl><dt>關(guān)注我們</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>人人網(wǎng)</dd><dd><span><img src="imgs/bgi/i-h-sinawb.png" alt=""></span>QQ空間</dd></dl></li><li><dl><dt>聯(lián)系我們</dt><dd class="text2"><span><img src="imgs/bgi/contact_1.jpg" alt=""></span>4001-666-888</dd><dd class="text1">7*24小時(shí)客服電話</dd><dd class="text2"><span><img src="imgs/bgi/contact_2.jpg" alt=""></span>在線客服</dd><dd class="text1">服務(wù)時(shí)段：8：30--22:00</dd></dl></li></ul></div></div>

10 網(wǎng)頁(yè)頁(yè)腳

??網(wǎng)頁(yè)的頁(yè)腳設(shè)計(jì)的設(shè)計(jì)思路和網(wǎng)頁(yè)頂部和nav導(dǎo)航欄一致，也是利用浮動(dòng)將內(nèi)容在左右兩邊排開(kāi)。其中注意span標(biāo)簽的使用，span是行內(nèi)標(biāo)簽in-line類(lèi)型，則不會(huì)自動(dòng)換行，非常適合在這個(gè)場(chǎng)景中進(jìn)行應(yīng)用，嵌入一些文字或者圖片。

html代碼：

    <div id="footer"><div class="container"><p><img src="imgs/bgi/i-f-logo.png"><span>@2021 北京市xxxxxxx 版權(quán)歸屬_xwh</span><a href="#">版權(quán)說(shuō)明</a><a href="#">使用協(xié)議</a><a href="#">網(wǎng)站地圖</a><a href="#">友情鏈接</a><a href="#">聯(lián)系我們</a></p><!-- 此處在這個(gè)區(qū)域使用p標(biāo)簽的原因是 這里頁(yè)腳只是一行顯示 沒(méi)有必要使用容量較大的div標(biāo)簽 --></div></div>

11 返回頂部按鈕

??此處實(shí)際上使用的是一個(gè)a標(biāo)簽，只不過(guò)其中a標(biāo)簽的背景設(shè)置為了圖片顯示。返回頂部的效果實(shí)現(xiàn)需要結(jié)合JS代碼完成，當(dāng)網(wǎng)頁(yè)的“第一頁(yè)”消失的時(shí)候，開(kāi)始呈現(xiàn)出返回頂部的按鈕。當(dāng)點(diǎn)擊返回頂部按鈕之后，通過(guò)控制滾動(dòng)條頂部到document文檔的距離來(lái)控制頁(yè)面的滾動(dòng)，當(dāng)滾動(dòng)條上端和document文件（指當(dāng)前網(wǎng)頁(yè)）重合（距離為0）時(shí)，代表已經(jīng)返回了頂部。此外，也可以增加一些效果控制滾動(dòng)條的滾動(dòng)快慢。

html的顯示代碼：

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

JS控制代碼：

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

12 遇到的問(wèn)題

??以線為邊界分上下兩個(gè)區(qū)域，紅線本應(yīng)該是上區(qū)域的底部線條，但是紅線會(huì)出現(xiàn)被下區(qū)域覆蓋的情況，將下區(qū)域的整體div設(shè)置margin-top為10px時(shí)，才顯示了紅色部分的線條。

原因分析及解決方案：
??原來(lái)是上區(qū)域的div的高度默認(rèn)設(shè)置為了100px，沒(méi)有進(jìn)行及時(shí)更新高度，導(dǎo)致上區(qū)域的ul列表剛好占滿(mǎn)了該塊區(qū)域（因?yàn)閡l的高度剛好是100px）。因此ul后邊的高度為1px的線條都無(wú)法顯示出來(lái)，因?yàn)榫€條是被溢出來(lái)的。最后，將上區(qū)域高度設(shè)置為102px，變能夠容納下ul和線條兩部分內(nèi)容了，結(jié)果如下圖所示：

??當(dāng)需要對(duì)一塊區(qū)域設(shè)置動(dòng)畫(huà)效果和transform屬性的時(shí)候，無(wú)法隨同一個(gè)標(biāo)簽全部設(shè)置，因?yàn)闀?huì)產(chǎn)生沖突的現(xiàn)象導(dǎo)致transform效果無(wú)法顯示出來(lái)。有時(shí)候的解決辦法是使用兩層div進(jìn)行嵌套，例如最外層的div顯示動(dòng)畫(huà)效果，動(dòng)畫(huà)效果展示完全之后便對(duì)內(nèi)部的div進(jìn)行transform效果展示。

13 網(wǎng)頁(yè)的全部資源鏈接

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。