6.15日志

最新推荐文章于 2024-09-15 17:15:28 发布
最新推荐文章于 2024-09-15 17:15:28 发布
阅读量87 收藏 1
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lhabc789/article/details/125255641
版权

一、主题：完成商品详情页面

二、知识点

1、无序列表<ul></ul>

2、浮动

作用：排版更整齐

原理：两个盒子上下排列，给第一个盒子加float，第二个盒子就会附上去。

clear：结束浮动

3、鼠标悬浮时

用

.span2:hover{
    border-color: #FF6439;
}

4、边角弧度

/* 边角弧度 */
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 30px;

三、完成页面步骤

1、先建一个最大的div包括所有东西，

<div class="product-wrap">

</div>

最大div的css样式，


/* 最大的div */
.product-wrap{
	border: 0px solid red;
	width: 1200px;
	margin: auto;
	height: 600px;
}

2、把大div分为左边和右边，现在左边写一个div，包括住左边的内容，

<!-- 左侧商品列表 -->
			<div class="product-preview">
				<div class="preview">
					<!-- 大图片 -->
					<div class="preview-bigimage">
						<img src="img/cake1.jpg"/>
					</div>
					<!-- 小图片 -->
					<div class="preview-list">
						<div class="preview-list-item">
							<img src="img/cake1_s1.jpg" class="img1"/>
						</div>
						<div class="preview-list-item">
							<img src="img/cake1_s2.jpg" class="img2"/>
						</div>
						<div class="preview-list-item">
							<img src="img/cake1_s3.jpg" class="img2"/>
						</div>
						<div class="preview-list-item">
							<img src="img/cake1_s4.jpg" class="img2"/>
						</div>
					</div>
				</div>
			</div>

左边css样式，

/* 左侧最大div的大小 */
.product-preview{
	border: 0px solid darkblue;
	width: 470px;
	height: 580px;
	float: left;
}
/* 大图片 */
.preview-bigimage>img{
	width: 470px;
	height: 470px;
	/* 图片边角弧度 */
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

/* 第一个小图片加边框 */
.img1{
		border: 2px solid #FF734C;
		width: 70px;
		height: 70px;
		float: left;
		margin-left: 20px;
		/* 图片边角弧度 */
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;
		
}
/* 后三个小图片 */
.img2{
	border: 2px solid whitesmoke;
	width: 70px;
	height: 70px;
	float: left;
	margin-left: 20px;
	/* 图片边角弧度 */
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
}
/* 鼠标悬停显示边框 */
.img2:hover{
	border-color: #FF6439;
}
/* 整体四个小图片 */
.preview-list-item{
	margin-left: 27px;
	margin-top: 10px;
}

3、右边div内容，

<!-- 右侧商品列表 -->
			<div class="product-info">
					<p class="product-info-Tlms" style="font-weight: bold;	font-size: 25px;margin-top: 0px;">提拉米苏(约2磅)</p>
				<div class="product-info-Sj">
					<p>
						<span style="color: darkgray;font-size: 13px;">售价</span>
						<span style="color: #FF734C;font-weight: bold;font-size: 30px;margin-left: 20px;">￥198</span>
						<span style="color: darkgray;margin-left: 20px;font-size: 13px;">市场价</span>
						<span style="color: darkgray;margin-left: 0px;font-size: 13px;text-decoration: line-through;">￥338</span>
						<span style="font-size: 15px;margin-left: 120px;font-size: 10px;">已售</span>
						<span style="color: #FF734C;font-size: 10px;">6264</span>
						<span style="color: darkgray;font-size: 10px;">件</span>
					</p>
				</div>
				<div class="product-info-Cl">
					<p>
						<span style="color: darkgray;font-size: 13px;">材料</span>
						<span style="margin-left: 24px;font-size: 13px;">鸡蛋、奶油、小麦粉、芒果、榴莲肉、巧克力、干酪</span>
					</p>
					<p>
						<span style="color: darkgray;font-size: 13px;">包装</span>
						<span style="margin-left: 24px;font-size: 13px;">一次性蛋糕用具</span>
					</p>
					<p>
						<span style="color: darkgray;font-size: 13px;">备注</span>
						<span style="margin-left: 24px;font-size: 13px;">品牌：悦轩饼家</span>
					</p>
				</div>
				<div class="product-info-Ps">
					<p style="color: darkgray;font-size: 13px;">配送说明</p>
					<p style="font-size: 10px;margin-top: -10px;">北京、上海、广州、深圳、天津、重庆、南京、长沙</p>
					<p style="color: darkgray;font-size: 13px;">配送至</p>
					<p style="font-size: 10px;margin-top: -10px;">郑州</p>
					<p style="color: darkgray;font-size: 13px;">说明</p>
					<p style="font-size: 10px;margin-top: -10px;">深圳大鹏新区暂时不配送</p>
				</div>
				
					<p style="color: darkgray;font-size: 13px;">选择</p>
					<p>
					
					<span class="span1" ><a href="#" style="text-decoration: none;color: black;">2磅</a></span>
					<span class="span2" ><a href="#" style="text-decoration: none;color: black;">3磅</a></span>
					<span class="span2"><a href="#" style="text-decoration: none;color: black;">4磅</a></span>
					
					</p>
					<button class="btn1">加入购物车</button>
					<button class="btn2">立即购买</button>
				
				
				
			</div>
			
			<!-- 结束 --><!-- 右侧商品列表 -->
			<div class="product-info">
					<p class="product-info-Tlms" style="font-weight: bold;	font-size: 25px;margin-top: 0px;">提拉米苏(约2磅)</p>
				<div class="product-info-Sj">
					<p>
						<span style="color: darkgray;font-size: 13px;">售价</span>
						<span style="color: #FF734C;font-weight: bold;font-size: 30px;margin-left: 20px;">￥198</span>
						<span style="color: darkgray;margin-left: 20px;font-size: 13px;">市场价</span>
						<span style="color: darkgray;margin-left: 0px;font-size: 13px;text-decoration: line-through;">￥338</span>
						<span style="font-size: 15px;margin-left: 120px;font-size: 10px;">已售</span>
						<span style="color: #FF734C;font-size: 10px;">6264</span>
						<span style="color: darkgray;font-size: 10px;">件</span>
					</p>
				</div>
				<div class="product-info-Cl">
					<p>
						<span style="color: darkgray;font-size: 13px;">材料</span>
						<span style="margin-left: 24px;font-size: 13px;">鸡蛋、奶油、小麦粉、芒果、榴莲肉、巧克力、干酪</span>
					</p>
					<p>
						<span style="color: darkgray;font-size: 13px;">包装</span>
						<span style="margin-left: 24px;font-size: 13px;">一次性蛋糕用具</span>
					</p>
					<p>
						<span style="color: darkgray;font-size: 13px;">备注</span>
						<span style="margin-left: 24px;font-size: 13px;">品牌：悦轩饼家</span>
					</p>
				</div>
				<div class="product-info-Ps">
					<p style="color: darkgray;font-size: 13px;">配送说明</p>
					<p style="font-size: 10px;margin-top: -10px;">北京、上海、广州、深圳、天津、重庆、南京、长沙</p>
					<p style="color: darkgray;font-size: 13px;">配送至</p>
					<p style="font-size: 10px;margin-top: -10px;">郑州</p>
					<p style="color: darkgray;font-size: 13px;">说明</p>
					<p style="font-size: 10px;margin-top: -10px;">深圳大鹏新区暂时不配送</p>
				</div>
				
					<p style="color: darkgray;font-size: 13px;">选择</p>
					<p>
					
					<span class="span1" ><a href="#" style="text-decoration: none;color: black;">2磅</a></span>
					<span class="span2" ><a href="#" style="text-decoration: none;color: black;">3磅</a></span>
					<span class="span2"><a href="#" style="text-decoration: none;color: black;">4磅</a></span>
					
					</p>
					<button class="btn1">加入购物车</button>
					<button class="btn2">立即购买</button>
				
				
				
			</div>
			
			<!-- 结束 -->

右边divcss样式，

/* 右侧整个div大小 */
.product-info{
	border: 0px solid red;
	width: 480px;
	height: 650px;
	float: left;
	margin-left: 80px;
}
/* 提拉米苏字体样式 */
.product-info-Tlms>p{
	border: 0px solid red;
}
/* 售价那一行 */
.product-info-Sj{
	border: 1px solid white;
	background-color: #F3F5F7;
	margin-top: -20px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
/* 材料、包装、备注那三行 */
.product-info-Cl{
	border: 0px solid red;
	background-color: #F7F9FA;
	margin-top: -16px;
}
/* 4磅 */
.span1{
	display: block;
	float: left;
	width: 40px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	color: black;
	font-size: 10px;
	border: 2px solid #FF734C;
}
.span2{
	border: 2px solid whitesmoke;
	display: block;
	width: 40px;
	height: 30px;
	float: left;
	margin-left: 20px;
	font-size: 10px;
	text-align: center;
	line-height: 30px;
}
/* 鼠标悬停时显示边框 */
.span2:hover{
	border-color: #FF6439;
}
/* 按钮 */
.btn1{
	margin-top: 50px;
	margin-left: -172px;
	border: 1px solid red;
	width: 108px;
	height:35px;
	/* 边角弧度 */
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 30px;
	color: #FF734C;
	background-color: #FFF0EC;
	font-weight: bold;
}
.btn2{
	border: 0px solid red;
	width: 108px;
	height:35px;
	margin-left: 30px;
	/* 边角弧度 */
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 30px;
	background-color: #FF734C;
	color: #F7F9FA;
	font-weight: bold;
}

效果：        

 

四、项目中的问题？ 

1、图片边角不会写。

解决：百度搜索

2、鼠标悬停事件

解决：百度搜索

Lhabc789
关注
2024.7.15日志
xilixiaohe的博客
07-15 1744
最重要的是，配置 Cobalt Strike 的过程不仅仅是技术层面的学习，更是对安全意识和责任的提醒。总结而言，配置和使用 Cobalt Strike 是一次深刻的学习经历，不仅提升了我的渗透测试技能，也加深了我对网络安全防御策略的理解和认识。在FinalShell的主界面中，可以看到你的阿里云服务器的所有资源，如文件、目录、进程等。在FinalShell的主界面中，找到并点击“设置”按钮，然后在弹出的窗口中输入你的阿里云账号和密码。在弹出的窗口中，需要输入阿里云服务器的IP地址、端口号和用户名和密码。
Thinkphp 6.0日志处理
qq_34820433的博客
04-10 1565
Thinkphp 6.0日志处理的功能，包括配置日志和写入日志等。
ELK-EFK-v7.12.0日志平台部署
以梦为马|越骑越傻
04-03 2352
文章目录ELK和EFK是什么关于ElasticsearchElasticSearch 重要特性ElasticSearch 基本概念ElasticSearch与关系性数据库的类比文档（Document）文档的存在场景文档的格式文档 ID文档的元数据索引（Index）映射（Mapping）弃用该概念的原因：节点Master-eligible 节点 和 Master 节点Data 节点 和 Coordinating 节点其他节点配置节点的类型分片（Primary Shard & Replica Shar
12.19日志
Blood_butterfly的博客
12-27 198
虚函数总结 虚函数体现了多态，用virtual修饰 例 virtual viod add(int a,int b); 虚函数类型返回值参数必须相同。虚函数就是定义了基类的指针指向子类从而实现函数的多态，从而实现同种函数的不同功能。虚函数相当于一个入口多个出口 基类的虚函数是入口，通过指向子类实现不同的出口； 1：一般的话 虚函数只需在基类定义就行，但为了便于阅读 在子类也重新覆盖定义； 2：定...
学习日志-5月22日
cynthia963的博客
05-22 168
今天看了itemCF的代码 有很多看不懂的地方，改天留着请教其他人
12.18日志
馨宇要变身的博客
12-18 476
观察训练后的结果 1.首先使用论文中用的SGD优化器，初始学习率为1e-2，BN的training设置为None。 首先看它设置的学习率， #学习率调度器函数，参数是从0开始的epoch，返回一个新的学习率。 #设置好初始学习率base_lr ，总共训练的轮数epochs ， 每次减小学习率想减小多少倍drop，想在训练中减小几次学习率epochs/8. （减小8次就除以8），其他的不需要改。 ...
MySQL 5.7.26日志管理
捕翼^的博客
06-12 414
1.错误日志 1.1 作用 排查MySQL运行过程的故障. 1.2 默认配置 默认开启 默认路径和名字: datadir/hostname.err 错误日志文件名及查看方法: 方括号中有ERROR的---->[ERROR] 1.3 人为定制位置vi /etc/my.cnf log_error=/tmp/mysql3306.log 重启生效. 2.二进制日志(binlog) 2.1 作用 (1) 主从要依赖二进制日志 (2) 数据恢复时需要依赖于二进制日志 2.2 配置 (1)参数介绍 默认没有开启
Druid 1.1.23日志打印ERROR DruidAbstractDataSource discard long time none received connection问题分析
bufegar0的博客
09-02 6233
问题背景 druid升级至1.1.23版本后，控制台经常会提示： [mate-system:192.168.3.6:20002] 2020-09-02 07:15:08.797 ERROR 43542 [] [XNIO-1 task-1] com.alibaba.druid.pool.DruidAbstractDataSource discard long time none received connection. , jdbcUrl : jdbc:mysql://127.0.0.1:3306/matex
Node.js-koa2日志监控中间件
08-10
在这个场景中，"Node.js-koa2日志监控中间件"就是专门为Koa2设计的一种工具，用于增强日志管理功能。 日志中间件通常在请求处理流程中插入，记录请求的细节、响应时间、错误信息等。在Koa2中，中间件采用洋葱模型，...
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 410
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
element-plus组件问题汇总
xiaoxian_xian的博客
09-12 434
element-plus组件问题汇总
Vue Router push方法的使用
ithongchou的博客
09-13 732
是一个用于编程式导航的方法，它可以将用户导航到应用中的不同路由。它提供了灵活的路由控制能力，允许你在应用的逻辑中进行路由操作，例如在用户交互后进行页面跳转。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 543
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
vue组件通信，点击传值，动态传值（父传子，子传父）
爱敲代码的卡拉米的博客
09-12 637
通过上面的例子，你应该对Vue中如何使用按钮来传递值（通过内部方法或组件间通信）有了基本的了解。记得Vue的数据绑定和组件通信机制是构建Vue应用的关键。
大文件切片上传-vue3.0
m0_56416159的博客
09-12 554
大文件切片上传（也称为分片上传）是一种处理大文件上传的有效方法，它通过将大文件分割成多个较小的部分（即切片或分片），然后分别上传这些切片到服务器，最后在服务器上将这些切片合并成原始文件。以下是关于大文件切片上传的详细步骤和注意事项。onUploadInit： 文件初始化调用接口，用于后端创建存放切片文件的文件夹。SparkMD5：生成文件唯一的hash，用来验证文件的完整性。onUploadFinish：文件上传完成验证完整性的接口。onUploadChunk：分片上传接口。基于vue3.0代码实现。
Ai+若依（智能售货机运营管理系统---帝可得）--货道关联商品【08篇---0004：关联商品】
qq_60281421的博客
09-11 528
Ai+若依（智能售货机运营管理系统---帝可得）--货道关联商品【08篇---0004：关联商品】
基于Java、SpringBoot、Vue的加油站管理系统设计
程序猿大波的博客
09-14 316
本系统是一个基于Java、SpringBoot和Vue的加油站管理系统。它旨在提高加油站的运营效率，优化客户服务体验，并通过数据分析支持更精准的业务决策。该系统包括用户管理、汽油管理、站点管理等功能模块。通过这些功能，管理员可以方便地管理关键业务信息，同时提供实时的设备监控和数据分析工具，帮助管理者做出明智的决策。此外，系统还提供了安全与权限控制功能，确保只有授权用户才能访问敏感信息，保护加油站的数据安全。整个系统设计简洁易用，能够满足加油站日常运营的需求，提高工作效率和客户满意度。
vue axios 如何读取项目下的json文件
战族狼魂的博客
09-10 565
在 Vue 项目中，使用axios读取本地的 JSON 文件可以通过将 JSON 文件放置在public目录中，然后通过axios发起请求读取。
vue3 透传 Attributes
最新发布
咸鱼滚滚
09-15 688
“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。 当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。 最常见的例子就是 class、style 和 id。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值