系列文章目录
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)