简易的网上购物商城首页设计流程
此处主要是自己参考慕课上学习的，自己顺便记录和检验自己的学习成果而写下的设计思路和流程。后续补全内容
这里写目录标题
前言
该网上购物商城首页自己参考慕课上学习的，作为自己的学习笔记。此处先展示设计的网页效果
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">¥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">¥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">¥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">¥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;
//滑动页面的时候 才会获取滚动条位置 而不能在页面刷新的时候就获取位置 否则这个值一直都会是0
if (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 网页的全部资源链接
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
5
0- 0
已为社区贡献2条内容
所有评论(0)