1、引言
设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决
2、作品介绍
购物网站采用html，css技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，回获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。
2.1、作品简介方面
购物网站系统采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选
2.2、作品二次开发工具
此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）。
2.3、作品技术介绍
html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计
3、作品演示
3.1、首页
相关代码：
<!--轮播-->
<div id="lunbo" class="t">
<div id="box">
<div id="boxKey">
<span id="before"><em></em></span>
<span id="next"><em></em></span>
</div>
<ul id="picbox">
<li class="bigPic"><a href="#"><img src="img/index/lunbo_img1.jpg" alt="" /></a></li>
<li class="bigPic"><a href="#"><img src="img/index/lunbo_img2.jpg" alt="" /></a></li>
<li class="bigPic"><a href="#"><img src="img/index/lunbo_img3.jpg" alt="" /></a></li>
<li class="bigPic"><a href="#"><img src="img/index/lunbo_img4.jpg" alt="" /></a></li>
<li class="bigPic"><a href="#"><img src="img/index/lunbo_img5.jpg" alt="" /></a></li>
</ul>
<ul id="btnBox">
<li class="Btn"></li>
<li class="Btn"></li>
<li class="Btn"></li>
<li class="Btn"></li>
<li class="Btn"></li>
</ul>
</div>
</div>
<!--每周惠选-->
<div id="weekly" class="t">
<div class="weeklyInfo c">
<div class="weeklyInfoContent">
<a href="#"><img src="img/index/hp_weeklyspecial1.jpg"/></a>
<a href="#"><img src="img/index/hp_weeklyspecial2.jpg"/></a>
<a href="#"><img src="img/index/hp_weeklyspecial3.jpg"/></a>
</div>
</div>
</div>
<!--品牌-->
<div id="brand" class="t">
<div class="brandTitlle">
<div class="brandTitlleContent c">
<h2 class="brandTitlleContentL l"></h2>
<ul class="brandTitlleContentR r">
<li class="active"><a href="">热门品牌</a><em></em></li>
<li><a href="">独家品牌</a><em></em></li>
<li><a href="">全部品牌</a></li>
</ul>
</div>
</div>
<div id="brandBody">
<div id="brandBodyContent" class="c">
<!--小轮播-->
<div id="brandBodyLunbo" class="l">
<div id="brandBodyLunboBox">
<div id="brandBoxKey">
<span id="sbefore"><em></em></span>
<span id="snext"><em></em></span>
</div>
<ul id="spicbox">
<li class="sbigPic"><a href="#"><img src="img/index/brand_img1.jpg" alt="" /></a></li>
<li class="sbigPic"><a href="#"><img src="img/index/brand_img2.jpg" alt="" /></a></li>
</ul>
<ul id="sbtnBox">
<li class="sBtn"></li>
<li class="sBtn"></li>
</ul>
</div>
</div>
<div class="brandBodyContentR r">
<ul class="brandBodyIcons">
<!--brand动态创建-->
</ul>
</div>
</div>
</div>
</div>
<!--brand01-->
<div id="brandTw0" class="t">
<div class="brandTitlle01 t">
<div class="brandTitlleContent01 c">
<h2 class="brandTitlleContentL brandTitlleContentL01 l"></h2>
</div>
</div>
<div class="brand01Info t">
<ul class="brand01InfoConent c">
<div class="brand01InfoConentList">
<a href="#"><img src="img/index/brand01_img1.jpg"/></a>
<ul class="brand01InfoProduct">
<li>
<a href="#">
<div class="brand01name1">LANCOME</div>
<div class="brand01name2">兰蔻新精华肌底液</div>
<div class="brand01Price">￥760.00</div>
<img src="img/index/brand01_spic1.jpg" />
</a>
</li>
<li>
<a href="#">
<div class="brand01name1">LANCOME</div>
<div class="brand01name2">兰蔻新精华肌底液</div>
<div class="brand01Price">￥760.00</div>
<img src="img/index/brand01_spic2.jpg" />
</a>
</li>
</ul>
</div>
<div class="brand01InfoConentList brandList1 r">
<a href="#"><img src="img/index/brand01_img3.jpg"/></a>
<ul class="brand01InfoProduct">
<li>
<a href="#">
<div class="brand01name1">LANCOME</div>
<div class="brand01name2">兰蔻新精华肌底液</div>
<div class="brand01Price">￥760.00</div>
<img src="img/index/brand01_spic3.jpg" />
</a>
</li>
<li>
<a href="#">
<div class="brand01name1">LANCOME</div>
<div class="brand01name2">兰蔻新精华肌底液</div>
<div class="brand01Price">￥760.00</div>
<img src="img/index/brand01_spic4.jpg" />
</a>
</li>
</ul>
</div>
<div class="brand01InfoConentList">
<a href="#"><img src="img/index/brand01_img3.jpg"/></a>
<ul class="brand01InfoProduct">
<li>
<a href="#">
<div class="brand01name1">LANCOME</div>
<div class="brand01name2">兰蔻新精华肌底液</div>
<div class="brand01Price">￥760.00</div>
<img src="img/index/brand01_spic5.jpg" />
</a>
</li>
<li>
<a href="#">
<div class="brand01name1">LANCOME</div>
<div class="brand01name2">兰蔻新精华肌底液</div>
<div class="brand01Price">￥760.00</div>
<img src="img/index/brand01_spic6.jpg" />
</a>
</li>
</ul>
</div>
<div class="brand01InfoConentList brandList1 r">
<a href="#"><img src="img/index/brand01_gif.gif"/></a>
</div>
</ul>
</div>
</div>3.2、商品详情页
相关代码：
<div id="productDetail t">
<div class="detailContent c">
<div class="detailNav">
<a href="index.html">首页</a>
<span> > </span>
<a href="#">彩妆</a>
<span> > </span>
<a href="#">眼部彩妆</a>
<span> > </span>
<a href="#">植村秀</a>
<span> > </span>
<span>植村秀16色眼影盘</span>
</div>
<div class="productImg">
<div class="imgVideo">
<div class="changeBig"></div>
<img class="picture l" src="img/detail/detail_img1.jpg" />
<div class="bigImgVideo">
<img class="bpicture" src="img/detail/detail_img1.jpg" />
</div>
<div class="square"></div>
</div>
<div class="btnBox l">
<div class="Arow l">
<div class="leftArow cant l"></div>
</div>
<ul class="picBtn">
<li class="noOpacity"><img src="img/detail/detail_picbtn.jpg"</li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="Arow l">
<div class="rightArow cant"></div>
</div>
</div>
</div>
<div class="productInfo l">
<div class="productTitle l">
<div class="titleBox l">
<h1>植村秀16色眼影盘</h1>
<p class="p1">SHU UEMURA PALETTE BURNT/FRSH NUDES</p>
<p class="p2">艺术大师匠心力作，玫瑰大盘，大开眼界</p>
</div>
<img src="img/detail/detail_logo.png" />
</div>
<div class="productPrice l">
<p class="one l">价格</p>
<p class="two l">￥</p>
<p class="three l">930</p>
<p class="four l">新品</p>
</div>
<div class="activity l">
<p class="actTitle l">活动</p>
<p class="mainList l">满赠</p>
<p class="main l">购买任意植村秀产品，即可获赠植村秀坤音四子洁颜魅力明信片一张。限量1000份，赠完即止。</p>
<div class="salemain l">
促销详情
<i class="popup cant"></i>
<div class="popupInfo">
<i></i>
<div class="popupInfoContent">
<div class="popupInfoContentT">
<span class="popupInfoContentText1">满赠</span>
<span class="popupInfoContentText2">购买任意植村秀产品，即可获赠植村秀坤音四子洁颜魅力明信片一张。限量1000份，赠完即止。</span>
</div>
<div class="popupProduct">
<span class="popupProductT">赠品档位一: 满1件即可获赠1件赠品</span>
</div>
<div class="popupProductList">
<div class="popupProductListDetail">
<img src="img/detail/detail_info0.jpg" />
<span>X1</span>
</div>
<div class="popupProductListBottom">
<span>植村秀坤音四子洁颜魅力明信片赠品</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="size l">
<p class="actTitle l">规格</p>
<p class="size1 l"><a href="#">全能赤茶盘</a></p>
<p class="size2 l">玫瑰限定盘
<span class="sizeDetail">暂时无货</span><em></em>
</p>
</div>
<div class="goButton l">
<div class="number l">
<div class="numberBox l">
<input type="text" class="numOne" value="1"/>
</div>
<div class="arrow l">
<div class="topArrow">
<div class="icon1"></div>
</div>
<div class="bottomArrow l">
<div class="icon2 l"></div>
</div>
</div>
</div>
<div class="addCar l">
<p><a href="shoppingCar.html" target="_blank" style="color: #fff;">加入购物车</a></p>
<div class="goCar l"></div>
</div>
</div>
</div>
</div>
<div class="productDetailInfo c">
<div class="guesYouLike l">
<div class="title l"><p>猜你喜欢</p></div>
<div class="product l">
<!---->
</div>
</div>
<div id="mainModule" class="l">
<div class="rightMainNav t l">
<ul>
<li class="now">基本信息</li>
<li><a href="#thePosts0">相关帖子</a></li>
<li><a href="#thePosts1">所有评论</a></li>
<li><a href="#thePosts2">产品咨询</a></li>
<li><a href="#thePosts3">配送信息</a></li>
</ul>
</div>
<div class="leftLine l">
<div class="smallLeftLine l">
<ul>
<li>规格：全能赤茶盘</li>
<li>货号：469120</li>
</ul>
</div>
<div class="smallLeftLineDetail l">
<ul>
<li>
<div class="LeftLineDetailT t">
<div class="icon l"></div>
<p>产品功效</p>
</div>
<div class="text t l">
<p>大盘·潮流色系，16种热门潮色随心搭配;大盘· 全妆 —— 玫瑰大盘，包罗百变眼妆，大热眼妆即刻打造;大盘· 全型 —— 一大盘全适配亚洲眼型，拒绝肿泡眼，就是要电眼大开</p>
</div>
</li>
<li>
<div class="LeftLineDetailT t">
<div class="icon l"></div>
<p>主要成分</p>
</div>
<div class="text t l">
<p>硼硅酸钠钙、滑石粉、硼硅酸铝钙、云母(CI 77019)</p>
</div>
</li>
<li>
<div class="LeftLineDetailT t">
<div class="icon l"></div>
<p>产地</p>
</div>
<div class="text t l">
<p>日本</p>
</div>
</li>
</ul>
</div>
<div id="thePosts0" class="l">
<div class="postsTittle">
<p style="font-size: 24px;margin-top: 50px;">相关帖子</p>
<p style="font-size: 17px;margin-top: 13px;">RELATED POSTS</p>
<div class="shotLine l"></div>
</div>
<div class="titllenoPost l">
<div class="noPost l">
<div class="write l"></div>
<p>此商品暂时还没有相关帖子哦~</p>
</div>
</div>
</div>
<div id="thePosts1" class="l">
<div class="postsTittle">
<p style="font-size: 24px;margin-top: 50px;">商品评论</p>
<p style="font-size: 17px;margin-top: 13px;">COMMENTS</p>
<div class="shotLine l"></div>
</div>
<div class="titllenoPost l">
<div class="noPost l">
<div class="write l"></div>
<p>此商品暂时还没有评价子哦~</p>
</div>
</div>
</div>
<div id="thePosts2" class="l">
<div class="postsTittle">
<p style="font-size: 24px;margin-top: 50px;">产品咨询</p>
<p style="font-size: 17px;margin-top: 13px;">Q&A</p>
<div class="shotLine l"></div>
</div>
<div class="titllenoPost l">
<div class="noPost l">
<div class="write l"></div>
<p>有疑问，来发布第一个问题吧~</p>
</div>
</div>
</div>
<div id="thePosts3" class="l">
<div class="postsTittle">
<p style="font-size: 24px;margin-top: 50px;">支付及配送</p>
<p style="font-size: 17px;margin-top: 13px;">PAYMENT&SHIPPING</p>
<div class="shotLine l"></div>
</div>
<img class="l" src="img/detail/detail_info1.jpg" style="width: 960px;height: 320px;"/>
</div>
<div id="thePosts" class="l">
<div class="postsTittle">
<p style="font-size: 24px;margin-top: 50px;">价格声明</p>
<p style="font-size: 17px;margin-top: 13px;">PRICE STATEMENT</p>
<div class="shotLine l"></div>
</div>
<img class="l postImg" src="img/detail/detail_info2.jpg" style="width: 960px;height: 81px;"/>
</div>
<div id="thePosts" class="l">
<div class="postsTittle">
<p style="font-size: 24px;margin-top: 50px;">退换货规定</p>
<p style="font-size: 17px;margin-top: 13px;">RETURN PROVISIONS</p>
<div class="shotLine l"></div>
</div>
<img class="l postImg" src="img/detail/detail_info3.jpg" style="width: 960px;height: 260px;"/>
</div>
</div>
</div>
</div>
</div>3.3、购物车界面
<div id="chekoutBody">
<div class="checkoutProduct t">
<div class="checkoutProductInfo c">
<div class="checkoutTable">
<em class="checkBox checkIcon"></em>
<ul class="checkoutTableHeader">
<li>全选</li>
<li>商品信息</li>
<li>单价（元）</li>
<li>数量</li>
<li>小计（元）</li>
<li>操作</li>
</ul>
<div class="checkoutProductBody">
<div class="productBodyItem">
<div class="productBodyItemContent">
<em class="checkBox checkIcon"></em>
<a class="itemImg" href=""><img src="img/shoppingCar/shoppingbag_img1.jpg"/></a>
<div class="itemInfo">
<h5>DIOR</h5>
<a href="">克丽丝汀迪奥烈艳蓝金挚红唇膏</a>
<div><span>规格：3.2g,999<i></i></span></div>
</div>
<div class="itemInfoUnion1">
<span class="itemInfoUnionPice">320.00</span>
</div>
<div class="itemInfoUnion2">
<div class="itemInfoUnion2Module l">
<i class="itemInfoUnion2ModuleI l itemInfoUnion2ModuleI1">-</i>
<input type="text" class="itemInfoUnion2ModuleNum l" value="1"/>
<i class="itemInfoUnion2ModuleI l itemInfoUnion2ModuleI2">+</i>
</div>
</div>
<div class="itemInfoUnion3">
<span class="sumNum">320.00</span>
</div>
<div class="itemInfoUnion4">
<i class="delete"></i>
</div>
</div>
<div class="productBodyItemContent">
<em class="checkBox checkIcon"></em>
<a class="itemImg" href="detail.html"><img src="img/shoppingCar/shoppingbag_img2.jpg"/></a>
<div class="itemInfo">
<h5>SHUUEMURA</h5>
<a href="">植村秀16色眼影盘</a>
<div><span>规格：全能赤茶盘<i></i></span></div>
</div>
<div class="itemInfoUnion1">
<span class="itemInfoUnionPice">930.00</span>
</div>
<div class="itemInfoUnion2">
<div class="itemInfoUnion2Module l">
<i class="itemInfoUnion2ModuleI l itemInfoUnion2ModuleI1">-</i>
<input type="text" class="itemInfoUnion2ModuleNum l" value="1"/>
<i class="itemInfoUnion2ModuleI l itemInfoUnion2ModuleI2">+</i>
</div>
</div>
<div class="itemInfoUnion3">
<span class="sumNum">930.00</span>
</div>
<div class="itemInfoUnion4">
<i class="delete"></i>
</div>
</div>
<div class="productBodyItemContent">
<em class="checkBox checkIcon" oc="0"></em>
<a class="itemImg" href=""><img src="img/shoppingCar/shoppingbag_img3.jpg"/></a>
<div class="itemInfo">
<h5>LANCOME</h5>
<a href="">兰蔻精华肌底液奢护惊喜礼盒</a>
<div><span>规格：套装<i></i></span></div>
</div>
<div class="itemInfoUnion1">
<span class="itemInfoUnionPice">930.00</span>
</div>
<div class="itemInfoUnion2">
<div class="itemInfoUnion2Module l">
<i class="itemInfoUnion2ModuleI l itemInfoUnion2ModuleI1">-</i>
<!--<span class="itemInfoUnion2ModuleNum l">1</span>-->
<input type="text" class="itemInfoUnion2ModuleNum l" value="1"/>
<i class="itemInfoUnion2ModuleI l itemInfoUnion2ModuleI2">+</i>
</div>
</div>
<div class="itemInfoUnion3">
<span class="sumNum">930.00</span>
</div>
<div class="itemInfoUnion4">
<i class="delete"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>项目目录结构：
总结
以上就是本次项目的全部内容，需要交流或者获取代码请关注微信公众号：coding加油站获取
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
