15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > HTML5期末大作业:电商网站设计——粉色的鲜花礼品电商(4页) HTML+CSS+JavaScript

HTML5期末大作业:电商网站设计——粉色的鲜花礼品电商(4页) HTML+CSS+JavaScript

时间:2023-06-04 11:54:02 | 来源:网站运营

时间:2023-06-04 11:54:02 来源:网站运营

HTML5期末大作业:电商网站设计——粉色的鲜花礼品电商(4页) HTML+CSS+JavaScript 学生网上商城网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码:

HTML5期末大作业:电商网站设计——粉色的鲜花礼品电商(4页) HTML+CSS+JavaScript 学生网上商城网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码

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

HTML期末大作业文章专栏

作品介绍

1.网页作品简介 :HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。

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

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

@TOC

一、作品展示







二、文件目录







三、代码实现

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content="邓裕朋"> <meta name="Keywords" content="Ecshop商城开发"> <meta name="Description" content="一个月开发商城——邓裕朋"> <title>echsop商城首页</title> <!--引入外部css样式 start--> <link href="css/basic.css" style="text/css" rel="stylesheet"> <link href="css/web.css" style="text/css" rel="stylesheet"> <!--引入外部css样式 end--></head><style type="text/css"></style><body> <div id="TopMain"> <!--用来包d="Top"和d="Header的大盒子 便于吸顶效果计算 吸顶盒效果时 计算的高度 这样就自适应了"--> <!--头部广告开始 target="_blank" 在新窗口打开--> <div id="Top"> <a href="http://www.baidu.com" class="adv" target="_blank"> <img src="images/adv.jpg" /> </a> <img src="images/close.png" class="close" /> <!--头部广告右上角--> </div> <!--头部广告开始--> <!--标题开始--> <div id="Header"> <!--Logo 图片start--> <div class="Logo"><a href=""><img src="images/logo.png"></a></div> <!--Logo 图片end--> <!--Search start--> <div class="Search"> <form action="" method=""> <input type="text" class="Sea" /> <input type="submit" class="But" value="" /> </form> </div> <!--Search end--> <!--User start--> <div class="User"> <!--用户注册登录 start--> <!--用户注册登录前 start--> <!--<a href=""><font class="iconfont">&#xe7d4;</font>登录</a><a href=""><font class="iconfont">&#xf0073;</font>注册</a><a href=""><font class="iconfont">&#xe69d;</font>加入购物车</a>--> <!--用户注册登录前 end--> <!--用户注册登录后 start--> <span>您好,dyp123,欢迎你回来! <a href="">用户中心</a>|<a href="">退出</a></span> <font class="iconfont">&#xe69d;</font><a href="">加入购物车</a> <!--用户注册登录后 end--> <!--用户注册登录 start--> </div> <!--User end--> </div> <!--标题结束--> </div> <!--网站导航 start --> <div id="Logo"> <!-- 吸顶盒导航:滚动到一定高度 给<div id="Logo" ></div>导航加上class="gd"--> <ul> <li class="frist"> <font class="iconfont">&#xe637;</font>全部商品分类 <div class="Menu"> <ol> <li> <h3>节日礼物</h3> <p><a href="">生日</a><a href="">表白</a><a href="">订婚</a><a href="">结婚</a></p> <div class="moreNav"></div> <div class="border_top"></div> <div class="border_bottom"></div> <div class="border_right"></div> </li> <li> <h3>生日礼物</h3> <p><a href="">生日</a><a href="">表白</a><a href="">订婚</a><a href="">结婚</a></p> <div class="moreNav"></div> <div class="border_top"></div> <div class="border_bottom"></div> <div class="border_right"></div> </li> <li> <h3>蛋糕</h3> <p><a href="">生日</a><a href="">表白</a><a href="">订婚</a><a href="">结婚</a></p> <div class="moreNav"></div> <div class="border_top"></div> <div class="border_bottom"></div> <div class="border_right"></div> </li> <li> <h3>商务礼物</h3> <p><a href="">生日</a><a href="">表白</a><a href="">订婚</a><a href="">结婚</a></p> <div class="moreNav"></div> <div class="border_top"></div> <div class="border_bottom"></div> <div class="border_right"></div> </li> <li> <h3>节个性定制</h3> <p><a href="">生日</a><a href="">表白</a><a href="">订婚</a><a href="">结婚</a></p> <div class="moreNav"></div> <div class="border_top"></div> <div class="border_bottom"></div> <div class="border_right"></div> </li> <li> <h3>鲜花</h3> <p><a href="">生日</a><a href="">表白</a><a href="">订婚</a><a href="">结婚</a></p> <div class="moreNav"></div> <div class="border_top"></div> <div class="border_bottom"></div> <div class="border_right"></div> </li> </ol> </div> </li> <li><a href="">首页</li> <li><a href="">节日礼物</a></li> <li><a href="">生日礼物</a></li> <li><a href="">蛋糕</a></li> <li><a href="">商物礼物</a></li> <li><a href="">个性定制</a></li> <li><a href="">鲜花</a></li> <li class="last"></li> </ul> </div> <!--网站导航 end--> <!--第一部分 start--> <div id="Part1"> <div class="PartCon"> <!--news strat--> <div class="news"> <!-- 1、在News大盒子里面,构建两个大小一模一样大小的长方形,一个用来设置背景透明,一个利用绝对定位,盖在透明图层上面,来用放内容 --> <div class="newsOpacity"></div> <div class="newsCon"> <!--咨询快讯 start--> <div class="newsKx"> <h3>最新快讯</h3> <ul> <li> <a href="" class="frist"> <font>[ 特惠 ]</font> 1月1店庆趴 爆品嗨抢</a> </li> <li> <a href=""> <font>[ 公告 ]</font>“让爱飘香”公益</a> </li> <li> <a href=""> <font>[ 特惠 ]</font> 1月1商品全场五折</a> </li> <li> <a href=""> <font>[ 特惠 ]</font> 1月1店庆趴 爆品嗨抢</a> </li> <li> <a href=""> <font>[ 公告 ]</font>“让爱飘香”公益</a> </li> </ul> </div> <!--咨询快讯 end--> <div class="newsKx Datatx"> <h3>节日提醒</h3> <ul> <li> <a href="" title="[ 6.21 ] 父亲节如何选择礼物"> <font>[ 6.21 ] 父亲节</font> 进入专题页</a> </li> <li> <a href="" title="[ 6.21 ] 七夕节如何选择礼物"> <font>[ 8.21 ] 七夕</font> 进入专题页</a> </li> <li> <a href="" title="[ 6.21 ] 光棍节如何选择礼物"> <font>[ 11.11 ] 光棍节</font> 进入专题页</a> </li> <li> <a href="" title="[ 6.21 ] 光棍节如何选择礼物"> <font>[ 11.11 ] 光棍节</font> 进入专题页</a> </li> </ul> </div> </div> </div> <!--news end--> <!--flash start--> <div class="flash"> <!--左右切换按钮 start--> <a href="javascript:void(0)" class="prev"></a> <a href="javascript:void(0)" class="next"></a> <!--左右切换按钮 end--> <!--图片滚动 start--> <div class="scroll"> <img style="left:0;" src="images/flash1.jpg" /> <img src="images/flash2.jpg" /> <img src="images/flash3.jpg" /> <img src="images/flash4.jpg" /> <img src="images/flash5.png" /> <img src="images/flash6.jpg" /> </div> <!--图片滚动 end--> <!--滚动按钮 start--> <div class="But"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <div> <!--滚动按钮 end--> </div> <!--flash end--> </div> </div> <!--第一部分 end--> <div style="clear:both"></div> <!--主题内容start--> <div id="Main"> <!--今日新品 start--> <div id="NewProduct"> <div class="title"> <font class="datexp">&#xe62a;</font> <!--今日新品图标--> <span class="new">今日新品</span> <span class="data">每天8:00新品特卖</span> <span class="go"><font class="gohyp">&#xe609;</font>换一批</span> <div style="clear:both"></div> <div class="Product"> <div class="imgList" style="display:block;"> <dl> <dt><font class="iconfont">&#xe60b;</font>距离结束:<font>2</font><font>16</font><font>53</font><font>31</font></dt> <dd><img src="images/bimg.png" width="190px" height="183px" /></dd> <dd> <font class="iconfont">&#xe6b2;</font>共有 <font>1000</font>个人购买</dd> </dl> <dl> <dt><font class="iconfont">&#xe60b;</font>距离结束:<font>2</font><font>16</font><font>53</font><font>31</font></dt> <dd><img src="images/dg_img1.jpg" width="190px" height="183px" /></dd> <dd> <font class="iconfont">&#xe6b2;</font>共有 <font>1000</font>个人购买</dd> </dl> <dl> <dt><font class="iconfont">&#xe60b;</font>距离结束:<font>2</font><font>16</font><font>53</font><font>31</font></dt> <dd><img src="images/dg_img2.jpg" width="190px" height="183px" /></dd> <dd> <font class="iconfont">&#xe6b2;</font>共有 <font>1000</font>个人购买</dd> </dl> <dl> <dt><font class="iconfont">&#xe60b;</font>距离结束:<font>2</font><font>16</font><font>53</font><font>31</font></dt> <dd><img src="images/dg19.jpg" width="190px" height="183px" /></dd> <dd> <font class="iconfont">&#xe6b2;</font>共有 <font>1000</font>个人购买</dd> </dl> <dl> <dt><font class="iconfont">&#xe60b;</font>距离结束:<font>2</font><font>16</font><font>53</font><font>31</font></dt> <dd><img src="images/dg17.jpg" width="200px" height="183px" /></dd> <dd> <font class="iconfont">&#xe6b2;</font>共有 <font>1000</font>个人购买</dd> </dl> </div> <div class="imgList"> <dl> <dt><font class="iconfont">&#xe60b;</font>距离结束:<font>2</font><font>16</font><font>53</font><font>31</font></dt> <dd><img src="images/dg24.jpg" width="190px" height="183px" /></dd> <dd> <font class="iconfont">&#xe6b2;</font>共有 <font>1000</font>个人购买</dd> </dl> <dl> <dt><font class="iconfont">&#xe60b;</font>距离结束:<font>2</font><font>16</font><font>53</font><font>31</font></dt> <dd><img src="images/dg27.jpg" width="190px" height="183px" /></dd> <dd> <font class="iconfont">&#xe6b2;</font>共有 <font>1000</font>个人购买</dd> </dl> <dl> <dt><font class="iconfont">&#xe60b;</font>距离结束:<font>2</font><font>16</font><font>53</font><font>31</font></dt> <dd><img src="images/dg23.jpg" width="190px" height="183px" /></dd> <dd> <font class="iconfont">&#xe6b2;</font>共有 <font>1000</font>个人购买</dd> </dl> <dl> <dt><font class="iconfont">&#xe60b;</font>距离结束:<font>2</font><font>16</font><font>53</font><font>31</font></dt> <dd><img src="images/dg26.jpg" width="190px" height="183px" /></dd> <font>¥30.0</font> </h3> </li> </ul> </div> </div> <!--节日礼物结束--> </div> <div style="clear:both"></div> <!--主题内容 end--> <!--商城底部 footer start--> <img src="images/f.jpg" class="fbg" /> <div id="Footer2"> <dl class="frist"> <dt><a href="#">关于我们</a></dt> <dd><a href="#">诚聘英才</a></dd> <dd><a href="#">品牌入驻</a></dd> <dd><a href="#">友情链接</a></dd> </dl> <dl> <dt><a href="#">关于我们</a></dt> <dd><a href="#">诚聘英才</a></dd> <dd><a href="#">品牌入驻</a></dd> <dd><a href="#">友情链接</a></dd> </dl> <dl> <dt><a href="#">关于我们</a></dt> <dd><a href="#">诚聘英才</a></dd> <dd><a href="#">品牌入驻</a></dd> <dd><a href="#">友情链接</a></dd> </dl> <dl> <dt><a href="#">关于我们</a></dt> <dd><a href="#">诚聘英才</a></dd> <dd><a href="#">品牌入驻</a></dd> <dd><a href="#">友情链接</a></dd> </dl> <dl> <dt><a href="#">关于我们</a></dt> <dd><a href="#">诚聘英才</a></dd> <dd><a href="#">品牌入驻</a></dd> <dd><a href="#">友情链接</a></dd> </dl> <dl> <dt><a href="#">关于我们</a></dt> <dd><a href="#">诚聘英才</a></dd> <dd><a href="#">品牌入驻</a></dd> <dd><a href="#">友情链接</a></dd> </dl> <dl class="last"> <dt>客服在线</dt> <dd>4006-600-00</dd> <dd> <a href="http://wpa.qq.com/msgrd?v=3&uin=1209885250&site=qq&menu=yes" target="_blank"><img src="images/QQ.jpg" /></a></dd> </dl> <div style="clear:both"></div> </div> <!--版权 start--> <p class="copy">Copyright © 2015-2017 www.wtu.edu.cn All Rights Reserved 版权所有:杭州亲友有限公司 备案号:备13016888号</p> <!--版权 end--> <!--商城底部 footer end--> <!--引入jQuery官方类库--> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <!--引入外部js--> <script type="text/javascript" src="js/index.js"></script></body></html>






四、学习资料

~ 关注我,点赞博文~ 每天带你涨知识!

相关问题可以相互学习,可关注↓公Z号 获取更多源码 !

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程) 适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站





五、更多源码

HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他* 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!



关键词:鲜花,礼品,作业,设计

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭