HTML5期末大作业:电商网站设计——仿品优购 (毕业设计含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码


常见网页设计作业题材有 ​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他​​ 等网页设计题目, ​​A+水平作业​​, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!


????HTML期末大作业文章专栏

作品介绍

1.网页作品简介

2.网页作品编辑​​:作品下载后可使用任意HTML编辑软件(如:​​DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++​​ 等任意HTML软件编辑修改网页)。

3.网页作品技术​:Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了logo(源文件),基本期末作业所需的知识点全覆盖。


文章目录


一、作品展示

1.首页

基于HTML+CSS+JavaScript (品优购)电商购物项目的设计与实现(计算机毕业设计)_html

2.商品列表

基于HTML+CSS+JavaScript (品优购)电商购物项目的设计与实现(计算机毕业设计)_css_02

3.购物车

基于HTML+CSS+JavaScript (品优购)电商购物项目的设计与实现(计算机毕业设计)_html期末大作业_03

4.商品订单

5.商品结算

6.登录/注册


二、文件目录

基于HTML+CSS+JavaScript (品优购)电商购物项目的设计与实现(计算机毕业设计)_html_04

论文设计(9500字)

基于HTML+CSS+JavaScript (品优购)电商购物项目的设计与实现(计算机毕业设计)_html期末大作业_05

基于HTML+CSS+JavaScript (品优购)电商购物项目的设计与实现(计算机毕业设计)_html期末大作业_06

基于HTML+CSS+JavaScript (品优购)电商购物项目的设计与实现(计算机毕业设计)_css_07

三、代码实现

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 网站说明 -->
<meta name="description"
content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!" />
<!-- 关键字 -->
<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

<!-- 引入favicon图标 -->
<link rel="shortcut icon" href="favicon.ico" />
<!-- 引入我们初始化样式文件 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入我们公共的样式文件 -->
<link rel="stylesheet" href="css/common.css">
<!-- 引入我们index.css文件 -->
<link rel="stylesheet" href="css/dingdan.css">
</head

<body>
<!-- 快捷导航模块 start -->
<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎您! </li>
<li>
<a href="">
<img src="./images/user.png" alt=""> 
<span>孙钰欣</span>
</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li> <a href="javascript:;">我的订单</a> </li>
<li></li>
<li class="arrow-icon"> <a href="javascript:;">我的品优购</a> </li>
<li></li>
<li> <a href="javascript:;">品优购会员</a> </li>
<li></li>
<li> <a href="javascript:;">企业采购</a> </li>
<li></li>
<li class="arrow-icon"> <a href="javascript:;">关注品优购</a> </li>
<li></li>
<li class="arrow-icon"> <a href="javascript:;">客户服务</a> </li>
<li></li>
<li class="arrow-icon"> <a href="javascript:;">网站导航</a> </li>
</ul>
</div>
</div>
</section>
<!-- 快捷导航模块 end -->

<div class="content w">
<div class="logo">
<img src="./images/logo.png" alt="">
</div>
<div class="jindu">
<ul>
<li>1</li>
<li></li>
<li>2</li>
<li></li>
<li>3</li>
<li></li>
<li>4</li>
</ul>
</div>
<div class="txt_xinxi">
<ul>
<li>1:待付款</li>
<li>2:待发货</li>
<li>3:待收货</li>
<li>4:已收货</li>
</ul>
</div>
<div class="foot">
<span>确认收货地址</span>
<a href="javascript:;">管理收货地址</a>
</div>

</div>
<div class="jisong w">
<span>
寄送至
</span>
<i></i>
<u></u>
<a href="javascript:;">
河南省 郑州市 金水区 东风路街道 白庙小区3号楼3单元 (孙钰欣 收)<b>178****9643</b> 默认地址
</a>
<strong><a href="javascript:;">修改本地址</a></strong>
</div>
<div class="dizhi w">
<ul>
<li>
<i></i>
<a href="javascript:;">
北京 北京市 顺义区 马坡镇 京顺路99号黑马程序员 (孙钰欣收) <b>178****9643</b>
</a>
</li>
<li>
<i></i>
<a href="javascript:;">
河南省 周口市 郸城县 洺南街道 民生路生活超市 (孙钰欣 收)<b>178****9643</b>
</a>
</li>
<li>
<i></i>
<a href="javascript:;">
河南省 郑州市 金水区 文化路街道 花园路和农业路交叉口向东500米,国际企业中心B座,23楼2309 (朱春志 收)<b>176****6980</b>
</a>
</li>
<li>
<a href="javascript:;">使用其他地址</a>
</li>
</ul>
<div class="yizhandaishou">
<span>菜鸟驿站免费代收服务</span>
<div class="yizhanxuanze">
<input type="checkbox"> <span>[菜鸟驿站] 河南省 郑州市 金水区
东风路街道正弘数码公寓南门向西50米小卖部旁消防通道内(电话:156****2171)(孙钰欣收)178****9643</span>
<a href="javascript:;">修改驿站</a>
</div>
</div>
</div>
<div class="dingdan w">
<h6>确认订单信息</h6>
<ul>
<li>店铺宝贝</li>
<li>商品属性</li>
<li>单价</li>
<li>数量</li>
<li>优惠方式</li>
<li>小计</li>
</ul>
<div class="fudong"></div>
<div class="xinxi">
<img src="./images/dingdanlogo.png" alt=""> 
<span>店铺: 花雨婵     卖家: 花雨婵</span>
<ul>
<li>
<img src="./images/iphone11.jpg" alt="">
<a href="#" class="mingcheng">iphone 11</a>
<a href="javascr:;">
<img src="./images/fukuan1.png" alt="">
<img src="./images/fukuan2.png" alt="">
<img src="./images/fukuan3.png" alt="">
</a><br>
<span>发货时间:付款后5天内</span>
</li>
<li>颜色:绿色</li>
<li>4998.00</li>
<li class="shuliang">
<button>-</button>
<input type="text" value="1">
<button>+</button>
</li>
<li>
<select>
<option>
已省31元:狂欢继续
</option>
</select>
</li>
<li>
<a href="#" style="color: #ff4400;">4998.00</a>
</li>
</ul>
<div class="feiyong">
<div class="left">
<label for="liuyan">给卖家留言:</label>
<textarea name="liuyan" id="liuyan" cols="50" rows="2">选填</textarea>
</div>
<div class="right_top">
运送方式:  普通配送 快递 免邮
<a href="#">0.00</a>
</div>
<div class="right_bottom">
 运费险:  
<input type="checkbox"> <span>运费险</span> 退换货可赔付11元
<a href="#">4.64</a>
</div>
<div class="foot">
<span>店铺合计(含运费) <a href="#">¥4998.00</a> </span>
</div>

</div>
</div>
<div class="taobaobi">
<span>
<input type="checkbox" checked> <a href="#">使用淘金币11个</a> <b>¥-0.11</b><br>
(你有11个,可用11个)
</span>
</div>
<div class="jiezhang w">
<input type="checkbox" id="py"> <label for="py">朋友代购</label>
<input type="checkbox" id="nm"> <label for="nm">匿名购买</label>
<input type="checkbox" id="hb"> <label for="hb">花呗分期 (最高3期免息)</label>
</div>
<div class="tijiao">
<div class="fukuan">
<p class="top">

<b>实付款:</b>
<a>¥4998.00</a>
</p>
<p class="bottom">
<b>寄送至:</b> 河南省 郑州市 新郑市 龙湖镇 河南机电职业学院 <br>
<b>收货人:</b> 好学生  138****9438
</p>
</div>
<button>提交订单</button>
<span>若价格变动,请在提交订单后联系卖家改价,并查看已买到的宝贝</span>
</div>
</div>



<!-- 底部模块的制作 start -->
<footer class="footer">
<div class="w">
<div class="mod_service">
<ul>
<li>
<h5></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障,提供发票</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障,提供发票</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障,提供发票</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障,提供发票</p>
</div>
</li>
</ul>
</div>
<div class="mod_help">
<dl>
<dt>服务指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>服务指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>服务指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>服务指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>服务指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>帮助中心</dt>
<dd>
<img src="images/wx_cz.jpg" alt="">
品优购客户端
</dd>
</dl>
</div>
<div class="mod_copyright">
<div class="links">
<a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 |
品优购公益 | English Site | Contact U
</div>
<div class="copyright">
地址:北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096 电话:400-618-4000 传真:010-82935100 邮箱: zhanghj+itcast.cn <br>
京ICP备08001421号京公网安备110108007702
</div>
</div>
</div>
</footer>
<!-- 底部模块的制作 end -->
</body>

</html>

四、学习资料

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站


五、更多源码

HTML5期末考核大作业源码​​* 包含 ​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他