这里写目录标题

• 前言
• 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