仿照淘宝商品也展示

最新推荐文章于 2019-03-19 16:41:27 发布

NHF14NHNFN18781FH

最新推荐文章于 2019-03-19 16:41:27 发布

阅读量908

点赞数

分类专栏： html的css

本文链接：https://blog.csdn.net/NHF14NHNFN18781FH/article/details/20364157

版权

html的css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.html展示

{include file="Public:header"/}
<body> 
{include file="Public:top"/}
<style type="text/css">
*{margin:0px;padding:0;list-style-type:none;}
img{border:none;}
h3{font-family:Tahoma, Geneva, sans-serif;font-size:14px;color:#333;letter-spacing:1px;margin-top:10px;margin-bottom:10px;}
p{margin-bottom:10px;margin-top:10px;line-height:22px;}
.demo{margin:0 auto;width:600px;}
.tickul li{line-height:24px;}
/* zoom-section */
.zoom-section{clear:both;margin-top:20px;}
*html .zoom-section{display:inline;clear:both;}
.zoom-desc{float:left;margin-left:10px;width:310px;margin-bottom:20px;}
.zoom-small-image{border:4px solid #CCC;float:left;margin-bottom:20px;}
.zoom-tiny-image{border:1px solid #CCC;margin:0px;}
.zoom-tiny-image:hover{border:1px solid #C00;}
</style>
<link href="__PUBLIC__/Css/cloud-zoom.css" rel="stylesheet" type="text/css" />

<!--script type="text/javascript" src="js/jquery-1.4.2.min.js"></script-->
<script type="text/javascript" src="__JS__/cloud-zoom.1.0.2.js"></script>

<div id="mainWrapper" class="clear">
	<div class="mainInside"> 
		<div class="t-head trace">
			<span class="left"><font>您的位置:</font>　<a href="/bbs/index.html">{$_G.bbs_setting.webname}</a> 
			» <span>操作提示</span>
			</span> 
		</div>
		<div class="box2 shadow radius" style="height:500px">
			<div class="content ft30">
			<!------------------------------------------------>
			<div class="left_pic" style="float:left;width: 336px;">
				<div class="demo" style="margin-left: 100px;margin-top: 39px;">
				<div class="zoom-section">
					<div class="zoom-small-image">
						<a href='__UPLOAD__/jifenstore/{$Think.get.goodid}/bigimage00.jpg' class = 'cloud-zoom' id='zoom1' rel="tint:'#ffffff',tintOpacity:0.5,smoothMove:5,zoomWidth:480,adjustY:-4,adjustX:10"><img src="__UPLOAD__/jifenstore/{$Think.get.goodid}/smallimage00.jpg" alt='' title="" /></a>
					</div>
					<div class="zoom-desc" style="margin-left: 46px;">
			      
						<p><a href='__UPLOAD__/jifenstore/{$Think.get.goodid}/bigimage00.jpg' class='cloud-zoom-gallery' title='Red' rel="useZoom: 'zoom1', smallImage: '__UPLOAD__/jifenstore/{$Think.get.goodid}/smallimage00.jpg' "><img class="zoom-tiny-image" src="__UPLOAD__/jifenstore/{$Think.get.goodid}/tinyimage00.jpg" alt = "Thumbnail 1"/></a>
						
						<a href='__UPLOAD__/jifenstore/{$Think.get.goodid}/bigimage01.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: ' __UPLOAD__/jifenstore/{$Think.get.goodid}/smallimage01.jpg'"><img class="zoom-tiny-image" src="__UPLOAD__/jifenstore/{$Think.get.goodid}/tinyimage01.jpg" alt = "Thumbnail 2"/></a> 

						<a href='__UPLOAD__/jifenstore/{$Think.get.goodid}/bigimage02.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: '__UPLOAD__/jifenstore/{$Think.get.goodid}/smallimage02.jpg' "><img class="zoom-tiny-image" src="__UPLOAD__/jifenstore/{$Think.get.goodid}/tinyimage02.jpg" alt = "Thumbnail 3"/></a></p>
					</div>
				</div><!--zoom-section end-->
				</div>
			</div>
			<div class="right_content" style="float: right;height: 499px;width: 532px;margin-left: 132px;margin-top: 13px;">
				<div class="pro_title" style="margin-top:18px;">
					<span style="font-size:20px">{$storegood.title}</span>
				</div>
				<div class="pro_descr" style="margin-top:18px;">
					<span style="font-size: 14px;color: rgb(90, 88, 88);">说明：{$storegood.description}</span>
				</div>
				<div class="pro_price" style="margin-top:18px;">
					参考价格：<span style="font-size: 26px;color: rgb(250, 0, 0);">{$storegood.price}</span>
					兑换积分：<span style="font-size: 26px;color: rgb(250, 0, 0);">{$storegood.jifen}</span>
				</div>

				<div class="duihuan_botton" style="margin-top:57px;margin-left:37px">
					<a href="#" οnclick="javascript:if(confirm('确定兑换该礼品')) location.href='/Store/buy?goodid={$storebuy.id}'"><img src="__PUBLIC__/Images/jifen/anniu.PNG"></a>
				</div>
			</div>
			<!------------------------------------------------>
			</div>
		<!-- end of mainContent-->
		</div>
	</div>
</div>
{include file="Public:footer"/}
</body>
</html>

NHF14NHNFN18781FH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿照淘宝商品也展示

1.html展示{include file="Public:header"/} {include file="Public:top"/}*{margin:0px;padding:0;list-style-type:none;}img{border:none;}h3{font-family:Tahoma, Geneva, sans-serif;font-size:14px;color
复制链接

扫一扫

专栏目录