HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript)

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

红色实用的礼品网商城网页、节日礼品购物网站、通用的礼品网商城模板html下载。主要有：登录、注册、礼品详情页、礼品列表页、收货人信息、订单详情页、支付完成等商城网页模板。

此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD, Vscode 所有编辑器均可使用）

网页作品布局方面：网页布局整体为LOGO、导航、轮播图、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。

网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。首页制作了留言表单，同时简单使用JavaScript制作了表单判断（提交时表单不能为空）
空）

文章目录

HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript)
作品介绍
一、作品演示
二、代码目录
三、代码实现
四、前端 `零基础入门到高级 `(视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
六、更多HTML期末大作业文章
七、更多表白源码

一、作品演示

1.首页

在这里插入图片描述

2. 登录/注册

在这里插入图片描述

3. 商品详情

在这里插入图片描述

4. 购物车

在这里插入图片描述

5.订单详情

在这里插入图片描述

6. 配送地址

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="清心老师">
  <meta name="Keywords" content="ecshop商城开发">
  <meta name="Description" content="一个月打造商城-清心主讲">
  <title>Ecshop商城开发详情页--清心老师</title>
 <!--引用外部样式-->
 <link type="text/css" rel="stylesheet"  href="css/basic.css">
 <link type="text/css" rel="stylesheet"  href="css/web.css">
 </head>
 <body>

<div id="TopMain">
	<!-- 广告开始 -->
	 <div id="topAdv"> 
		<a href="#"> <img src="images/adv.jpg" /> </a> 
		<img src="images/close.png"  class="close"/>
	 </div>
	<!-- 广告结束-->  

	<!--Top开始-->
	<div id="Top">
		<div class="banner"><a href="#"><img src="images/logo.png" /></a></div>
		<!--search begin-->
		<div class="search">
			<form>
				<input type="text"  class="txt"/>
				<input type="submit" class="but"  value=""/>
			</form>
		</div>
		<!--search end-->
		<div class="user">
			<!--用户登录前状态
			<font><span class="iconfont">&#xe60b;</span><a href="">登录</a></font>
			<font><span class="iconfont">&#xe60e;</span><a href="">注册</a></font>-->
			

			<!--用户登录后状态-->
			您好！wlm123,欢迎你回来 <a href="" class="usertxt">用户中心</a>｜<a href="" class="usertxt">退出</a>

			<font><span class="iconfont">&#xe646;</span><a href="LoginAndRegister.html">加入购车</a></font>
		</div>
	</div>
	<!--Top结束-->
</div>

<!--网站导航开始  滚动到一定高，给他加上 class="gd"-->
<div id="Logo" >
	<ul>
		<li class="first"><span class="iconfont">&#xe627;</span>全部商品分类</li>
		<li><a href="index.html" target="_blank">首页</a></li>
		<li><a href="Product.html" target="_blank">节日礼物</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>
<!--网站导航结束-->







<!--面包屑导航开始-->
<div class="webLogo">当前位置: 
	<a href="">首页</a> > <a href="">手机类型</a> > <a href="">3G手机</a> > KD876
</div>
<!--面包屑导航结束-->



<!--内容页主体开始-->
<div id="webCon">

	<!--产品放大镜效果开始-->
	<div class="web_ProductImg">
	
		<div id="box">

			<!--小图展示 start-->
			<div class="simg">
				<img src="images/xpic1.jpg" width="450" height="450" />
				<span class="move"></span>
				<span class="shade"></span>
			</div>
			<!--小图展示 end-->

			<!--按扭 start-->
			<div class="but">
				<img src="images/xpic1.jpg" width="60" class="active"  dataSrc="images/xpic1.jpg"/>
				<img src="images/xpic2.jpg" width="60" dataSrc="images/xpic2.jpg" />
				<img src="images/xpic3.jpg" width="60" dataSrc="images/xpic3.jpg" />
			</div>
			<!--按扭 end-->

			<!--大图 start-->
			<div class="bimg"> <img src="images/xpic1.jpg" /></div>
			<!--大图 end-->

		</div>
	
	</div>
	<!--产品放大镜效果结束-->


	<div class="web_ProductXq">
	
		<ul>
			<li class="title"> 深层水润+逆天美白，一套全部搞定，24小时水润透白！韩束墨菊深度</li>
			<li class="two">
				<p>商品货号：ECS000000</p>
				<p>库存：30个</p>
			</li>
			<li class="two">
				<p>商品品牌：苹果</p>
				<p>商品重量：30个</p>
			</li>
			<li  class="bor">
				<p>市场价格：市场价格：￥1666元
					本店售价：￥1388元
					注册用户：￥1388元
				</p>
			</li>
			<li class="yh">
				<h3>购买商品达到以下数量区间时可享受的优惠价格：</h3>
				<p class="ti"> <span>数量</span> <span>优惠价格</span> </p>
				<p class="ti money"> <span>3</span> <span>3600</span> </p>
				<p class="ti money"> <span>5</span> <span>5000</span> </p>
				<p class="allmoney"> 商品总价格:<font>3600</font></p>
			</li>
		
			<li class="two">
				<p>购买数量 <input type="text"  class="txt"/></p>
				<p>购买此商品可获得积分：119 </p>
			</li>
			
			<li>
				<p class="sx">颜色：<span> 红色</span>  <span> 黄色</span></p>
				<p class="sx">颜色：<span> 红色</span>  <span> 黄色</span></p>
			</li>
			
			<li class="but">
				<a href="dd.html"><img src="images/Webcar.png" /></a>
				<a href=""><img src="images/Websc.png" /></a>
			</li>

		</ul>
	
	
	
	</div>
</div>

<!--内容主体结束-->


<!--推荐产品开始-->
<div id="IntroProduct">
	<p class="ti">推荐产品</p>
	<ul>
		<li>
			<a href="#"><img src="images/dg_img2.jpg" width="220px" height="220" /></a>
			<p><a href="#">创意节能小夜灯LED声控</a></p>
			<P class="money"><font>￥19.9</font>  <span>389人购买</span></p>
		</li>  
		<li>
			<a href="#"><img src="images/dg_img3.jpg" width="220px" height="220" /></a>
			<p><a href="#">创意节能小夜灯LED声控</a></p>
			<P class="money"><font>￥19.9</font>  <span>389人购买</span></p>
		</li>  
		<li>
			<a href="#"><img src="images/dg_img1.jpg" width="220px" height="220" /></a>
			<p><a href="#">创意节能小夜灯LED声控</a></p>
			<P class="money"><font>￥19.9</font>  <span>389人购买</span></p>
		</li>  
		<li>
			<a href="#"><img src="images/dg_img2.jpg" width="220px" height="220" /></a>
			<p><a href="#">创意节能小夜灯LED声控</a></p>
			<P class="money"><font>￥19.9</font>  <span>389人购买</span></p>
		</li>  
 
	</ul>
</div>
<!--推荐产品结束-->


<!--产品详情开始-->
<div id="ProductInfo">
	<ul class="sel">
		<li class="active">商品描述<span></span></li>
		<li>商品属性 <span></span></li>
		<li>用户评论<span></span></li>
		<li>商品购买记录<span></span></li>
	</ul>

	<div id="ProductSelect">
		<div class="selCon" style="display:block;">商品描述</div>
		<div class="selCon">商品属性</div>
		<div class="selCon">用户评论</div>
		<div class="selCon">商品购买记录</div>
	</div>
	

</div>
<!--产品详情结束-->






<!--网站底部开始-->
<img src="images/f.jpg"  class="fbg"/>
<div id="Footer2">
	<dl class="first">
		<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>关于我们</dt>
		<dd>诚聘英才</dd>
		<dd>品牌入驻</dd>
		<dd>友情链接</dd>
	</dl>
	<dl>
		<dt>关于我们</dt>
		<dd>诚聘英才</dd>
		<dd>品牌入驻</dd>
		<dd>友情链接</dd>
	</dl>
	<dl>
		<dt>关于我们</dt>
		<dd>诚聘英才</dd>
		<dd>品牌入驻</dd>
		<dd>友情链接</dd>
	</dl>
	<dl>
		<dt>关于我们</dt>
		<dd>诚聘英才</dd>
		<dd>品牌入驻</dd>
		<dd>友情链接</dd>
	</dl>
	<dl class="last">
		<dt>客服在线</dt>
		<dd>4006-600-000</dd>
		<dd><img src="images/QQ.jpg" /></dd>
	</dl>

	<div style="clear:both"></div>
</div>


<p class="Copy">Copyright © 2013-2015 www.tanzhouedu.com All Rights Reserved 版权所有：湖南潭州教育咨询有限公司 备案号：备13016338号</p>
<!--网站底部结束-->






<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">
	$(".but img").mouseover(function(){
		//鼠标滑动到对图片按扭，图片加上红色边框，其它去掉边框
		$(this).addClass("active").siblings("img").removeClass("active"); 

		
		var bimg=$(this).attr("dataSrc");//获取小图片按扭对应的大图片地址
		$(".simg img,.bimg img").attr("src",bimg); //给小图片和大图展示赋值 
		

	});



	//鼠标滑动到遮罩层上.shade 时 ，的操作
	$("#box .simg .shade").hover(function(){
		$(".simg span.move,.bimg").show(); //小滑块和大图展示显示
	},function(){
		$(".simg span.move,.bimg").hide();//小滑块和大图展示隐藏
	});

	//当鼠标在遮罩层上.shade 移动时，动态来获取 小滑块的位置
	$("#box .simg .shade").mousemove(function(e){
		
		var x=e.clientX;  //鼠标与浏览器窗口左边距离
		var y=e.clientY+$(window).scrollTop(); //鼠标与浏览器窗口上面距离


		var l=$(this).offset().left;  //获取.shade与浏览器窗口左边距离
		var t=$(this).offset().top;  //获取 .shade 与浏览器窗口上边距离
		

		var w=$(".simg span.move").width()/2;  //获取小滑块宽度的一半
		var h=$(".simg span.move").height()/2; //获取小滑块高度的一半


		var _left=x-l-w;  //小滑块与 .shade 左边的距离
		var _top=y-t-h;  //小滑块与 .shade 上面的距离


		var bigW=$("#box .simg .shade").width()-w*2-2;  //滑块能滑动的最大宽度
		var bigH=$("#box .simg .shade").height()-h*2-2; //滑块能滑动的最大高度
		//document.title=_left+"="+_top;
		//通过_top判断，小滑块在竖直方向不能移出去 
		if(_top<0){
			_top=0; 
		}else if(_top>bigH){
			_top=bigH;
		}

		//通_left值判断 ，小滑块在水平方向不能移出去
		if(_left<0){
			_left=0;
		}else if(_left>bigW){
			_left=bigW;
		}

		//给小滑块赋值 top  left
		$(".simg span.move").css({"left":_left,"top":_top});


		//获以滑块滑动的宽度和高度的比例
		var wbl=_left/bigW;  //滑动宽度和最大滑动的宽度比例
		var hbl=_top/bigH;  //滑动高度和最大滑动的高度比例

		//document.title=wbl;

		var bigLeft=($(".bimg img").width()-$(".bimg").width())*wbl;  //大图向左移动距离
		var bigTop=($(".bimg img").height()-$(".bimg").height())*hbl;  //大图向上移动距离

		$(".bimg img").css({"left":-bigLeft,"top":-bigTop}); //动态给大图赋值

		
	});

</script>

<script type="text/javascript">
//选项卡效果
$("#ProductInfo ul.sel li").mouseover(function(){
	var _index=$(this).index();
	$(this).addClass("active").siblings("li").removeClass("active");
	$("#ProductSelect .selCon").eq(_index).show().siblings("div").hide();

});

</script>



<!--
	1、在News大盒子里面，构建两个一样大小的长方形，一个用来设背景透明，一个利用绝定位，盖在透明
	图层上面，用来放内容
	2、利用 h3标签来制作标题部分（颜色，大小，字体类型，竖直居中，首行缩进text-indent:20px;）
	3、利用 ul来制作新闻列表，文字竖直间距利用行高 line-height:30px;  给 ul添加对应的内边距，使文字与上右下左产生一定的间距。
	4、给文字加上了 a标签超链接，如何优化我们代码，代码的性能,如果把常用样式，统一初始化，我们选择的是用标签来表达，而不是用 *
-->




 </body>
</html>