15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > HTML5期末大作业:食品超市网站设计——食品超市-功能齐全(31页) 大学生简单个

HTML5期末大作业:食品超市网站设计——食品超市-功能齐全(31页) 大学生简单个

时间:2023-07-21 06:06:01 | 来源:网站运营

时间:2023-07-21 06:06:01 来源:网站运营

HTML5期末大作业:食品超市网站设计——食品超市-功能齐全(31页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载:

HTML5期末大作业:食品超市网站设计——食品超市-功能齐全(31页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, 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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/common.css" rel="stylesheet" type="text/css" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script> <script src="js/common_js.js" type="text/javascript"></script> <script src="js/footer.js" type="text/javascript"></script> <title>店铺专区</title> </head> <body> <head> <div id="header_top"> <div id="top"> <div class="Inside_pages"> <div class="Collection"> <a href="#" class="green">请登录</a> <a href="#" class="green">免费注册</a> </div> <div class="hd_top_manu clearfix"> <ul class="clearfix"> <li class="hd_menu_tit" data-addclass="hd_menu_hover"> <a href="#">首页</a> </li> <li class="hd_menu_tit" data-addclass="hd_menu_hover"> <a href="#">我的小充</a> </li> <li class="hd_menu_tit" data-addclass="hd_menu_hover"> <a href="#">消息中心</a> </li> <li class="hd_menu_tit" data-addclass="hd_menu_hover"> <a href="#">商品分类</a> </li> <li class="hd_menu_tit" data-addclass="hd_menu_hover"> <a href="#">我的购物车<b>(23)</b></a> </li> </ul> </div> </div> </div> <div id="header" class="header page_style"> <div class="logo"> <a href="index.html"><img src="images/logo.png" /></a> </div> <!--结束图层--> <div class="Search"> <div class="search_list"> <ul> <li class="current"><a href="#">产品</a></li> <li><a href="#">信息</a></li> </ul> </div> <div class="clear search_cur"> <input name="searchName" id="searchName" class="search_box" onkeydown="keyDownSearch()" type="text" /> <input name="" type="submit" value="搜 索" class="Search_btn" /> </div> <div class="clear hotword"> 热门搜索词:香醋&nbsp;&nbsp;&nbsp;茶叶&nbsp;&nbsp;&nbsp;草莓&nbsp;&nbsp;&nbsp;葡萄&nbsp;&nbsp;&nbsp;菜油 </div> </div> <!--购物车样式--> <div class="hd_Shopping_list" id="Shopping_list"> <div class="s_cart"> <a href="#">我的购物车</a> <i class="ci-right">&gt;</i ><i class="ci-count" id="shopping-amount">0</i> </div> <div class="dorpdown-layer"> <div class="spacer"></div> <!--<div class="prompt"></div><div class="nogoods"><b></b>购物车中还没有商品,赶紧选购吧!</div>--> <ul class="p_s_list"> <li> <div class="img"><img src="images/tianma.png" /></div> <div class="content"> <p class="name"><a href="#">产品名称</a></p> <p>颜色分类:紫花8255尺码:XL</p> </div> <div class="Operations"> <p class="Price">¥55.00</p> <p><a href="#">删除</a></p> </div> </li> </ul> <div class="Shopping_style"> <div class="p-total"><b>1</b>件商品 共计<strong>¥ 515.00</strong> </div> <a href="Shop_cart.html" title="去购物车结算" id="btn-payforgoods" class="Shopping" >去购物车结算</a > </div> </div> </div> </div> <!--菜单栏--> <div class="Navigation" id="Navigation"> <ul class="Navigation_name"> <li><a href="Home.html">首页</a></li> <li><a href="#">你身边的超市</a></li> <li><a href="#">预售专区</a><em class="hot_icon"></em></li> <li><a href="products_list.html">商城</a></li> <li><a href="#">半小时生活圈</a></li> <li><a href="#">好评商户</a></li> <li><a href="#">热销活动</a></li> <li><a href="Brands.html">联系我们</a></li> </ul> </div> <script> $("#Navigation").slide({ titCell: ".Navigation_name li", trigger: "click", }); </script> </div> </head> <!--店铺专区样式--> <div class="Inside_pages clearfix"> <div class="left_style"> <!--列表--> <div class="menu_styles"> <ul class="menu_list"> <li class="on"><em></em><a href="店铺专区.html">店铺专区</a></li> <li><em></em><a href="商品专区.html">商品专区</a></li> <li><em></em><a href="订单专区.html">订单专区</a></li> <li><em></em><a href="发货管理.html">发货管理</a></li> <li><em></em><a href="收款账号.html">收款账户</a></li> <li><em></em><a href="我的报表.html">我的报表</a></li> </ul> </div> </div> <div class="right_style"> <!--内容详细--> <div class="title_style"><em></em>店铺专区</div> <div class="content_style"> <!--添加店铺--> <!-- <div class="add_shops"> <h3>你好,目前你没有任何店铺!</h3> <a href="#">添加店铺</a> </div>--> <div class="Add_shop_style"> <a href="javascript:void(0)" id="newShop" onclick="addShop()" class="New_Shop_btn" >新增店铺</a > </div> <div class="shops_list"> <ul class="list_style"> <li class="img_link"> <a href="#"><img src="images/shop_logo.jpg" /></a ><span class="status">审核通过</span> </li> <li class="shopscontent"> <a href="#" class="title">浙江业祥科技股份有限公司</a> <p class="Introduction"> 杭州业祥科技发展有限公司成立于2003年,位于杭州市风景秀丽的科技创新型科技园区----杭州科技园。是安全技术防范领域的专业企业,集安全防范系统的设计研发、生产、销售及售后服务为一体的高科技企业。 </p> <p class="shops_operating"> <a href="#" class="View_info">查看详情</a ><a href="店铺专区(添加店铺).html" class="edit_shops" >编辑店铺</a ><a href="店铺公告.html" class="shops_Bulletin">店铺公告</a> </p> </li> </ul> <ul class="list_style"> <li class="img_link"> <a href="#"><img src="images/shop_logo.jpg" /></a ><span class="status">审核中</span> </li> <li class="shopscontent"> <a href="#" class="title">浙江业祥科技股份有限公司</a> <p class="Introduction"> 杭州业祥科技发展有限公司成立于2003年,位于杭州市风景秀丽的科技创新型科技园区----杭州科技园。是安全技术防范领域的专业企业,集安全防范系统的设计研发、生产、销售及售后服务为一体的高科技企业。 </p> <p class="shops_operating"> <a href="#" class="View_info">查看详情</a> </p> </li> </ul> <ul class="list_style"> <li class="img_link"> <a href="#"><img src="images/shop_logo.jpg" /></a ><span class="status">审核失败</span> </li> <li class="shopscontent"> <a href="#" class="title">浙江业祥科技股份有限公司</a> <p class="Introduction"> 杭州业祥科技发展有限公司成立于2003年,位于杭州市风景秀丽的科技创新型科技园区----杭州科技园。是安全技术防范领域的专业企业,集安全防范系统的设计研发、生产、销售及售后服务为一体的高科技企业。 </p> <p class="shops_operating"> <a href="#" class="View_info">查看详情</a ><a href="#" class="delete_shops">删除店铺</a> </p> </li> </ul> </div> </div> </div> </div> <!--网站地图--> <div class="fri-link-bg clearfix"> <div class="fri-link"> <div class="logo left margin-r20"> <img src="images/fo-logo.jpg" width="152" height="81" /> </div> <div class="left"> <img src="images/qd.jpg" width="90" height="90" /> <p>扫描下载APP</p> </div> <div class=""> <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> </dl> <dl> <dt>配送与支付</dt> <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> </dl> <dl> <dt>支付方式</dt> <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> </dl> <dl> <dt>帮助中心</dt> <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> </dl> </div> </div> </div> <!--网站地图END--> <!--网站页脚--> <div class="copyright"> <div class="copyright-bg"> <div class="hotline"> 为生活充电在线 <span>招商热线:****-********</span> 客服热线:400-****** </div> <div class="hotline co-ph"> <p>版权所有Copyright ©***************</p> <p>*ICP备***************号 不良信息举报</p> <p> 总机电话:****-*********/194/195/196 客服电话:4000****** 传 真:******** </p> </div> </div> </div> </body></html>






四、学习资料

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

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

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





五、更多源码

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



关键词:食品,简单,功能,大学生,作业,设计

74
73
25
news

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

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