系列文章目录

1.Web前端大作业html+css静态页面–掌****有限公司
2.Web前端大作业起点小说静态页面
3.Web前端大作业网易云页面
4.Web前端大作业商城页面
5.Web前端大作业游戏官网页面
6.Web前端大作业网上商城页面
7.HTML+CSS淘宝首页[web课设代码+模块说明+效果图]
8.HTML+CSS+JS实现京东首页[web课设代码+模块说明+效果图]

---

---

前言

html代码量800+行，css代码量1200+行，因为有轮播图(加了100多行js代码)。该商城首页用了2000行代码。里面避免不了有冗余的代码。大多数的常见知识点均已运用。每个css样式修饰都有注释，阅读起来会很方便。

资源下载链接如下：HTML+CSS+JS实现商城首页源码（shopping-page）

---

一、HTML结构图

文件目录结构介绍，每个文件的含义具体如图所示：

二、模块效果图

2.1 导航+搜索栏

导航栏和搜索栏展示，如下图所示:

知识点：ul-li无序列表，input输入框，a标签，图片image标签，css样式布局。

2.2 核心内容展示区

核心展示内容包含轮播图，分类以及公告等信息展示，如下图所示：

知识点：uf-li无序列表，css布局（子绝父相），轮播图js。

2.3 推荐分类展示区

分类下推荐产品的展示效果图如下：

知识点：uf-li无序列表，css布局，快捷导航栏js编写内容。

2.4 关于我们

底部栏，使用列表展示官网信息，如下图所示：

知识点：uf-li无序列表，css布局

2.5 注册页面

点击首页导航栏的“免费注册”按钮，跳转到注册页。如下图所示：

知识点：form表单，文本域，选择框，css布局。

总结

运用最多的是对于相对定位、绝对定位、样式布局方面，基本把商城首页的布局分析的差不多了，主要还是div布局方面，其他的修饰也比较简单，仔细点看哪里鼠标经过会变颜色，鼠标变成小手等。感觉越写越熟练。。。用的最多的就是ul-li，今后的开发也会发现，列表是必不可少的。几乎每个页面都需要用到。对今后的学习会有很大的帮助！！！ 为大家在学习vue/react框架打好基础~

资源下载链接如下：HTML+CSS+JS实现商城首页源码（shopping-page）