悦轩饼家-商品详情样式

最新推荐文章于 2022-07-13 20:02:58 发布
最新推荐文章于 2022-07-13 20:02:58 发布
阅读量320 收藏 4
点赞数 1
分类专栏： 悦轩饼家 思路共享 文章标签： 前端 html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57575133/article/details/125751080
版权

 什么是商品详情页？

       商品详情页是对商品进行详细描述介绍的页面，详情页的设计极有可能会对用户的购买行为产生直接的影响。因此，商品详情页面的设计在美观实用的基础上，将要表达的信息尽可能用直观的视角展现出来。

 下面是悦轩饼家商品详情展示部分：

html部分：

<!-- 商品详情 -->
		<div class="container shangpin">
			<div class="tu">
				<!-- <img id="datu" src="img/TB170zYIpXXXXaGaXXXXXXXXXXX_!!0-item_pic.jpg_468x468q75.jpg_.webp">
				<ul>
					<li><img id="yanse1" src="img/TB170zYIpXXXXaGaXXXXXXXXXXX_!!0-item_pic.jpg_468x468q75.jpg_.webp"
							style="border: 3px solid #FF734C;" onclick="huanse(1)"></li>
					<li><img id="yanse2" src="img/O1CN011qrPwE1xpNwgemFRW_!!0-item_pic.jpg_468x468q75.jpg_.webp"
							onclick="huanse(2)"></li>
					<li><img id="yanse3" src="img/O1CN01TEEVEV29nLbn0diKj_!!0-item_pic.jpg_468x468q75.jpg_.webp"
							onclick="huanse(3)"></li>
					<li><img id="yanse4" src="img/O1CN01VgtH0u1RaDAtjejCw_!!0-item_pic.jpg_468x468q75.jpg_.webp"
							onclick="huanse(4)"></li>
				</ul> -->

				<div class="picFocus">
					<div class="bd">
						<ul>
							<li><a target="_blank" href="#"><img
										src="img/O1CN011qrPwE1xpNwgemFRW_!!0-item_pic.jpg_468x468q75.jpg_.webp" /></a>
							</li>
							<li><a target="_blank" href="#"><img
										src="img/O1CN01TEEVEV29nLbn0diKj_!!0-item_pic.jpg_468x468q75.jpg_.webp" /></a>
							</li>
							<li><a target="_blank" href="#"><img
										src="img/O1CN01VgtH0u1RaDAtjejCw_!!0-item_pic.jpg_468x468q75.jpg_.webp" /></a>
							</li>
							<li><a target="_blank" href="#"><img
										src="img/TB170zYIpXXXXaGaXXXXXXXXXXX_!!0-item_pic.jpg_468x468q75.jpg_.webp" /></a>
							</li>
						</ul>
					</div>

					<div class="hd">
						<ul>
							<li><img src="img/O1CN011qrPwE1xpNwgemFRW_!!0-item_pic.jpg_468x468q75.jpg_.webp" /></li>
							<li><img src="img/O1CN01TEEVEV29nLbn0diKj_!!0-item_pic.jpg_468x468q75.jpg_.webp" /></li>
							<li><img src="img/O1CN01VgtH0u1RaDAtjejCw_!!0-item_pic.jpg_468x468q75.jpg_.webp" /></li>
							<li><img src="img/TB170zYIpXXXXaGaXXXXXXXXXXX_!!0-item_pic.jpg_468x468q75.jpg_.webp" /></li>
						</ul>
					</div>

				</div>

			</div>
			<div class="wen">
				<!-- 标题 -->
				<h2>提拉米苏（约2磅）</h2>
				<!-- 表单 -->
				<div id="biaodan">
					<p><span>售价</span><span>￥198</span><span>市场价<span>￥338</span></span><span>已售<span>6264</span>件</span>
					</p>
					<p><span>材料</span>鸡蛋、奶油、小麦粉、芒果、榴莲肉、巧克力、干酪</p>
					<p><span>包装</span>一次性蛋糕用具1套</p>
					<p><span>备注</span>品牌：悦轩饼家</p>
				</div>
				<!-- 配送说明 -->
				<div id="pssm" class="shuoming">
					<p>配送说明</p>
					<p>北京、上海、广州、深圳、天津、重庆、南京、长沙</p>
				</div>
				<!-- 配送至 -->
				<div id="psz" class="shuoming">
					<p>配送至</p>
					<p>郑州</p>
				</div>
				<!-- 说明 -->
				<div id="sm" class="shuoming">
					<p>说明</p>
					<p>深圳大鹏区暂时不配送</p>
				</div>
				<!-- 选择 -->
				<div id="xz" class="shuoming">
					<p>选择</p>
					<p>
						<span>2磅</span>
						<span>3磅</span>
						<span>4磅</span>
					</p>
				</div>
				<!-- 按钮 -->
				<div id="anniu">
					<a href="car.html"><button type="button">加入购物车</button></a>
					<a href="xinxibiao.html"><button type="button">立即购买</button></a>
				</div>
			</div>
		</div>

css部分：


.shangpin {
	padding: 34px 0;
}

.container {
	width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

/* .container>div {
				width: 50%;
			} */
/* 商品详情样式 */
.tu {
	width: 35%;
	margin: 0 8%;
	box-sizing: border-box;
}

.wen {
	width: 50%;
}

/* .tu>img {
				width: 100%;
				border-radius: 3%;
			}

			.tu>ul {
				width: 80%;
				margin: 0 auto;
			}

			.tu>ul>li {
				width: 19%;
				list-style: none;
				float: left;
				margin: 5% 3%;
			}

			.tu>ul>li>img {
				width: 100%;
				border-radius: 10%;
			} */

/* css 重置 */
* {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* body {
				background: #fff;
				font: normal 12px/22px 宋体;
			} */

img {
	border: 0;
}

a {
	text-decoration: none;
	color: #333;
}

a:hover {
	color: #1974A1;
}

.js {
	width: 90%;
	margin: 10px auto 0 auto;
}

.js p {
	padding: 5px 0;
	font-weight: bold;
	overflow: hidden;
}

.js p span {
	float: right;
}

.js p span a {
	color: #f00;
	text-decoration: underline;
}

.js textarea {
	height: 100px;
	width: 98%;
	padding: 5px;
	border: 1px solid #ccc;
	border-top: 2px solid #aaa;
	border-left: 2px solid #aaa;
}

/* 本例子css */
.picFocus {
	margin: 0 auto;
	width: 467px;
	/* border: 1px solid #ccc; */
	padding: 5px;
	position: relative;
	overflow: hidden;
	zoom: 1;
}

.picFocus .hd {
	width: 100%;
	padding-top: 5px;
	overflow: hidden;
}

.picFocus .hd ul {
	margin-right: -5px;
	overflow: hidden;
	zoom: 1;
}

.picFocus .hd ul li {
	padding-top: 5px;
	float: left;
	text-align: center;
}

.picFocus .hd ul li img {
	width: 109px;
	height: 80px;
	border: 2px solid #ddd;
	cursor: pointer;
	margin-right: 5px;
}

.picFocus .hd ul li.on {
	background: url("../img/icoUp.gif") no-repeat center 0;
}

.picFocus .hd ul li.on img {
	border-color: #f60;
}

.picFocus .bd li {
	vertical-align: middle;
}

.picFocus .bd img {
	width: 467px;
	height: 350px;
	border-radius: 10px;
	display: block;
}



/* 文字说明 */
.wen>div {
	margin: 2% 0;
}

p {
	font-size: 12px;
}

#biaodan {
	border-radius: 10px;
	background-color: #F7F9FA;
}

#biaodan p {
	height: 40px;
	line-height: 40px;
}

#biaodan p:nth-of-type(1) {
	background-color: #F3F5F7;
	border-radius: 10px 10px 0 0;
}

#biaodan p>span:nth-of-type(1) {
	margin: 0 40px 0 20px;
	color: #71797F;
}

#biaodan p:nth-of-type(1) span:nth-of-type(2) {
	font-size: 25px;
	color: #FF3D12;
	font-weight: bolder;
	margin-right: 40px;
}

#biaodan p:nth-of-type(1) span:nth-of-type(3) {
	color: #71797F;
	margin-right: 42%;
}

#biaodan p:nth-of-type(1) span:nth-of-type(3)>span {
	text-decoration: line-through;
	margin-left: 5px;
}

#biaodan p:nth-of-type(1) span:nth-of-type(4) {
	color: #333333;
}

#biaodan p:nth-of-type(1) span:nth-of-type(4)>span {
	color: #FF3D12;
}

.shuoming p{
	padding-left: 20px;
}

.shuoming p:nth-of-type(1) {

	color: #71797F;
}

#xz>p:nth-of-type(2)>span {
	display: inline-block;
	width: 40px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	border: 2px solid #F3F5F7;
	margin: 10px;
}

#xz>p:nth-of-type(2)>span:nth-of-type(1) {
	border: 2px solid #FF3D12;
}

#anniu button {
	width: 180px;
	height: 50px;
	font-size: 20px;
	font-weight: bolder;
	border-radius: 50px;
	margin-right: 40px;
}

#anniu button:nth-of-type(1) {
	border: 1px solid #FFDDD4;
	color: #FF734C;
	background-color: #FFF0EC;
}

#anniu button:nth-of-type(2) {
	border: 1px solid #FF734C;
	color: white;
	background-color: #FF734C;
}

#anniu button:nth-of-type(1):hover {
	border: 1px solid #FF734C;
	color: white;
	background-color: #FF734C;
}

#anniu button:nth-of-type(2):hover {
	border: 1px solid #FFDDD4;
	color: #FF734C;
	background-color: #FFF0EC;
}

js部分：

// // 点击修改边框颜色js
			// function huanse(n) {
			// 	if (n == 1) {
			// 		document.getElementById("datu").src =
			// 			'img/TB170zYIpXXXXaGaXXXXXXXXXXX_!!0-item_pic.jpg_468x468q75.jpg_.webp';
			// 		document.getElementById("yanse1").style.border = "3px solid #FF734C";
			// 		document.getElementById("yanse2").style.border = "none";
			// 		document.getElementById("yanse3").style.border = "none";
			// 		document.getElementById("yanse4").style.border = "none";
			// 	}
			// 	if (n == 2) {
			// 		document.getElementById("datu").src = 'img/O1CN011qrPwE1xpNwgemFRW_!!0-item_pic.jpg_468x468q75.jpg_.webp';
			// 		document.getElementById("yanse1").style.border = "none";
			// 		document.getElementById("yanse2").style.border = "3px solid #FF734C";
			// 		document.getElementById("yanse3").style.border = "none";
			// 		document.getElementById("yanse4").style.border = "none";
			// 	}
			// 	if (n == 3) {
			// 		document.getElementById("datu").src = 'img/O1CN01TEEVEV29nLbn0diKj_!!0-item_pic.jpg_468x468q75.jpg_.webp';
			// 		document.getElementById("yanse1").style.border = "none";
			// 		document.getElementById("yanse2").style.border = "none";
			// 		document.getElementById("yanse3").style.border = "3px solid #FF734C";
			// 		document.getElementById("yanse4").style.border = "none";
			// 	}
			// 	if (n == 4) {
			// 		document.getElementById("datu").src = 'img/O1CN01VgtH0u1RaDAtjejCw_!!0-item_pic.jpg_468x468q75.jpg_.webp';
			// 		document.getElementById("yanse1").style.border = "none";
			// 		document.getElementById("yanse2").style.border = "none";
			// 		document.getElementById("yanse3").style.border = "none";
			// 		document.getElementById("yanse4").style.border = "3px solid #FF734C";
			// 	}
			// }


			jQuery(".picFocus").slide({
				mainCell: ".bd ul",
				effect: "left",
				autoPlay: true
			});

效果图：

 感觉没啥好说的。。。

还请各位大佬来补充！！！

面相进程，面相对象
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
悦轩饼家-购物车样式
weixin_57575133的博客
07-12 364
网上关于购物车实现的代码非常多，本次的这篇文章主要是和大家分享悦轩饼家的购物车界面，有需要的小伙伴可以看一下，接下来讲解一下具体的实现。
HTML .CSS实现商品详情（detail）
热门推荐
qq_67519129的博客
06-15 2万+
HTML .CSS实现商品详情（detail）
CSS综合案例-品优购电商04
奋斗的小能能的博客
08-12 1705
目录 1. 品优购项目(四) 1). 详情页 detail.html 常用单词 2). 面包屑导航 3). 产品介绍 模块 4). 预览区域制作 3.1 preview_list 制作 5). 产品详细信息区域制作 itemInfo_wrap 6). 产品细节模块 product_detail 6.1) aside 布局 6.2) detail 布局 7.详情页代码 8. 注册页面 register 8.1 registerarea布局 9.注册页代码 1. 品优购项目(.
淘宝主页+女装会场+详情页（html+css+js）
天天的博客
01-08 8547
淘宝网是中国电商行业的领军企业，其前端网站技术一直处于国内领先水平。本博客旨在分享淘宝网前端在技术方面的积累与探索。内容涵盖前端开发、性能优化、移动端适配、架构设计等诸多方面，对于前端开发人员有着较高的技术参考价值。注：不含源码
悦轩饼家-立即购买样式
weixin_57575133的博客
07-13 265
立即购买页面也没有太难的技术，就是一个大型的form表单。 页面信息比较多，在写之前要做好布局规划，脑海中有一个大概构思图，想好大概会用到哪些标签。写样式时注意细节，尽量将页面写的美观一些，代码简洁一些。...
web前端：悦轩饼家项目【涵盖前端布局、js轮播图以及指示器左右箭头、购物车数量加减操作及后续价格计算】
12-27
在"悦轩饼家"项目中，我们关注了商品数量的加减操作以及总价的实时计算。这需要使用JavaScript监听加减按钮的点击事件，并更新DOM中的数量值。同时，根据商品单价和数量，动态计算总价并显示。这里可能涉及到了DOM...
HTML的文本框效果
06-21
学习html
独立支撑模架施工设计方案及对策.doc
10-12
远洋香奈工程位于XX市武清区，由悦轩置业投资建设，XX方标世纪规划建筑设计负责设计，XX天建工程管理作为监理，XX市武清质量监视站进行质量监督。施工场地条件良好，周边环境稳定，适合施工。工程特点包括高档住宅楼...
园林中级职称工作总结.pdf
01-02
在房地产甲方任职期间，他作为园林工程师，负责珑悦轩园林景观项目，强调了园林项目管理的艺术性和技术性。他认识到，园林项目不仅需要扎实的技术基础，还需要项目统筹、协调合作和景观效果把控。为了高质量完成项目...
喜来登酒店服务理念.pdf
10-14
酒店拥有350间宽敞舒适的客房，提供多样化的餐饮选择，包括班妮意大利餐厅、盛宴全日西餐厅和采悦轩中餐厅，满足不同宾客的口味需求。此外，酒店还配备有8个宴会及会议场地，总面积达1918平方米，为各种活动和庆典...
html+css仿小米商城首页搜索页和商品详情页
12-30
作业
goods_detail_htmlcssjs_商品详情页_
09-30
商品详情页（包含完整css，js，html代码）
悦轩饼家-商品列表样式
weixin_57575133的博客
07-12 479
商品列表页面（有时称为 PLP 或类别登录页面）是网站上的搜索过滤器根据不同类别显示的产品页面，访问者可以在显示的页面里找到他们感兴趣的更多信息，也可以将看到的产品和服务等项目添加到购物车。优化商品列表页面能够优化用户体验。......
悦轩饼家-公共样式页眉
weixin_57575133的博客
07-07 187
什么是网页页眉（头部）？
悦轩饼家商品详情动态页面
m0_71810729的博客
06-24 299
用jQuery实现简单动态效果
悦轩饼家项目商品详情
m0_71810729的博客
06-15 257
HTML和CSS样式前端基础
悦轩饼家-公共样式页脚
weixin_57575133的博客
07-08 470
网站建设如何设计网页的底部，页脚对网站的重要性 一、什么是页脚？ 二、网站页脚的优势有哪些？
悦轩饼家首页动态效果
m0_71810729的博客
06-23 312
用jQuery实现图片轮播动态效果和js实现鼠标滑过效果
商品详情页html源代码,商品详情页.html
weixin_39619451的博客
06-09 6648
商品详情页$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPat...
外观模式编程要求：喝茶是广东人的一种生活方式，一杯好茶需要以下五步：1、准备优质凉水；2、准备茶叶（菊花 or 铁观音 or 普洱 or 西湖龙井）； 3、烧热水；4、清洗茶具；5、冲泡才能完成。欧阳锋、黄药师、洪七公三人来到了湛江乐山路上著名的茶馆——翠悦轩，落座后点完茶叶种类就等着服务员泡茶喝了。
最新发布
05-25
外观模式可以帮助我们简化茶的准备过程，让三人只需要告诉服务员他们想要的茶叶种类，然后就可以坐等喝茶了。 首先，我们需要定义一个茶具类 Teaware，它有一个方法 clean() 用于清洗茶具。 ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

面相进程，面相对象

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值