文章目录

2021.05.17更新
2020.11.24更新
声明：慕课网学习时的web大作业，题目慕课网老师给出，总算是成功实现。
1. 静态网页源码
- 1.1 index.html：
- 1.2 index.css
- 1.3 index.js
2. 打包地址
- 2.1 GitHub源码（添加了2020.11.24更新包）
- 2.2 CDSN站内下载（早起更新的资源，只有静态页面部分）
2019.7.18 更新实现效果图

2021.05.17更新

首先非常感谢各位大佬能够对我文章的支持，最近有很多人私信我要关于压缩包的事情，以及github无法打开下载到压缩包的问题，我作以回复

关于github无法打开的问题，这个是在外网，如果你有梯子的话，（也就是说科学上网）效率更快。

程序的问题，这个是我大二期间的一个学习demo，所以可能不是很完善，在数据库，商城购物等方面还需要完善，不适合做毕业设计。考虑拿来做毕设的同学可能无法帮助到你们。
因为我目前大四也马上毕业，近期内时间很紧。所以希望大家尽量可以通过拍github打包的方式下载到资源。

2020.11.24更新

首先，对看到这篇文档的学弟学妹，大佬前辈们表示真诚的感谢！

这是我大二学习web时的小Demo，没想到在这里得到了很多人的支持。首先，表示真诚的感谢！这也是对我学习的肯定，非常感谢。

近期来，越来越多的学弟学门们评论和私信我有没有数据库和登陆注册页面的代码。哈哈，我想你们一定是为了学期末的大作业。我这次把相应的‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬登陆注册和数据库‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‪相关的页面和代码在原有Demo工程不变的情况下新增文件夹到GitHub。文件夹为‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬2020.11.24更新包‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‪。等到后续有时间的时候，我一定会仔细的重构这个Demo，将它完善，并附上详细的文档和脑图提供给爱学习的学弟学妹们参考学习～ (因为目前已经在游戏研发相关的实习，并且在准备春招，所以无法投入精力在web上，抱歉抱歉)

最后，希望这篇文章对学弟学妹有所帮助。再次表示感谢！

声明：慕课网学习时的web大作业，题目慕课网老师给出，总算是成功实现。

1. 静态网页源码

1.1 index.html：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>商城</title><link rel="stylesheet" type="text/css" href="css/index.css"><script type="text/javascript" src="js/index.js"></script>
</head>
<body><!-- --------------------页眉板块-------------------- --><div class="header"><!-- 设置logo --><div class="logo"><img src="data:image/logo.png"></div><!-- 设置菜单 --><div class="menu" onmouseleave="show_menu1()">  <div class="menu_title" onclick="show_menu()"><a href="#">内容分类</a></div><ul id="menu1" ><li>现实主义</li><li>抽象主义</li></ul></div><!-- 设置用户登录 --><div class="auth"><ul><li><a href="#">注册</a></li><li><a href="#">登录</a></li></ul></div></div><!-- --------------------正文板块-------------------- --><div class="content"><!-- 设置广告栏 --><div class="banner"><img src="data:image/welcome.png" class="banner_img"></div><div class="img_content"><ul><li><img src="data:image/wumingnvlang.jpg" class="img_li"><div class="info"><h3>无名女郎</h3><p>图片描述可以分为多种，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块</p><div class="img_btn"> <!-- 价格，购买logo --><div class="price">¥ 2300</div><!-- 购物车按钮 --><div class="btn"><a href="#" class="cart"><img src="data:image/cart.svg"></a></div></div></div></li><li><img src="data:image/wumingnvlang.jpg" class="img_li"><div class="info"><h3>无名女郎</h3><p>图片描述可以分为多种，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块</p><div class="img_btn"> <!-- 价格，购买logo --><div class="price">¥ 2300</div><!-- 购物车按钮 --><div class="btn"><a href="#" class="cart"><img src="data:image/cart.svg"></a></div></div></div></li><li><img src="data:image/wumingnvlang.jpg" class="img_li"><div class="info"><h3>无名女郎</h3><p>图片描述可以分为多种，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块</p><div class="img_btn"> <!-- 价格，购买logo --><div class="price">¥ 2300</div><!-- 购物车按钮 --><div class="btn"><a href="#" class="cart"><img src="data:image/cart.svg"></a></div></div></div></li><li><img src="data:image/wumingnvlang.jpg" class="img_li"><div class="info"><h3>无名女郎</h3><p>图片描述可以分为多种，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块</p><div class="img_btn"> <!-- 价格，购买logo --><div class="price">¥ 2300</div><!-- 购物车按钮 --><div class="btn"><a href="#" class="cart"><img src="data:image/cart.svg"></a></div></div></div></li><li><img src="data:image/wumingnvlang.jpg" class="img_li"><div class="info"><h3>无名女郎</h3><p>图片描述可以分为多种，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块</p><div class="img_btn"> <!-- 价格，购买logo --><div class="price">¥ 2300</div><!-- 购物车按钮 --><div class="btn"><a href="#" class="cart"><img src="data:image/cart.svg"></a></div></div></div></li><li><img src="data:image/wumingnvlang.jpg" class="img_li"><div class="info"><h3>无名女郎</h3><p>图片描述可以分为多种，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块，这里是一个关于展示的板块</p><div class="img_btn"> <!-- 价格，购买logo --><div class="price">¥ 2300</div><!-- 购物车按钮 --><div class="btn"><a href="#" class="cart"><img src="data:image/cart.svg"></a></div></div></div></li></ul></div><!-- 分页 --><div class="page_nav"><ul><li><a href="#">首页</a></li><li><a href="#">上一页</a></li><li><span class="first_page">1</span></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">...</a></li><li><a href="#">98</a></li><li><a href="#">99</a></li><li><a href="#">下一页</a></li><li><a href="#">尾页</a></li></ul></div></div><!-- --------------------页脚板块-------------------- --><div class="footer"><p class="p2">造烛求明，读书求理© 2019 POWERED BY <span>WanKcn</span></p></div>
</body>
</html>

1.2 index.css

/*将所有的距离，间距都设置为0*/
*{padding: 0px;margin: 0px;
}
body{background-color: #F5F5F5 /*白烟色*/
}
/*--------------------logo,menu,login区域设计--------------------*/
/*设置页眉的位置*/
.header{width: 1200px;margin: 25px auto; /*注意空格分开而不是逗号*/
}/*子菜单不显示*/
.header .menu ul{display: none; list-style: none; /*去点*//*关联banner布局*/position: absolute;width: 80px;  opacity: 0.5; /*透明效果*/background-color: white;
}/*设置菜单和logo位置*/
.header .logo{float: left;position: relative;
}
/*菜单位置*/
.header .menu{float: left;position: relative;margin-top: 12px;margin-left: 16px;
}
/*menu浮动事件 菜单折叠*/
/*.header .menu:hover ul{display: block;
}*/
/*---------------菜单样式设置---------------*/
/*菜单间距*/
.header .menu ul li{margin-top: 20px; text-align: center; /*和菜单标题同时居中*/
}
/*菜单边框*/
.header .menu .menu_title{border-bottom: 1px solid black;padding-bottom: 20px;width: 80px;text-align: center;
}
/*超级链接去下划线*/
a{text-decoration: none;
}
/*---------------login样式设置---------------*/
.header .auth{float: right;
}
.header .auth ul li{float: left;margin-right: 70px;margin-top: 12px;    /*上边距*/list-style: none;
}/*--------------------正文区域设计--------------------*/
/*---------------banner样式---------------*/
.content{/*响应式布局始终居中*/width: 1200px;margin: 25px auto;
}
/*图片距离*/
.content .banner .banner_img{margin-top: 20px;
}
/*---------------正文图片样式---------------*/
/*整体图片横向布局*/
.content .img_content ul{width: 1280px;
}
.content .img_content ul li{width: 360px;  /*360*3+120*/float: left;margin: 0 60px 60px 0; list-style: none;background-color: #FFFFFF;/*处理边框*/margin-top: 30px;height: 500px; /*列表边框*//*阴影位置， 垂直阴影位置，渐变距离，阴影尺寸，阴影颜色*//*box-shadow: 0 0 5px 3px #ccc *//*浏览器兼容*/-webkit-box-shadow: 0 0 5px 3px #ccc; /*谷歌浏览器*/-moz-box-shadow: 0 0 5px 3px #ccc; /*火狐浏览器*/
}
/*标题设置*/
.content .img_content .info h3{font-size: 25px;color: red;margin-top: 20px;margin-bottom: 20px;
}
/*图片的段落信息设置*/
.content .img_content .info p{line-height: 25px;/*加一个下边距和价格隔开*/margin-bottom: 10px;
}
.content .img_content .info{margin-left: 30px;margin-right: 30px;
}
/*价格样式*/
.content .img_content .info .img_btn .price{color: red;font-size: 20px;
}/*购物车设置*/
.content .img_content .info .img_btn{width: 300px;
}
.content .img_content .info .img_btn .btn{width: 60px;height: 30px;background-color: red;text-align: center;border-radius: 5px; /*圆角矩形*/float: right;
}
.content .img_content .info .img_btn .btn .cart img{width: 60px;height: 20px;margin-top: 5px;}
.content .img_content .info .img_btn .price{float: left;
}
/*页码导航栏*/
.content .page_nav{width: 100%; /*大小不超出content*/height: 60px;line-height: 60px;/*border: 1px solid black;*//*溢出处理*/overflow:hidden;
}
.content .page_nav ul li{float: left;margin-right: 20px;list-style: none;
}
.content .page_nav ul{width: 500px;margin: auto;overflow:hidden;
}
/*第一页设置背景圆*/
.content .page_nav .first_page{border-radius: 50%;background-color: #c5c5c5;padding: 3px 9px; /*圆心内部边距把圆撑起来*/
}/*-------------------------页脚区域设计-------------------------*/
.footer{width: 1200px;height: 100px;margin: 60px auto;/*加一条上边框分割线*/border-top:1px solid #ccc;overflow: hidden;
}
.footer p{text-align: center;line-height: 80px;
}
.footer p span{color: #ff1490;
}

1.3 index.js

// js实现菜单折叠
var flag=true; //开关按钮
function show_menu(){var menu1 = document.getElementById("menu1");if(flag){menu1.style.display="block";flag = false;}else{menu1.style.display="none";flag = true;}
}function show_menu1(){var menu1 = document.getElementById("menu1");menu1.style.display="none";flag = true; //鼠标离开时将flag默认回true
}

2. 打包地址

2.1 GitHub源码（添加了2020.11.24更新包）

https://github.com/WanKcn/PaintingMall

如果网页无法打开或者跳转到csdn站内地址，请使用git for ssh

git clone git@github.com:WanKcn/PaintingMall.git

git for Https

git clone https://github.com/WanKcn/PaintingMall.git

2.2 CDSN站内下载（早起更新的资源，只有静态页面部分）

点击跳转

2019.7.18 更新实现效果图

html+css+js实现一个简单的电商商城首页相关推荐

初识javaWeb:纯JSP+CSS+JS构建一个简单的电商平台
github地址:https://github.com/yaodebian/GoGoLe 初识java web,想在后端用java有一技之长.注:以下仅是自己的一个程序记录. 首先java web的动 ...
通过一个简单的电商零售数据集，了解数据分析流程
目录数据分析流程 1.数据分析真实项目流程 2.数据分析方法 3.零售消费数据数据集介绍 4.分析内容明确分析的目的案例分析实战 1理解数据 2数据清洗 3数据分析和可视化 1.购买商品前十的国 ...
用HTML+CSS+JS做一个简单的个人网页
暑假在家闲的没事,写了一个简单的小网页,从网上找了些图片和视频拼起来的,由于经验不足的关系,没有将想添加的东西放进去. 先来看看整个网页效果的视频吧效果的图片如下(最右边空出来的其实是滑动条,截长屏 ...
不到50行代码，HTML+CSS+JS创建一个简单的色轮
简单,其实就是调库! 文档在这里 Get Started | iro.js 我也写了一个简单的样例在下面可以参考一下
C#队列Queue实现一个简单的电商网站秒杀程序
电商的秒杀和抢购,对程序员来说,都不是一个陌生的东西.然而,从技术的角度来说,这对于Web系统是一个巨大的考验.当一个Web系统,在一秒钟内收到数以万计甚至更多请求时,系统的优化和稳定至关重要. 我们 ...
一个简单的电商网站秒杀程序的实现
年关将至,各大电商网站火拼.沉迷于XXX网站前XX名免单,却百试不得其套路. 恰好刚好接触了selenium2.0,于是决定写一个自动抢购小程序. 1,首先是搭建selenium2.0环境. < ...
vue+element简单实现电商商城网站，模仿小米电商商城
1.本案例灵感来源于小米官网 https://www.mi.com/ 注意:此源码下载是早期版且不对应当前博客所介绍的所有功能,最新完整源码需+博客后面名片+作者获取源码官方截图产品效果图: 二 ...
用CSS和JS打造一个简单的图片编辑器
用CSS和JS打造一个简单的图片编辑器,本文主要是利用CSS的filter和简单的Jquery代码来实现一个简单的图片编辑器,包括对图片的透明度,黑白,图片亮度等调节. CSS filter 我们首先 ...
用html+css+js实现一个无限级树形控件
题目描述: 用html+css+js实现一个无限级树形控件,功能如下: 1.利用html.css展示一个树形菜单 2.点击箭头图标展开子项 3.点击父节点勾选图标能全选或全取消,点击叶节点勾选图标可以 ...

html+css+js实现一个简单的电商商城首页