H5商城,纯前端静态页面

概述

纯手写H5商城,2年前给一个朋友做的,高仿必要商城。页面包含个人,商家,商品分类,详情,订单,登录注册,添加收货地址,提现等34个页面

详细

代码下载:http://www.demodashi.com/demo/14152.html

一、前言

这是一个H5商城,以必要APP为原型,高仿的一套纯静态HTML页面。2年前给一个朋友做的,因为纯手写和部分引用jquery插件,js和css代码清晰简洁,仅这一套前端页面的价格是7000元,页面包含个人,商家,商品分类,详情,订单,登录注册,添加收货地址,提现等34个页面,后来已经改版,目前只是把第一版拿出来分享

做后端的小伙伴总是在抱怨前端较弱,接口写的再好,没有一个漂亮的前端,怎么能更好的展示自己的作品呢,想要去研究前端,从网上下载的前端模板代码复杂,想要修改个动态效果更是捉襟见肘,我也有经历过这种痛苦,苦于没有前端经验,又没有可以合伙一起做项目的前端,很多时候,都是自己在说服自己放弃一些提升自己的机会,现在好了,我分享的这套模板,基本上可以满足大家H5商城前端的需求,而且代码简介清晰,为自己动态绑定数据提供了很大的便利性

首先几张来张效果图:

H5商城,纯前端静态页面_第1张图片H5商城,纯前端静态页面_第2张图片H5商城,纯前端静态页面_第3张图片H5商城,纯前端静态页面_第4张图片H5商城,纯前端静态页面_第5张图片

本案例主要用到了的js如下图

H5商城,纯前端静态页面_第6张图片

二、代码分析

下面抛出部分页面代码,全部样式使用外链的形式,页面简介,容易理解

购物车页面:使用原生js触发添加,删除等操作,icon使用字体形式,减少页面的占用体积













购物车


购物车

   清空

产品名称名称产品

¥200

产品名称名称产品

¥200













个人中心


个人中心

商家模式

我的用户名

小结

HTML看似简单,但是想要写出一套代码漂亮的前端,还是需要有一定功底的

三、文件截图以及运行操作

1、文件截图

H5商城,纯前端静态页面_第7张图片

2、运行操作:

双击index.html即可看到效果。

四、浏览器兼容性

目前兼容 微信浏览器,Chrome,firefox,360浏览器等主流浏览器

五、其他补充

此程序是静态页面,页面上的数据都是写死的,仅用作前端展示使用,动态数据需要自己单独对接

代码下载:http://www.demodashi.com/demo/14152.html

注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权

 

你可能感兴趣的:(H5商城,纯前端静态页面)