页面设计任务 商品详情页(带评论区)

目录

效果图：

任务描述

源码：

详细讲解：

1.产品信息部分

2.用户评论区域

效果图：

 

任务描述

  1. 页面结构:

    • 页面应包括一个标题部分、一个产品展示区和一个客户评价区。
    • 使用图片展示产品，并添加描述。
    • 客户评价区展示一些用户的评价。

  2. 页面内容:

    • 标题部分：显示一个大标题和副标题。
    • 产品展示区：展示一张产品图片，并包含产品名称、价格和描述。
    • 客户评价区：显示几条用户评论，每条评论包含用户名和评论内容。

  3. 样式:

    • 使用 CSS 设置背景颜色、文本颜色和字体。
    • 使用不同的字体大小和颜色来区分标题和正文。
    • 为产品图片添加边框和阴影效果。
    • 使用网格布局（CSS Grid）或弹性盒布局（Flexbox）来组织页面内容。
    • 设置客户评价区的背景颜色，并使用内边距和边距来调整布局。

源码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>XYZ笔记本电脑</title><style>/* 全局样式设置 */body {margin: 0; /* 移除浏览器默认的外边距 */padding: 0; /* 移除浏览器默认的内边距 */font-family: Arial, sans-serif; /* 设置字体为Arial */background-color: #f4f4f4; /* 设置背景颜色为浅灰色 */}/* 容器样式设置 */.container {width: 90%; /* 宽度设置为父容器的90% */max-width: 1200px; /* 最大宽度设置为1200px */margin: 0 auto; /* 水平居中对齐 */padding: 20px; /* 内部填充20px */background-color: #fff; /* 背景颜色为白色 */}/* 主内容布局样式 */.home {display: grid; /* 使用CSS网格布局 */grid-template-columns: 1fr 1fr; /* 设置两列布局 */gap: 20px; /* 列之间的间距 */align-items: center; /* 垂直方向对齐内容 */}/* 图片样式设置 */.home img {width: 100%; /* 图片宽度占满父容器 */height: auto; /* 高度自适应 */border-radius: 5px; /* 圆角边框 */}/* 产品标题样式设置 */.goods h3 {font-size: 24px; /* 字体大小 */color: #333; /* 字体颜色 */}/* 产品描述样式设置 */.goods p {font-size: 16px; /* 字体大小 */color: #555; /* 字体颜色 */line-height: 1.5; /* 行高，增加可读性 */}/* 链接样式设置 */.goods a {color: #5690c2; /* 链接颜色 */text-decoration: none; /* 去掉下划线 */font-size: 14px; /* 字体大小 */}/* 销售进度条背景样式设置 */.goods .pl1 {background-color: #bdbdbd; /* 背景颜色 */width: 50%; /* 宽度为50% */height: 20px; /* 高度为20px */border-radius: 5px; /* 圆角边框 */margin: 10px 0; /* 上下外边距 */}/* 销售进度条实际进度样式设置 */.goods .pl2 {background-color: green; /* 背景颜色 */height: 100%; /* 高度占满背景 */width: 82%; /* 宽度表示销售进度的百分比 */border-radius: 5px; /* 圆角边框 */text-align: center; /* 文本居中对齐 */color: white; /* 文本颜色 */line-height: 20px; /* 文本垂直居中 */}/* 配置选项按钮样式设置 */.goods .opt button {background-color: #fff; /* 背景颜色 */border: 2px solid #c7c7c7; /* 边框颜色 */border-radius: 10px; /* 圆角边框 */margin: 5px; /* 外边距 */padding: 10px; /* 内部填充 */cursor: pointer; /* 鼠标悬停时显示为手指图标 */font-size: 15px; /* 字体大小 */}/* 选中的配置按钮样式设置 */.goods .opt button.active-border {border-color: #030303; /* 选中状态的边框颜色 */font-weight: bold; /* 选中状态的字体加粗 */}/* 产品价格样式设置 */.goods .piece {color: #ce4444; /* 字体颜色 */font-size: 17px; /* 字体大小 */}/* 产品规格表样式设置 */.tab1 table {width: 100%; /* 表格宽度占满父容器 */border-collapse: collapse; /* 合并边框 */margin-top: 20px; /* 顶部外边距 */}/* 表格单元格样式设置 */.tab1 table td {border-bottom: 1px solid #8e8d8d; /* 下边框颜色 */padding: 10px; /* 内部填充 */}/* 表格标题单元格样式设置 */.tab1 .td1 {font-weight: bold; /* 粗体显示 */}/* 用户评论区域样式设置 */.mark {margin-top: 50px; /* 顶部外边距 */}/* 单个用户评论样式设置 */.mark .user1 {border-bottom: 1px solid #8f8f8f; /* 下边框颜色 */padding-bottom: 20px; /* 底部内边距 */margin-bottom: 20px; /* 底部外边距 */}/* 用户信息部分样式设置 */.top1 {display: flex; /* 使用flex布局 */gap: 10px; /* 头像和名称之间的间距 */align-items: center; /* 垂直方向对齐 */}/* 用户头像样式设置 */.top1 .pic3 {width: 50px; /* 头像宽度 */height: 50px; /* 头像高度 */border-radius: 50%; /* 圆形头像 */}/* 用户评论评分部分样式设置 */.mid1 {display: flex; /* 使用flex布局 */gap: 10px; /* 评分进度条和文本之间的间距 */align-items: center; /* 垂直方向对齐 */}/* 评分进度条背景样式设置 */.div2 {background-color: #bdbdbd; /* 背景颜色 */width: 100px; /* 进度条宽度 */height: 20px; /* 进度条高度 */border-radius: 5px; /* 圆角边框 */}/* 实际评分进度样式设置 */.div3 {background-color: green; /* 背景颜色 */height: 100%; /* 高度占满背景 */border-radius: 5px; /* 圆角边框 */color: white; /* 文本颜色 */text-align: center; /* 文本居中对齐 */line-height: 20px; /* 文本垂直居中 */}/* 评论评分文本样式设置 */.div4 {font-weight: bold; /* 字体加粗 */font-size: 14px; /* 字体大小 */color: #555; /* 字体颜色 */}/* 用户评论文本样式设置 */.down1 p {font-size: 16px; /* 字体大小 */color: #333; /* 字体颜色 */}/* 响应式设计：调整屏幕宽度小于768px时的布局 */@media (max-width: 768px) {.home {grid-template-columns: 1fr; /* 切换为单列布局 */}}</style><script>/* JavaScript函数：处理按钮选择和活动状态 */function selectButton(button) {var buttons = document.getElementsByClassName('my-button'); /* 获取所有具有 'my-button' 类的按钮 */for (var i = 0; i < buttons.length; i++) {buttons[i].classList.remove('active-border'); /* 移除所有按钮的活动边框类 */}button.classList.add('active-border'); /* 为当前按钮添加活动边框类 */}</script>
</head>
<body><div class="container"><!-- 产品展示区域 --><section class="home"><!-- 产品图片部分 --><div class="picture"><img src="https://m.media-amazon.com/images/I/51PsNbMd-CL._AC_SX679_.jpg" alt="XYZ笔记本电脑"></div><!-- 产品信息部分 --><div class="goods"><h3>XYZ笔记本电脑</h3> <!-- 产品标题 --><p>XYZ 2023 款最新 Chromebook 笔记本电脑，14 英寸显示屏，英特尔赛扬 N4120 处理器，4GB RAM，64GB eMMC，英特尔 UHD 显卡 600，WiFi，蓝牙，Chrome 操作系统，现代灰色</p> <!-- 产品描述 --><p><a href="#XYZhome">访问XYZ官网</a></p> <!-- 官网链接 --><!-- 销售进度条 --><div class="pl1"><div class="pl2">82%</div> <!-- 进度条表示销售进度 --></div><p>40万+已售</p> <!-- 销售数量 --><hr> <!-- 分隔线 --><!-- 配置选项按钮 --><div class="opt"><button type="button" class="my-button" onclick="selectButton(this)"><span>4GB RAM | 64GB eMMC</span><span class="piece">￥177.90</span></button><button type="button" class="my-button" onclick="selectButton(this)"><span>8GB RAM | 128GB eMMC</span><span class="piece">￥257.90</span></button><button type="button" class="my-button" onclick="selectButton(this)"><span>16GB RAM | 512GB eMMC</span><span class="piece">￥559.90</span></button></div><!-- 产品规格表 --><div class="tab1"><table><tr><td class="td1">品牌</td><td>XYZ</td></tr><tr><td class="td1">型号</td><td>XYZ Chromebook</td></tr><tr><td class="td1">屏幕尺寸</td><td>14英寸</td></tr><tr><td class="td1">CPU型号</td><td>Celeron N</td></tr><tr><td class="td1">操作系统</td><td>Chrome OS</td></tr><tr><td class="td1">图形处理器</td><td>Intel UHD Graphics 600</td></tr></table></div></div></section><!-- 用户评论区域 --><section class="mark"><h3>来自中国的热门评论</h3> <!-- 评论标题 --><!-- 用户1评论 --><div class="user1"><div class="top1"><img src="https://m.media-amazon.com/images/S/amazon-avatars-global/default.png" alt="用户头像" class="pic3"><p>Mike</p> <!-- 用户名 --></div><div class="mid1"><div class="div2"><div class="div3" style="width: 79%;">79%</div> <!-- 用户评分进度条 --></div><div class="div4">非常棒的一次购物，开机速度很快</div> <!-- 用户评分文字描述 --></div><div class="down1"><p>这款 chromebook 本身就具有价值。它启动速度很快，没有任何问题。它适用于日常计算。图形清晰锐利，不伤眼睛。屏幕为 14 英寸，易于阅读。 Chrome 应用程序非常棒，运行完美且易于导航。</p></div></div><!-- 用户2评论 --><div class="user1"><div class="top1"><img src="https://m.media-amazon.com/images/S/amazon-avatars-global/default.png" alt="用户头像" class="pic3"><p>Jone</p></div><div class="mid1"><div class="div2"><div class="div3" style="width: 88%;">88%</div> <!-- 用户评分进度条 --></div><div class="div4">我喜欢我的笔记本电脑。它拥有我需要的一切，甚至更多。</div></div><div class="down1"><p>今年3月9日购买。收到电源线大约一个月后，电源线停止工作，笔记本电脑死机。我们回到这里，发现无法退货，所以我们购买了另一根电源线。</p></div></div><!-- 用户3评论 --><div class="user1"><div class="top1"><img src="https://m.media-amazon.com/images/S/amazon-avatars-global/default.png" alt="用户头像" class="pic3"><p>Whilson</p></div><div class="mid1"><div class="div2"><div class="div3" style="width: 95%;">95%</div> <!-- 用户评分进度条 --></div><div class="div4">一台好电脑，物超所值</div></div><div class="down1"><p>同样，它绝不是一台完整的笔记本电脑。但话又说回来，如果您正在寻找 Chromebook，您并不是在寻找笔记本电脑的全部功能。</p></div></div><!-- 用户4评论 --><div class="user1"><div class="top1"><img src="https://m.media-amazon.com/images/S/amazon-avatars-global/default.png" alt="用户头像" class="pic3"><p>Lily</p></div><div class="mid1"><div class="div2"><div class="div3" style="width: 75%;">75%</div> <!-- 用户评分进度条 --></div><div class="div4">我喜欢带灯的键盘</div></div><div class="down1"><p>我不太懂电脑，但它是一台漂亮的电脑，而且比我以前的电脑更小、更轻。</p></div></div></section></div>
</body>
</html>

详细讲解：

1.产品信息部分

/* 产品标题样式设置 */
.goods h3 {font-size: 24px; /* 字体大小 */color: #333; /* 字体颜色 */
}/* 产品描述样式设置 */
.goods p {font-size: 16px; /* 字体大小 */color: #555; /* 字体颜色 */line-height: 1.5; /* 行高，增加可读性 */
}/* 链接样式设置 */
.goods a {color: #5690c2; /* 链接颜色 */text-decoration: none; /* 去掉下划线 */font-size: 14px; /* 字体大小 */
}/* 销售进度条背景样式设置 */
.goods .pl1 {background-color: #bdbdbd; /* 背景颜色 */width: 50%; /* 宽度为50% */height: 20px; /* 高度为20px */border-radius: 5px; /* 圆角边框 */margin: 10px 0; /* 上下外边距 */
}/* 销售进度条实际进度样式设置 */
.goods .pl2 {background-color: green; /* 背景颜色 */height: 100%; /* 高度占满背景 */width: 82%; /* 宽度表示销售进度的百分比 */border-radius: 5px; /* 圆角边框 */text-align: center; /* 文本居中对齐 */color: white; /* 文本颜色 */line-height: 20px; /* 文本垂直居中 */
}/* 配置选项按钮样式设置 */
.goods .opt button {background-color: #fff; /* 背景颜色 */border: 2px solid #c7c7c7; /* 边框颜色 */border-radius: 10px; /* 圆角边框 */margin: 5px; /* 外边距 */padding: 10px; /* 内部填充 */cursor: pointer; /* 鼠标悬停时显示为手指图标 */font-size: 15px; /* 字体大小 */
}/* 选中的配置按钮样式设置 */
.goods .opt button.active-border {border-color: #030303; /* 选中状态的边框颜色 */font-weight: bold; /* 选中状态的字体加粗 */
}/* 产品价格样式设置 */
.goods .piece {color: #ce4444; /* 字体颜色 */font-size: 17px; /* 字体大小 */
}
<script>/* JavaScript函数：处理按钮选择和活动状态 */function selectButton(button) {var buttons = document.getElementsByClassName('my-button'); /* 获取所有具有 'my-button' 类的按钮 */for (var i = 0; i < buttons.length; i++) {buttons[i].classList.remove('active-border'); /* 移除所有按钮的活动边框类 */}button.classList.add('active-border'); /* 为当前按钮添加活动边框类 */}
</script>
<!-- html产品信息部分 -->
<div class="goods"><h3>XYZ笔记本电脑</h3> <!-- 产品标题 --><p>XYZ 2023 款最新 Chromebook 笔记本电脑，14 英寸显示屏，英特尔赛扬 N4120 处理器，4GB RAM，64GB eMMC，英特尔 UHD 显卡 600，WiFi，蓝牙，Chrome 操作系统，现代灰色</p> <!-- 产品描述 --><p><a href="#XYZhome">访问XYZ官网</a></p> <!-- 官网链接 --><!-- 销售进度条 --><div class="pl1"><div class="pl2">82%</div> <!-- 进度条表示销售进度 --></div><p>40万+已售</p> <!-- 销售数量 --><hr> <!-- 分隔线 --><!-- 配置选项按钮 --><div class="opt"><button type="button" class="my-button" onclick="selectButton(this)"><span>4GB RAM | 64GB eMMC</span><span class="piece">￥177.90</span></button><button type="button" class="my-button" onclick="selectButton(this)"><span>8GB RAM | 128GB eMMC</span><span class="piece">￥257.90</span></button><button type="button" class="my-button" onclick="selectButton(this)"><span>16GB RAM | 512GB eMMC</span><span class="piece">￥559.90</span></button></div><!-- 产品规格表 --><div class="tab1"><table><tr><td class="td1">品牌</td><td>XYZ</td></tr><tr><td class="td1">型号</td><td>XYZ Chromebook</td></tr><tr><td class="td1">屏幕尺寸</td><td>14英寸</td></tr><tr><td class="td1">CPU型号</td><td>Celeron N</td></tr><tr><td class="td1">操作系统</td><td>Chrome OS</td></tr><tr><td class="td1">图形处理器</td><td>Intel UHD Graphics 600</td></tr></table></div>
</div>

(1).获取所有按钮:

  • var buttons = document.getElementsByClassName('my-button');
    • 这行代码使用 document.getElementsByClassName 方法获取页面上所有具有 my-button 类名的按钮元素，并将这些元素存储在 buttons变量中。
    • buttons是一个类数组对象（HTMLCollection），包含了所有配置选项按钮。

(2).移除活动状态:

  • for (var i = 0; i < buttons.length; i++)
    • 这个 for 循环遍历所有的按钮。
    • 对每个按钮调用 classList.remove('active-border') 方法，移除 active-border 类。这意味着所有按钮的选中样式都会被清除。

(3).添加活动状态:

  • button.classList.add('active-border');
    • 这行代码将 active-border 类添加到当前点击的按钮（button参数）上。
    • 这样就给用户一个视觉反馈，显示这个按钮是被选中的。

2.用户评论区域

/* 用户评论区域样式设置 */
.mark {margin-top: 50px; /* 顶部外边距 */
}/* 单个用户评论样式设置 */
.mark .user1 {border-bottom: 1px solid #8f8f8f; /* 下边框颜色 */padding-bottom: 20px; /* 底部内边距 */margin-bottom: 20px; /* 底部外边距 */
}/* 用户信息部分样式设置 */
.top1 {display: flex; /* 使用flex布局 */gap: 10px; /* 头像和名称之间的间距 */align-items: center; /* 垂直方向对齐 */
}/* 用户头像样式设置 */
.top1 .pic3 {width: 50px; /* 头像宽度 */height: 50px; /* 头像高度 */border-radius: 50%; /* 圆形头像 */
}/* 用户评论评分部分样式设置 */
.mid1 {display: flex; /* 使用flex布局 */gap: 10px; /* 评分进度条和文本之间的间距 */align-items: center; /* 垂直方向对齐 */
}/* 评分进度条背景样式设置 */
.div2 {background-color: #bdbdbd; /* 背景颜色 */width: 100px; /* 进度条宽度 */height: 20px; /* 进度条高度 */border-radius: 5px; /* 圆角边框 */
}/* 实际评分进度样式设置 */
.div3 {background-color: green; /* 背景颜色 */height: 100%; /* 高度占满背景 */border-radius: 5px; /* 圆角边框 */color: white; /* 文本颜色 */text-align: center; /* 文本居中对齐 */line-height: 20px; /* 文本垂直居中 */
}/* 评论评分文本样式设置 */
.div4 {font-weight: bold; /* 字体加粗 */font-size: 14px; /* 字体大小 */color: #555; /* 字体颜色 */
}/* 用户评论文本样式设置 */
.down1 p {font-size: 16px; /* 字体大小 */color: #333; /* 字体颜色 */
}

<h3>来自中国的热门评论</h3> <!-- 评论标题 -->
<!-- 用户1评论 -->
<div class="user1"><div class="top1"><img src="https://m.media-amazon.com/images/S/amazon-avatars-global/default.png" alt="用户头像" class="pic3"><p>Mike</p> <!-- 用户名 --></div><div class="mid1"><div class="div2"><div class="div3" style="width: 79%;">79%</div> <!-- 用户评分进度条 --></div><div class="div4">非常棒的一次购物，开机速度很快</div> <!-- 用户评分文字描述 --></div><div class="down1"><p>这款 chromebook 本身就具有价值。它启动速度很快，没有任何问题。它适用于日常计算。图形清晰锐利，不伤眼睛。屏幕为 14 英寸，易于阅读。 Chrome 应用程序非常棒，运行完美且易于导航。</p></div>
</div>

完

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/409538.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

IP代理池学习记录

IP代理池学习记录

免责声明 本文仅供学习和研究目的使用。所提供的信息和技术仅限于合规和合法的使用场景。请读者在应用相关技术时遵守法律法规&#xff0c;尊重他人的数据隐私和网站使用条款。本文作者对因使用本文信息而产生的任何法律责任或损失不承担责任。 1、初识IP代理池 概述&#xff…
阅读更多...
如何使用ssm实现基于SSM的社区物业管理系统的设计与实现+vue

如何使用ssm实现基于SSM的社区物业管理系统的设计与实现+vue

TOC ssm223基于SSM的社区物业管理系统的设计与实现vue 绪论 1.1 研究背景 现在大家正处于互联网加的时代&#xff0c;这个时代它就是一个信息内容无比丰富&#xff0c;信息处理与管理变得越加高效的网络化的时代&#xff0c;这个时代让大家的生活不仅变得更加地便利化&…
阅读更多...
Redis—缓存机制

Redis—缓存机制

Redis 缓存机制 1. 缓存三兄弟1.1 缓存击穿1.2 缓存穿透1.3 缓存雪崩 2. 布隆过滤器3. 缓存和数据库数据一致性3.1 缓存更新策略3.2 缓存不一致处理 4. 热点 key4.1 热点 key 处理4.2 热点 key 重建 5. 缓存预热 Redis&#xff0c;一个轻量级的开源内存数据结构存储系统&#x…
阅读更多...
Redis计数器：数字的秘密

Redis计数器：数字的秘密

文章目录 Redis计数器incr 指令用户计数统计用户统计信息查询缓存一致性 小结 技术派项目源码地址 : Gitee :技术派 - https://gitee.com/itwanger/paicodingGithub :技术派 - https://github.com/itwanger/paicoding 用户的相关统计信息 文章数&#xff0c;文章总阅读数&am…
阅读更多...
go设计模式——单例模式

go设计模式——单例模式

概念 单例是一种创建型设计模式&#xff0c;它确保一个类在整个程序运行期间只有一个实例&#xff0c;并提供一个全局访问点来使用该实例。虽然单例模式在某些情况下非常有用&#xff0c;例如管理全局配置、日志记录或资源共享&#xff0c;但它也带来了与全局变量相似的问题。…
阅读更多...
redis面试（二十三）写锁释放

redis面试（二十三）写锁释放

先加了写锁&#xff0c;后面再次加写锁或者读锁 anyLock: { “mode”: “write”, “UUID_01:threadId_01:write”: 2, “UUID_01:threadId_01”: 1 } 写锁的释放lua脚本在这里 RedissonWriteLock.unlockInnerAsync() 比如说现在的参数是这 KEYS[1] anyLock KEYS[2] redi…
阅读更多...
SQL手工注入漏洞测试(MongoDB数据库)靶场通关攻略

SQL手工注入漏洞测试(MongoDB数据库)靶场通关攻略

构造数据回显 });return ({title:1,content:2 成功回显1,2&#xff0c;接下来我们开始尝试查询数据库 });return({title:tojson(db),content:2 得到之后我们就可以继续查询他的表名了 });return({title:tojson(db.getCollectionNames()),content:2 最后我们就可以爆出他表里的数…
阅读更多...
宝塔面板配置FTP服务并安装内网穿透实现无公网IP远程连接

宝塔面板配置FTP服务并安装内网穿透实现无公网IP远程连接

文章目录 前言1. Linux安装Cpolar2. 创建FTP公网地址3. 宝塔FTP服务设置4. FTP服务远程连接小结 5. 固定FTP公网地址6. 固定FTP地址连接 前言 本文主要介绍宝塔FTP文件传输服务如何搭配内网穿透工具&#xff0c;实现随时随地远程连接局域网环境搭建的宝塔FTP文件服务并进行文件…
阅读更多...
ssrf实现.SSH未创建写shell

ssrf实现.SSH未创建写shell

一、介绍SSRF漏洞 SSRF (Server-Side Request Forgery,服务器端请求伪造)是一种由攻击者构造请求&#xff0c;由服务端发起请求的安全漏洞。一般情况下&#xff0c;SSRF攻击的目标是外网无法访问的内部系统(正因为请求是由服务端发起的&#xff0c;所以服务端能请求到与自身相…
阅读更多...
C语言基础——函数详解

C语言基础——函数详解

目录 函数的概述 1 函数的概念 2 函数的意义 函数的定义和使用 1 函数的定义 2 函数的调用 2.1 在同一文件中函数定义后函数调用 2.2 在同一文件中函数定义前函数调用 2.3 调用其它文件中定义的函数 2.3.1 在函数调用文件中进行声明 2.3.2 在头文件中进行函数的声明 函…
阅读更多...
图片工具箱：一键批量加水印，守护创意，提升效率！

图片工具箱：一键批量加水印，守护创意，提升效率！

前言 你是否曾在处理海量图片时&#xff0c;被繁琐的步骤和漫长的等待时间折磨得苦不堪言&#xff1f;是否梦想过拥有一款神器&#xff0c;能让你的图片处理工作变得轻松愉快&#xff0c;从此告别加班的烦恼&#xff0c;迎接升职加薪的曙光&#xff1f;那么&#xff0c;让我向…
阅读更多...
有限差分学习笔记

有限差分学习笔记

有限差分介绍 ​ 在数学中&#xff0c;有限差分法&#xff08;finite-difference methods&#xff0c;简称FDM&#xff09;&#xff0c;是一种微分方程数值方法&#xff0c;是通过有限差分来近似导数&#xff0c;从而寻求微分方程的近似解。 由泰勒展开式的推导 显式方…
阅读更多...
Web应用加密数据传输方案

Web应用加密数据传输方案

目录 概述 最初的方案 改进后的方案 秘钥的过期时间 概述 介于公司最近发布了一个面向C端用户的Web系统&#xff0c;为防止前端调用后端的API接口时&#xff0c;数据传输的内容轻易的被黑客获取&#xff0c;而设计的一个前后端数据加密传输方案 最初的方案 在最开始&#xf…
阅读更多...
2 种方式申请免费 SSL 证书，阿里云 Certbot

2 种方式申请免费 SSL 证书，阿里云 Certbot

如何使用免费的 SSL 证书&#xff0c;有时在项目中需要使用免费的 SSL 证书&#xff0c;Aliyun 提供免费证书&#xff0c;三个月有效期&#xff0c;可以直接在aliyun 申请&#xff0c;搜索 SSL 证书&#xff0c;选择测试证书。 Aliyun 证书需要每三月来来换一次&#xff0c;页…
阅读更多...
＜数据集＞车内视角行人识别数据集＜目标检测＞

＜数据集＞车内视角行人识别数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;6470张 标注数量(xml文件个数)&#xff1a;6470 标注数量(txt文件个数)&#xff1a;6470 标注类别数&#xff1a;1 标注类别名称&#xff1a;[pedestrian] 序号类别名称图片数框数1pedestrian647029587 使用标注…
阅读更多...
奔驰S迈巴赫S480升级动态按摩座椅效果怎么样

奔驰S迈巴赫S480升级动态按摩座椅效果怎么样

在迈巴赫 S480 的尊崇之旅中&#xff0c;舒适从未有尽头。现在&#xff0c;为您呈现前排动态按摩座椅的升级&#xff0c;将舒适体验提升至全新境界。 迈巴赫 S480 已然是舒适的代名词&#xff0c;但前排动态按摩座椅的升级&#xff0c;将为您带来前所未有的放松与享受。 当您…
阅读更多...
网络UDP报文详细解析

网络UDP报文详细解析

目录 一、简介二、详细介绍三、其他相关链接1、TCP报文段的详细图总结2、TCP三次握手和四次挥手详解3、socket通信原理及相关函数详细总结4、网络包IP首部详细解析 一、简介 本文主要介绍UDP报文格式。 二、详细介绍 UDP是一种无连接、不可靠的用户数据报协议&#xff0c;其…
阅读更多...
【注解】反序列化时匹配多个 JSON 属性名 @JsonAlias 详解

【注解】反序列化时匹配多个 JSON 属性名 @JsonAlias 详解

JsonAlias 注解是 Jackson 提供的一个功能强大的注解&#xff0c;允许一个字段在反序列化时匹配多个 JSON 属性名。它适用于在处理多种输入数据格式时&#xff0c;或当 JSON 数据的键名可能变化时。 一、JsonAlias 的作用 多种别名&#xff1a;JsonAlias 允许你为一个字段定义…
阅读更多...
MySQL在Windows和Ubuntu上的安装与远程连接配置

MySQL在Windows和Ubuntu上的安装与远程连接配置

MySQL是一个广泛使用的开源关系数据库管理系统&#xff0c;适用于各种操作系统。本文将详细介绍如何在Windows和Ubuntu系统上安装MySQL&#xff0c;并配置远程连接。 1. 在Windows上安装MySQL 1.1 下载MySQL安装包 首先&#xff0c;访问MySQL官方网站&#xff08;https://de…
阅读更多...
UEFI 01记: 开发环境 在 ubuntu22 中搭建 edk2 开发环境并运行简单示例

UEFI 01记: 开发环境 在 ubuntu22 中搭建 edk2 开发环境并运行简单示例

https://uefi.org 1&#xff0c;预备环境 $ sudo apt install uuid-dev $ sudo apt install nasm $ sudo apt install bison flex $ sudo apt install build-essential $ sudo apt-get install x11proto-xext-dev $ sudo apt-get install libx11-dev $ sudo apt-get install l…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023