html静态页面作业——绿色特产商城购物网(11页) HTML+CSS+JavaScript 网页设计作业,网页制作作业, 学生网页作业, 网页作业成品, 网页作业模板

news/2024/12/29 2:31:58/

HTML5期末大作业:绿色特产商城网站设计——绿色特产商城购物网(11页) HTML+CSS+JavaScript 网页设计作业,网页制作作业, 学生网页作业, 网页作业成品, 网页作业模板 ,网页作业定制

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

作品介绍

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

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

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

文章目录

  • HTML5期末大作业:绿色特产商城网站设计——绿色特产商城购物网(11页) HTML+CSS+JavaScript 网页设计作业,网页制作作业, 学生网页作业, 网页作业成品, 网页作业模板 ,网页作业定制
  • 作品介绍
  • 一、作品展示
  • 二、文件目录
  • 三、代码实现
  • 四、学习资料
  • 五、更多源码

一、作品展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现


<!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" />
<title>本亲生活网</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="script/global.js" type="text/javascript"></script>
<script src="script/head.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<link rel="stylesheet" type="text/css" href="css/basic.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="style/base.css" />
<link rel="stylesheet" href="style/head.css" /><body><!--抬头开始--><div class="top"><div class="top1">
<div class="top1_main"><span class="dl">您好,欢迎光临本亲生活网!<a href="denglu.html"> [请登录]</a>  <a href="zhuce.html">[免费注册]</a></span><span class="yh_zx"><a href="hyzx.html">用户中心</a>  |  <a href="#">我的订单</a>  |  <a href="#">帮助中心</a>  |  <a href="#">联系方式</a></span></div>
</div><div class="top_logo"><div class="logo"><a href="index.html"><img src="images/logo.jpg" width="338" height="113" / alt="本亲生活的logo标志"></a></div>
<div class="top_you"><div class="ss_1"><input name="key" type="text" id="key" value="请输入您要搜索的产品" size="30"      οnclick="if(value==defaultValue){value='';this.style.color='#898b8c'}"    onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style="color:#999; line-height:26px;" / class="ssk1"><input name="" value="搜 索" type="button" / class="button1"></div></div></div></div><!--抬头结束--><!--导航开始--><div class="headNav"><div class="navCon w1020"><div class="navCon-cate fl navCor"></div><dl><dt>酒种</dt><dd> <a href="#">白兰地</a> <a href="#">伏特加</a> <a href="#">朗姆酒</a> <a href="#">力娇酒</a> <a href="#">墨西哥烈酒</a> <a href="#">甜酒</a> <a href="#">威士忌</a> <a href="#">金酒</a> <a href="#">利口酒</a> </dd></dl><div class="fn-clear"></div></ul><ul class="itemright"><dl><dt>促销信息</dt></dl><div class="news-list"><p> <span class="red">[威士忌]</span> <a href="#">芝华士,月销万瓶!</a> </p></div><dl><dt>促销活动</dt></dl><div class="ad-list mt10"> <a href="#"><img src='http://img0.gjw.com/famous/2013/1115/51ee0f88c7664b099526214a45076686.jpg' width='210' height='100' /></a> <a href="#"><img src='http://img0.gjw.com/famous/2013/1115/0815723969be40cb8126353991470fb1.jpg' width='210' height='100' /></a> <a href="#"><img src='http://img0.gjw.com/famous/2013/1115/ce2c2e1eae804529b68785bfd92f5a44.jpg' width='210' height='100' /></a> </div></ul></div></li><li ><div class="cate-tag"> <strong><a href="#">黄酒</a></strong><div class="listModel"><p> <a href="#">石库门</a> <a href="#">女儿红</a> <a href="#">古越龙山</a> </p></div></div><div class="list-item hide"><ul class="itemleft"><dl><dt>品牌</dt><dd> <a href="#">石库门</a> <a href="#">和酒</a> <a href="#">古越龙山</a> <a href="#">女儿红</a> <a href="#">沙洲优黄</a> <a href="#">会稽山</a> <a href="#">塔牌</a> <a href="#">乌毡帽</a> <a href="#">唐宋黄酒</a> <a href="#">钱塘人家</a> <a href="#">咸亨黄酒</a> <a href="#">嘉善黄酒</a> <a href="#">绍兴师爷</a> <a href="#">梁祝</a> <a href="#">组合装</a> </dd></dl><div class="fn-clear"></div><dl><dt>年份</dt><dd> <a href="#">100年</a> <a href="#">10年</a> <a href="#">12年</a> <a href="#">15年</a> <a href="#">18年</a> <a href="#">20年</a> <a href="#">25年</a> <a href="#">30年</a> <a href="#">3年</a> <a href="#">5年</a> <a href="#">6年</a> <a href="#">8年</a> <a href="#">9年</a> <a href="#">常规年份</a> </dd></dl><div class="fn-clear"></div></ul><ul class="itemright"><dl><dt>促销活动</dt></dl><div class="ad-list mt10"> <a href="#"><img src='http://img0.gjw.com/famous/2013/1108/c58fc62653c64cfb8e7b93ce34733535.jpg' width='210' height='100' /></a> <a href="#"><img src='http://img0.gjw.com/famous/2013/1108/ee9514f6a1c341efb0889917e51072af.jpg' width='210' height='100' /></a> </div></ul></div></li><li ><div class="cate-tag"> <strong><a href="#">保健酒与啤酒</a></strong><div class="listModel"><p> <a href="#">百威</a> <a href="#">青岛</a> <a href="#">喜力</a> <a href="#">劲酒</a> </p></div></div><div class="list-item hide"><ul class="itemleft"><dl><dt>品牌</dt><dd> <a href="#">百威</a> <a href="#">喜力</a> <a href="#">青岛</a> <a href="#">劲酒</a> <a href="#">黄金酒</a> <a href="#">蓝莓酒</a> <a href="#">银杏</a> <a href="#">春生堂</a> <a href="#">张裕酒</a> <a href="#">丹力</a> <a href="#">桂花酒</a> <a href="#">森林大猫</a> <a href="#">卡力特</a> <a href="#">麒麟</a> <a href="#">凯撒</a> <a href="#">修士</a> <a href="#">黑森马蹄</a> <a href="#">威兰仕</a> <a href="#">科罗娜</a> <a href="#">蓝带</a> <a href="#">布格福斯</a> <a href="#">博瑞克</a> <a href="#">力兹堡</a> <a href="#">嘉士伯</a> <a href="#">美名格</a> <a href="#">阿登堡</a> <a href="#">博德</a> <a href="#">德福堡</a> <a href="#">德力士</a> <a href="#">朗克</a> <a href="#">麦德奥黑</a> <a href="#">威欧</a> <a href="#">威斯玛</a> <a href="#">朝日</a> <a href="#">彼乐</a> <a href="#">白鹳</a> <a href="#">德博</a> <a href="#">庄园主</a> <a href="#">德拉克</a> <a href="#">西藏青稞</a> </dd></dl><div class="fn-clear"></div></ul><ul class="itemright"><dl><dt>促销活动</dt></dl><div class="ad-list mt10"> <a href="#"><img src='http://img0.gjw.com/famous/2013/1108/882341974a8543cf93f2a7d18ff277ab.jpg' width='210' height='100' /></a> </div></ul></div></li><li><div class="float-list-dnav"> </div></li></ul></div></div><div class="navCon-menu fl"><ul><li><a class="curMenu" href="index.html">商城首页</a></li><li><a href="tplist.html">特色产品</a></li><li><a href="tplist.html">VIP专区</a></li><li><a href="#">服务支持</a></li><li><a href="newslist.html">相关资讯</a></li><li><a href="about.html">关于本亲</a></li></ul></div></div>
</div><!--导航结束--><!--会员注册开始--><div class="huiyuan_zc">
<div class="zhuce_1">邮箱注册</div>
<div class="zhuce_2"><div class="zhuce_left">
<div class="yhm_zc">常用邮箱:<input type="text" name="textfield"  class="zc_wbk" /></div>
<div class="yhm_zc">输入密码:<input type="text" name="textfield"  class="zc_wbk" /></div>
<div class="yhm_zc">再次输入:<input type="text" name="textfield"  class="zc_wbk" /></div>
<div class="yhm_zc"><span style="float:left;">&nbsp;&nbsp;&nbsp;验证码:<input type="text" name="textfield"  class="zc_wbk" / style="width:100px;"></span><span style="float:left; width:132px; height:32px; display:block; margin-left:5px; margin-top:5px;"><img src="images/yzm.jpg" width="120" height="32" /></span><span style="float:left;"><a href="#">看不清,再换一张</a></span></div><div class="zhuce_tjxx"><input name="" type="button"  value="" οnmοusedοwn="this.style.left='1px';this.style.top='1px';" οnmοuseup="this.style.left='0px';this.style.top='0px';"   / style="width:206px; height:35px ; border:none; background: url(images/zhuce_1.jpg); position:relative;"></div>
</div><div class="zhuce_right"><div class="zhuce_right1"><a href="denglu.html"><img src="images/dll.jpg" width="149" height="78" / style="margin-left:50px; margin-top:20px;"></a></div><div class="zhuce_right2"><img src="images/bqsy.jpg" width="228" height="209" /></div></div></div></div><!--会员注册结束--><!--中部开始--><div class="con_ny"></div><!--中部结束--><!--底部开始--><div class="footer_ys">
<div class="footer_ys1"></div>
</div><!--软文开始--><div class="ruanwen"><ul>
<li class="da">关于本亲</li>
<li><a href="#">公司简介</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">友情连接</a></li>
</ul><ul>
<li class="da">新手指南</li>
<li><a href="#">账户注册</a></li>
<li><a href="#">购物流程</a></li>
<li><a href="#">注册须知</a></li>
</ul><ul>
<li class="da">配送范围及须知</li>
<li><a href="#">配送范围</a></li>
<li><a href="#">配送须知</a></li>
<li><a href="#">配送时间</a></li>
</ul><ul>
<li class="da">支付方式</li>
<li><a href="#">货到付款</a></li>
<li><a href="#">在线支付</a></li>
<li><a href="#">其他方式支付</a></li>
</ul><ul>
<li class="da">售后服务</li>
<li><a href="#">退换货政策</a></li>
<li><a href="#">退换货办理流程</a></li>
<li><a href="#">退款说明</a></li>
</ul><ul>
<li class="da">帮助说明</li>
<li><a href="#">找回密码</a></li>
<li><a href="#">帮助中心</a></li>
<li><a href="#">隐私声明</a></li>
</ul></div><!--软文结束--><!--友情连接开始--><div class="links">
<div class="links_main">友情连接:&nbsp;<a href="#">郑州卓普科技</a> &nbsp; | &nbsp; 本亲生活网  &nbsp;|  &nbsp;郑州卓普科技 &nbsp; | &nbsp; 本亲生活网 &nbsp; | &nbsp; 郑州卓普科技 &nbsp; | &nbsp; 本亲生活网 &nbsp; | &nbsp; 郑州卓普科技 &nbsp; |  &nbsp;本亲生活网 &nbsp; |  &nbsp;郑州卓普科技 &nbsp; | &nbsp; 本亲生活网&nbsp;  |&nbsp;  郑州卓普科技  </div>
</div><div class="banquan">Copyright © 2014-2019 All Right Reserved 版权所有:本亲生活网 备案号: 豫ICP 450051256-1号<br /><div class="banquan2"><img src="images/xinr.jpg" width="589" height="51" /></div></div><!--友情链接结束--><!--底部结束--></body>
</html><SCRIPT Language=VBScript><!--//--></SCRIPT>

四、学习资料

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


五、更多源码

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


http://www.ppmy.cn/news/595171.html

相关文章

卓普zp900s手机root和data大小调整经验

见网上4.0的Root已经可以一键Root&#xff0c;于是拿自己手上ZOPO zp900s开刷。但手上的ROM版本&#xff0c;始终无法用一键Root搞定Root权限&#xff0c;根源在于/system区块始终无法用可写模式加载。 这种系统ROM锁定的情况下&#xff0c;唯有线刷其他ROM一途可行。 准备工…

红月之特装数据(转自官方)

头盔|项链|铠甲|裤子|手套|腰带|戒指|靴子|刀剑盾牌|长矛|手枪|手杖|弓|高科技武器|特殊道具|注射器|宠物特装 赛利安火之精灵附着在里面的衬衫&#xff1a;攻击打击力增加5%赛利安诺亚斯风灵靴灵水系 全部装备时,攻击力上升50%塔马斯黑暗之神附着在里面的衬衫,用此力量使敌人…

zp980刷机包android4.3,裸眼3D体验!卓普ZP200首款3D手机评测

【PConline 评测】3D手机相信不少人已经听过&#xff0c;也已经有人体验过&#xff0c;影像技术的发展带给我们更立体更优秀的视觉享受。3D技术发展至今&#xff0c;技术门槛已经不高&#xff0c;早已有一套较为完整的体系。HTC、LG等等手机厂商均为我们带来不少以3D为卖点的手…

串口-TCP调试助手

疫情期间待在家做项目&#xff0c;手头没有网络模块无法调试&#xff0c;就做了这个串口转TCP调试助手。 C#写的&#xff0c;将网络调试助手和串口助手整合了一下&#xff0c;实现数据转发。 由于项目需求和时间关系&#xff0c;只做了TCP Client模式&#xff0c;也就是说&am…

PyCharm 配置导入助手

PyCharm 配置导入助手 自动导入包设置。 1. Show import popup File -> Settings -> Editor -> Auto-Import popup [pɒp,ʌp]&#xff1a;n. 弹出&#xff0c;弹跳装置&#xff0c;发射References https://yongqiang.blog.csdn.net/

mathpix公式助手

输出行对应的格式说明 1&#xff1a;latex 2&#xff1a;markdown左对齐 P ( X i ) 1 N ∑ j 1 N 1 ( 2 π ) n / 2 ∣ C ∣ n / 2 exp ⁡ ( − 1 2 ( X j − X i ) T C − 1 ( X j − X i ) ) P\left(X_{i}\right)\frac{1}{N} \sum_{j1}^{N} \frac{1}{(2 \pi)^{n / 2}|C|^…

Matlab p文件解密

首先&#xff0c;P文件为了保护知识产权设计的一种加密文件&#xff0c;是不能查看的。 运行比较简单&#xff0c;和调用m文件方法一样。 下面是一些解释。 P文件是对应M文件的一种预解析版本&#xff08;preparsed version&#xff09;。因为当你第一次执行M文件时&#xf…

linux下安装p10k的详细过程,美化linux终端

下载zsh sudo apt-get install zsh sudo apt-get install git下载oh-my-zsh 因为zsh配置起来太麻烦了&#xff0c;直接安装oh-my-zsh即可&#xff0c;前往oh-my-zsh官网&#xff1a; https://ohmyz.sh 使用命令&#xff1a; sh−c"sh−c"(curl -fsSL https://raw.g…