系列文章目录
1.Web前端大作业html+css静态页面--掌****有限公司
7.HTML+CSS淘宝首页[web课设代码+模块说明+效果图]
8.HTML+CSS+JS实现京东首页[web课设代码+模块说明+效果图]
文章目录
- 系列文章目录
- 前言
- 一、HTML结构图
- 二、模块效果图
-
- [2.1 导航+搜索栏](#2.1 导航+搜索栏)
- [2.2 核心内容展示区](#2.2 核心内容展示区)
- [2.3 推荐分类展示区](#2.3 推荐分类展示区)
- [2.4 关于我们](#2.4 关于我们)
- [2.5 注册页面](#2.5 注册页面)
- 总结
前言
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）