技术栈
- Html
- css
- JavaScript
- jQuery
体验
pc端打开：https://yangyanyan.top/pygshopping/
源码（记得给我个star）：https://gitee.com/yyy1203/pyg-shopping.git
效果
除了页面布局，还结合了后面的js和jq，为网页增加一些特效，此网站目前只是前端静态
首页
- 轮播图
- 电梯导航
- 简单的seo优化
详情页
- 商品图片放大镜
分类列表页
购物车
- 商品数量增减
- 删除商品
- 合计商品价格
登录
注册
提交订单页
整个网站基本就是这样，有空的话会写个商城后端，建议学完前端的同学都做一下这个项目，做完对html，css基础有所加深
部分源码展示
具体请看git仓库，注释较为详细
<metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>品优购</title><!-- seo:搜索引擎优化
比如：网页title,keywords,description要写上
网页内容要放好关键字。
图片alt要加上。
能加title的标签也都加上。--><!-- description 网站说明 --><metaname="description"content="购物商城，网上购物"><!-- keywords 关键字 --><metaname="keywords"content="网上购物，手机，电脑，服饰"><!-- 用比特虫把png转换成图标，把图片放到根目录下，引用网站logo --><linkrel="shortcut icon"href="./bitbug_favicon.ico"/><linkrel="stylesheet"href="./css/base.css"><linkrel="stylesheet"href="./css/common.css"><linkrel="stylesheet"href="./css/index.css"><scriptsrc="./js/jquery.min.js"></script><scriptsrc="./js/animate.js"></script><scriptsrc="./js/index.js"></script></head><body><!-- 宽高颜色直接在ps里量 --><!-- 顶部导航栏 start --><divclass="top-nav"><divclass="w"><divclass="fl"><ul><li>品优购欢迎您！ </li><spanclass="isLogin"><li><ahref="./login.htm">请登录 </a></li><li><ahref="./register.html"class="color-red">免费注册</a></li></span></ul></div><divclass="fr"><ul><li><ahref="">我的订单</a></li><li></li><li><ahref="">我的品优购</a><iclass="icon-down"></i></li><li></li><li><ahref="">品优购会员</a></li><li></li><li><ahref="">企业采购</a></li><li></li><li><ahref="">关注品优购</a><iclass="icon-down"></i></li><li></li><li><ahref="">客户服务</a><iclass="icon-down"></i></li><li></li><li><ahref="">网站导航</a><iclass="icon-down"></i></li></ul></div></div></div><!-- 顶部导航栏 end --><!-- 头部 start --><divclass="header w"><divclass="logo"><ahref="./index.html"title="品优购"></a></div><!-- 搜索框 --><divclass="search"><inputtype="text"placeholder="语言开发"><button>搜索</button></div><!-- 购物车 --><divclass="shopbar"><!-- <i></i><a href="./shopbar.html">我的购物车</a><em></em> --><i></i><ahref="./cart.html">我的购物车</a><em></em><iclass="eight">8</i></div><!-- 热词 --><divclass="hotwords"><ul><li><ahref="">优惠购首发</a></li><li><ahref="">亿元优惠</a></li><li><ahref="">9.9元团购</a></li><li><ahref="">美满99减30</a></li><li><ahref="">办公用品</a></li><li><ahref="">电脑</a></li><li><ahref="">通信</a></li></ul></div></div><!-- 头部 end -->
本文转载自: https://blog.csdn.net/qq_23073811/article/details/123403225
版权归原作者 coderYYY 所有， 如有侵权，请联系我们删除。
版权归原作者 coderYYY 所有， 如有侵权，请联系我们删除。