这里写目录标题

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

简易的网上购物商城首页设计流程相关推荐

java商城答辩_毕业答辩-基于Java的网上购物商城的设计与实现.ppt
指导老师: 答辩人: 学号: 学院:信息工程学院基于JAVA的网上购物系统的设计与实现 1 2 绪论技术介绍和系统设计 3 系统的实现 4 结论与展望一.绪论随着网络的蓬勃发展,电子商务技术在 ...
基于java的电商毕业论文_毕业论文（设计）基于java的网上购物商城的设计与实现.doc...
盐城师范学院毕业设计第2页共23页基于Java的网上购物商城的设计与实现摘要随着网络的不断发展,电子商务技术日趋完善,网络购物已经成为人们日常消费的一种主要方式.基于成熟的电子商务技术条件与 ...
java购物商城系统开题报告_开题报告-基于Java的网上购物商城的设计与实现.doc...
盐城师范学院毕业设计开题报告题目: 基于Java的网上购物商城的设计与实现姓名: 学院: 信息工程学院专业: 数字媒体技术班级: 12(1) 学号: 指导教师: 职称: 讲师 2 ...
基于Java SSM的蔬菜水果农产品网上购物商城的设计与实现
目录摘要 I Abstract II 目录 IV 第一章引言 1 1.1 系统开发背景 1 1.2 系统开发意义 1 1.3论文的主要结构 2 第二章系统设计工具介绍 3 2.1 平台选择 ...
【SQL Server】网上购物商城数据库设计报告(专业课设作品附上sql文件文档)
目录一.需求分析 1.1 背景 1.2 数据需求 1.3 事物需求 1.4 数据流程图二.概念结构设计 2.1 E-R图三.关系模式 3.2 数据逻辑结构四.物理结构设计 4.1 建立一个数据 ...
唯我倾城网上购物商城设计与实现
摘要伴随着Internet网的快速发展,网上购物以其独特快速.便捷的购物方式,尤其是其产品的多样化.新潮.时尚等特点很符合现代人群的消费观念,正是网上购物成为最受客户青睐的一种购物模式.当前电子商 ...
HTML网页设计期末课程大作业 ~医药用品购物商城首页(HTML+CSS)
HTML网页设计期末课程大作业 ~医药用品购物商城首页(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...
网上购物商城前后端（安卓课程设计）
一.实验题目网上购物商城项目源代码及报告参考地址:点击这里二.实验目的 1.掌握 Android 中的菜单及导航框架. 2.掌握自定义布局. 3.掌握 Android 中的数据存储. 4.掌握S ...
Android课程设计--网上购物商城
Android的特征: 提供访问硬件的API函数,简化访问过程等具有自己的运行时和虚拟机提供了丰富的界面控件供使用者之间调用,加快用户界面的开发速度,保证Android平台上程序界面的一致性提供 ...

简易的网上购物商城首页设计流程

这里写目录标题

前言

1 整体构造思想

2 设计前的摸索

3 网页顶端和导航栏的设计

4 nav导航栏的固定效果

5 轮播图部分

6 明星机型设计

7 精选配件设计

8 搜索欧珀区域

9 服务和售后区域

10 网页页脚

11 返回顶部按钮

12 遇到的问题

13 网页的全部资源链接

简易的网上购物商城首页设计流程相关推荐

最新文章

热门文章