当前位置: 首页 > news >正文

移动Web学习04-移动端订单结算页PC端个人中心页面

5、电商结算页面案例

image-20240405171930209

css

body{background-color: #F2F2F2;
}
* {box-sizing: border-box;margin: 0;padding: 0;
}.main{padding: 12px 11px 80px;
}.pay{display: flex;height: 80px;background-color: #fff;bottom: 0;width: 100%;border-top: 1px solid #ededed;position: fixed;padding: 0 10px;/* 两边元素贴边 */justify-content: space-between;/* 沿侧轴居中对齐 */align-items: center;
}
.pay .pay-left{font-size: 12px;color: #1e1e1e;
}.pay .pay-left span{color: #cf4444;
}.pay .pay-left span i{font-size: 20px;font-style: normal;font-weight: 700px;
}
.pay .pay-right{width: 91px;height: 35px;text-align: center;line-height: 35px;color: #fff;background-image: linear-gradient(90deg, #6fc2aa 5%, #54b196 100%);border-radius: 3px;
}.pay .pay-right a{width: 42px;height: 35px;font-size: 13px;color: #ffffff;line-height: 35px;font-family: MicrosoftYaHei;text-decoration: none;text-align: center;font-weight: normal;font-stretch: normal;letter-spacing: 0px;
}.pannel{background-color: #fff;border-radius: 5px;margin-bottom: 10px;
}
.user_msg{display: flex;padding: 15px 0 15px 11px;align-items: center;
}.user_msg .location{width: 30px;height: 30px;background-image: linear-gradient(90deg, #6fc2aa 5%, #54b196 100%);color: #fff;text-align: center;line-height: 30px;margin-right: 15px;border-radius: 50%;
}
.user{flex: 1;
}
.user .top{display: flex;justify-content: flex-start;align-items: center;
}
.user .top h5 {width: 55px;font-size: 15px;font-weight: 400;
}
.user .top p {font-size: 13px;margin-left: 15px;
}.user .bottom{margin-top: 5px;font-size: 12px;
}
.more{width: 44px;height: 44px;/* background-color: #2ad1ff; */text-align: center;line-height: 44px;color: #808080;/* border: 1px solid #3a9cff; */
}.product{padding: 11px 0px 11px  11px;display: flex;align-items: center;
}
.pic{width: 85px;height: 85px;/* background-color: pink;  */
}
.txt{flex: 1;margin: 0px 12px;
}
.txt h5{font-size: 13px;color: #262626;font-weight: 400;/* 多行文本溢出 */display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 2;overflow:hidden;text-overflow: ellipsis;
}
.count{width: 44px;height: 44px;text-align: center;line-height: 44px;background-color: skyblue;
}
.txt .goods_style{display: inline;font-size: 11px;height: 16px;letter-spacing: 0px;color: #888888;background-color: #f1f1f1;padding: 0px 4px;border-radius: 2px;
}/* 我这里span写错了 */
.txt .goods_style span:first-child{margin-right: 10px;
}.txt .goods_price{color: #999;font-size: 12px;margin-top: 3px;
}
.txt .goods_price i,
.txt .goods_price em{font-size: 10px;
}
.txt .goods_price i{color: #cf4444;
}
.txt .goods_price span{font-size: 16px;color: #cf4444;margin-right: 12px;
}.other{padding: 11px;
}.other ul li{display: flex;align-items: center;margin-bottom: 25px;color: #262626;font-size: 13px;
}
.other ul li h5{font-weight: 400px;
}
/* 选中计数行 old */
.other ul li:nth-child(2n+1){justify-content: space-between;
}
/* 选中最后一行让下边距变为0  */
.other ul li:last-child{margin-bottom: 0;
}.other ul li:nth-child(2) p{font-size: 12px;margin-left: 19px;
}.other ul li i{color: #808080;font-size: 13px;margin-right: 2px; 
}

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><title>填写订单</title><!-- 引入初始化的css文件 --><link rel="stylesheet" href="./css/base.css"><!-- 引入字体图标的css文件 --><link rel="stylesheet" href="./lib/iconfont/iconfont.css"><!-- 引入自己的css文件 --><link rel="stylesheet" href="./css/order.css">
</head>
<body><!-- main 主体内容 start--><div class="main"><!-- 用户信息 start --><div class="pannel user_msg"><div class="location"><i class="iconfont icon-location"></i></div><div class="user"><div class="top"><h5>林丽</h5><p>18500667882</p></div><div class="bottom">北京市  海淀区  中关村软件园   信息科技大厦1号楼410#</div></div><div class="more"><i class="iconfont icon-more"></i></div></div><!-- 用户信息 end --><!-- 商品信息 start --><div class="pannel product"><div class="pic"><a href=""><img src="./uploads/pic.png" alt=""></a></div><div class="txt"><h5>康尔贝 非接触式红外体温仪领券立减30元 婴儿级材质 测温测温测温测温测温</h5><p class="goods_style"><span class="firstSpan">粉色</span><span>红外体温计</span></p><p class="goods_price"><i>¥</i><span>266</span> <em>¥</em><del>299</del></p></div><div class="count"><i class="iconfont icon-x"></i><span>1</span></div></div><!--  商品信息 end --><!--  其他信息start --><div class="pannel other"><ul><li><h5>配送方式</h5><p>顺丰快递</p></li><li><h5>买家备注</h5><p>希望可以快点发货</p></li><li><h5>支付方式</h5><p>支付宝<i class="iconfont icon-more"></i></p></li></ul></div><!-- 其他信息end --><!--  配送信息start --><div class="pannel other"><ul><li><h5>商品总价</h5><p>¥299.00</p></li><li><h5>运费</h5><p>¥0.00</p></li><li><h5>折扣</h5><p>-¥30.00</p></li></ul></div><!-- 其他信息end --><!--  配送信息start --><div class="pannel other"><ul><li><h5>商品总价</h5><p>¥299.00</p></li><li><h5>运费</h5><p>¥0.00</p></li><li><h5>折扣</h5><p>-¥30.00</p></li></ul></div><!-- 其他信息end --></div><!-- main 主体内容 end--><!-- pay底部支付 start --><div class="pay"><div class="pay-left">合计:<span><i>266.00</i></span></div><div class="pay-right"><a href="#">去支付</a></div></div><!--pay底部支付 end -->
</body>
</html>

6、PC端个人中心案例

image-20240405172136989

css代码

.xtx-boy {background-color: #f4f4f4;padding: 30px 0 85px;
}
.xtx-boy .container{display: flex;justify-content: space-between;
}
.xtx-boy .container .aside{width: 227px;height: 500px;background-color: palegreen;}.xtx-boy .container .main{width: 999px;/* 回头再删除 让里面的内容撑开就行 *//* height: 500px; */background-color: orange;
}.main .overview{display: flex;background-color: #fff;padding: 20px 0px;height: 132px;margin-bottom: 18px;
}
/* 每个div占一份 */
.overview div{flex: 1;display: flex;justify-content: space-evenly;align-items: center;text-align: center;
}
.overview div a{display: flex;height: 55px;/* 改变主轴方式 */flex-direction: column;align-items: center;/* 上下居中 */justify-content: space-between;
}
.overview div:first-child{border-right: 1px solid #f1f1f1;
}/* .overview div img{ *//* width: 25px;height: 22px; *//* margin-bottom: 7px;
} */
.overview  span{color: #e05e30;font-size: 25px;height: 30px;display: block;line-height: 25px;
}
.pannel{background-color: #fff;padding: 28px 19px;margin-bottom: 20px; 
}
.paner-title{font-size: 16px;color: #333;/* background: pink; */height: 45px;display: flex;justify-content: space-between;
}
.paner-title h4{font-size: 22px;font-weight: 400;
}
.paner-title a{color: #999;font-family: simsum;margin-top: 5px;margin-right: 15px;
}.content li{display: flex;border: 1px solid #ccc;height: 137px;margin-bottom: 20px;font-size: 14px;
}
.content li:last-child{margin-bottom: 0;
}
.content .goods{flex:1;display: flex;align-items: center;
}
.content .goods .pic{width: 107px;height: 107px;background-color: pink;margin: 0 5px 0 12px;
}
.content .goods .pic img{width: 107px;height: 107px;
}.content .goods .txt h5{font-size: 16px;font-weight: 400;margin-bottom: 10px;/* 溢出隐藏 */width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; 
}
.content .state{width: 200px;/* line-height: 135px; */text-align: center;padding-top: 50px; color: #e05e30;
}.content .state p:nth-child(2){color: #999;
}
.content .price{display: flex;flex-direction: column;justify-content: center;align-items: center;/* text-align: center;padding-top: 30px; */width: 200px;border-left: 1px solid #ccc;border-right: 1px solid #ccc;
}
.content .price p:first-child{color: #9a2e1f;
}
.content .pay{width: 180px;
}
.content .pay{display: flex;flex-direction: column;justify-content: center;align-items: center;width: 180px;
}
.content .pay p:nth-child(1){width: 100px;height: 30px;background-color:  #5eb69c;text-align: center;line-height: 30px;color: #fff;margin-bottom: 10px;border-radius: 2px;
}

html内容

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户中心页面-小兔鲜儿</title><!-- 网站说明 --><meta name="description" content="小兔鲜儿官网,致力于打造全球最大的食品、生鲜电商购物平台。"><!-- 关键字 --><meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 引入初始化文件 css reset base.css --><link rel="stylesheet" href="./css/base.css"><!-- 引入common.css  公共的头部和底部 --><link rel="stylesheet" href="./css/common.css"><!--引入center.css  公共的头部和底部 --><link rel="stylesheet" href="./css/cente2.css"></head><body><!-- 头部模块开始 --><header><!-- 快捷导航 --><div class="xtx-shortcut"><div class="container"><ul><li><a href="#">请先登录</a></li><li class="sep">|</li><li><a href="#">免费注册</a></li><li class="sep">|</li><li><a href="#">我的订单</a></li><li class="sep">|</li><li><a href="#">会员中心</a></li><li class="sep">|</li><li><a href="#">帮助中心</a></li><li class="sep">|</li><li><a href="#">在线客服</a></li><li class="sep">|</li><li><a href="#"><i></i>手机版</a></li></ul></div></div><!-- 导航栏 --><div class="xtx-main-nav container"><!-- logo --><div class="logo"><h1><a href="./index.html" title="小兔鲜儿">小兔鲜儿</a></h1></div><!-- nav --><nav class="nav"><ul><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><a href="#">居家</a></li><li><a href="#">洗护</a></li><li><a href="#">孕婴</a></li><li><a href="#">服装</a></li></ul></nav><!-- search --><div class="search"><input type="text" placeholder="搜一搜"></div><!-- car --><a href="#" class="car"><span>2</span></a></div></header><!-- 头部模块结束 --><!-- 用户中心内容区域 start--><div class="xtx-boy"><div class="container"><!-- 左侧内容 --><div class="aside">123</div><!-- 右侧内容 --><div class="main"><!-- 右侧第一个盒子(会员中心,优惠卷) --><div class="overview"><div class="overview-left"><a href=""><img src="./images/vip.png" alt="" width="25" height="22"><p>会员中心</p></a><a href=""><img src="./images/safe.png" alt="" width="25" height="22"><p>安全设置</p></a><a href=""><img src="./images/address.png" alt=""  width="18" height="25"><p>地址管理</p></a></div><div class="overview-right"><a href=""><span>6</span><p>优惠卷</p></a><a href=""><span>70</span><p>礼品卡</p></a><a href=""><span>120</span><p>积分</p></p></p></a></div></div><!-- 订单模块 start--><div class="pannel order"><!-- 我的订单头部 start --><div class="paner-title"><h4>我的订单</h4><a href="#">查看全部 &gt;</a></div><!-- 我的订单头部 end --><!-- 我的订单内容 start--><div class="content"><ul><li><div class="goods"><div class="pic"><img src="./uploads/order_goods_1.jpg" alt=""></div><div class="txt"><h5>拉夫劳伦T恤男正品圆领短袖</h5><p>颜色: 白色 尺码: M 数量: 1</p></div></div><div class="state"><p>代付款</p><p>查看物流</p></div><div class="price"><p>¥99.00</p><p>(含运费:¥10.00)</p><p>在线支付</p></div><div class="pay"> <p>立即付款</p><p>查看详情</p><p>取消订单</p></div></li><li><div class="goods"><div class="pic"><img src="./uploads/order_goods_1.jpg" alt=""></div><div class="txt"><h5>拉夫劳伦T恤男正品圆领短袖</h5><p>颜色: 白色 尺码: M 数量: 1</p></div></div><div class="state"><p>代付款</p><p>查看物流</p></div><div class="price"><p>¥99.00</p><p>(含运费:¥10.00)</p><p>在线支付</p></div><div class="pay"> <p>立即付款</p><p>查看详情</p><p>取消订单</p></div></li><li><div class="goods"><div class="pic"><img src="./uploads/order_goods_1.jpg" alt=""></div><div class="txt"><h5>拉夫劳伦T恤男正品圆领短袖</h5><p>颜色: 白色 尺码: M 数量: 1</p></div></div><div class="state"><p>代付款</p><p>查看物流</p></div><div class="price"><p>¥99.00</p><p>(含运费:¥10.00)</p><p>在线支付</p></div><div class="pay"> <p>立即付款</p><p>查看详情</p><p>取消订单</p></div></li><li><div class="goods"><div class="pic"><img src="./uploads/order_goods_1.jpg" alt=""></div><div class="txt"><h5>拉夫劳伦T恤男正品圆领短袖</h5><p>颜色: 白色 尺码: M 数量: 1</p></div></div><div class="state"><p>代付款</p><p>查看物流</p></div><div class="price"><p>¥99.00</p><p>(含运费:¥10.00)</p><p>在线支付</p></div><div class="pay"> <p>立即付款</p><p>查看详情</p><p>取消订单</p></div></li></ul></div><!-- 我的订单内容 end --></div><!-- 订单模块 end--></div></div></div><!-- 用户中心内容区域  end--><!-- 底部开始 --><footer><!-- 上盒子 --><div class="footer-t"><div class="container"><dl class="customer"><dt>客户服务</dt><dd class="zaixian"><a href="#"><p>在线客服</p></a></dd><dd class="wenti"><a href="#"><p>问题反馈</p></a></dd></dl><dl class="us"><dt>关注我们</dt><dd class="gongzhonghao"><a href="#"><p>公众号</p></a></dd><dd class="weibo"><a href="#"><p>微博</p></a></dd></dl><!-- 下载模块 --><dl class="download"><dt>下载APP</dt><dd class="qrcode"><img src="./uploads/qrcode.png" alt=""></dd><dd class="down"><p>扫描二维码</p><p>立马下载APP</p><a href="#">下载页面</a></dd></dl><!-- 热线模块 --><dl class="hotline"><dt>服务热线</dt><dd><p>400-0000-000</p><p>周一至周日 8:00-18:00</p></dd></dl></div></div><!-- 下盒子 --><div class="footer-b"><!-- 服务模块 --><div class="xtx-service"><a href="#">价格亲民</a><a href="#">物流快捷</a><a href="#">品质新鲜</a></div><!-- 版权模块 --><div class="xtx-copyright"><p><a href="#">关于我们</a> |<a href="#">帮助中心</a> |<a href="#">售后服务</a> |<a href="#">配送与验收</a> |<a href="#">商务合作</a> |<a href="#">搜索推荐</a> |<a href="#">友情链接</a></p><p>CopyRight @ 小兔鲜儿</p></div></div></footer><!-- 底部结束 -->
</body></html>

相关文章:

移动Web学习04-移动端订单结算页PC端个人中心页面

5、电商结算页面案例 css body{background-color: #F2F2F2; } * {box-sizing: border-box;margin: 0;padding: 0; }.main{padding: 12px 11px 80px; }.pay{display: flex;height: 80px;background-color: #fff;bottom: 0;width: 100%;border-top: 1px solid #ededed;position:…...

Linux基础篇:Linux网络yum源——以配置阿里云yum源为例

Linux网络yum源——以阿里云为例 一、网络yum源介绍 Linux中的YUM&#xff08;Yellowdog Updater, Modified&#xff09;源是一个软件包管理器&#xff0c;它可以自动处理依赖关系并安装、更新、卸载软件包。YUM源是一个包含软件包的远程仓库&#xff0c;它可以让用户轻松地安…...

2024.2.10力扣每日一题——二叉树的中序遍历

2024.2.10 题目来源我的题解方法一 递归方式方法二 非递归方式 题目来源 力扣每日一题&#xff1b;题序&#xff1a;94 我的题解 方法一 递归方式 使用递归实现&#xff0c;结果List也可以定义为一个类变量。 按照访问左子树——根节点——右子树的方式遍历这棵树&#xff0…...

MVP惊现神秘买家,或疑为华尔街传奇投资人?

随着距离美国总统大选已不足240天&#xff0c;全球都开始聚焦这次具有历史意义的重大事件&#xff0c;作为全球唯一的超级大国&#xff0c;美国大选的最终结果&#xff0c;将会更深远的影响世界的走向。 除了我们熟知的全球性安全问题&#xff0c;美国这次大选更是一次意识形态…...

观察者模式 C++

&#x1f442; Honey Honey - 孙燕姿 - 单曲 - 网易云音乐 目录 &#x1f33c;前言 &#x1f33c;描述 &#x1f382;问题 &#x1f4aa;解决方案 &#x1f232;现实场景 代码 场景1 -- 报纸发行 场景 解释 代码 场景2 -- 气象资料发布 场景3 -- 过红绿灯 &#x…...

每日一题 --- 删除字符串中的所有相邻重复项[力扣][Go]

删除字符串中的所有相邻重复项 题目&#xff1a;1047. 删除字符串中的所有相邻重复项 给出由小写字母组成的字符串 S&#xff0c;重复项删除操作会选择两个相邻且相同的字母&#xff0c;并删除它们。 在 S 上反复执行重复项删除操作&#xff0c;直到无法继续删除。 在完成所…...

前端三剑客 —— CSS (第四节)

目录 内容回顾&#xff1a; 1.常见样式 2.特殊样式 特殊样式 过滤效果 动画效果 动画案例&#xff1a; 渐变效果 其他效果&#xff1a; 多列效果 字体图标&#xff08;icon&#xff09; 内容回顾&#xff1a; 1.常见样式 text-shadow x轴 y轴 阴影的模糊程度 阴影的…...

Linux文件IO(3):使用文件IO进行文件的打开、关闭、读写、定位等相关操作

目录 1. 文件IO的概念 2. 文件描述符概念 3. 函数介绍 3.1 文件IO-open函数 3.2 文件IO-close函数 3.3 文件IO-read函数 3.4 文件IO-write函数 3.5 文件IO-lseek函数 4. 代码练习 4.1 要求 4.2 具体实现代码 4.3 测试结果 5. 总结 1. 文件IO的概念 posix(可移植操作系统接…...

Vite 项目中环境变量的配置和使用

Vite 项目中环境变量的声明 我们要在 Vite 项目中进行环境变量的声明&#xff0c;那么需要在项目的根目录下&#xff0c;新建 .env.[mode] 文件用于声明环境变量&#xff0c;如&#xff1a; .env.test 文件用于测试环境下项目全局变量的声明.env.dev 文件用于开发环境下项目全…...

C++读取.bin二进制文件

C读取.bin二进制文件 在C中&#xff0c;可以使用文件输入/输出流来进行二进制文件的读写操作&#xff0c;方便数据的保存和读写。 //C读取bin二进制文件 int read_bin() {std::ifstream file("data_100.bin", std::ios::in | std::ios::binary);if (file) {// 按照…...

【ZZULIOJ】1038: 绝对值最大(Java)

目录 题目描述 输入 输出 样例输入 Copy 样例输出 Copy code 题目描述 输入3个整数&#xff0c;输出绝对值最大的那个数。 输入 输入包含3个int范围内的整数&#xff0c;用空格隔开。 输出 输出三个数中绝对值最大的数&#xff0c;单独占一行。若绝对值最大的数不唯…...

递归算法讲解2

前情提要 上一篇递归算法讲解在这里 递归算法讲解&#xff08;结合内存图&#xff09; 没看过的小伙伴可以进去瞅一眼&#xff0c;谢谢&#xff01; 递归算法的重要性 递归算法是非常重要的&#xff0c;如果想要进大厂&#xff0c;以递归算法为基础的动态规划是必考的&…...

机器学习第33周周报Airformer

文章目录 week33 AirFormer摘要Abstract一、论文的前置知识1. 多头注意力机制&#xff08;MSA&#xff09;2. 具有潜变量的变分模型 二、文献阅读1. 题目2. abstract3. 问题与模型阐述3.1 问题定义3.2 模型概述3.3 跨空间MSA&#xff08;DS-MSA&#xff09;3.4 时间相关MSA&…...

设计模式(12):代理模式

一.核心作用 通过代理&#xff0c;控制对对象的访问;可以详细控制访问某个对象的方法&#xff0c;在调用这个方法前做前置处理&#xff0c;调用这个方法后做后置处理。 二.核心角色 抽象角色&#xff1a; 定义代理角色和真实角色的公共对外方法;真实角色&#xff1a; 实现抽…...

前端9种图片格式基础知识, 你应该知道的

彩色深度 彩色深度标准通常有以下几种&#xff1a; 8位色&#xff0c;每个像素所能显示的彩色数为2的8次方&#xff0c;即256种颜色。16位增强色&#xff0c;16位彩色&#xff0c;每个像素所能显示的彩色数为2的16次方&#xff0c;即65536种颜色。24位真彩色&#xff0c;每个…...

ChatGPT 与 OpenAI 的现代生成式 AI(上)

原文&#xff1a;Modern Generative AI with ChatGPT and OpenAI Models 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 序言 本书以介绍生成式 AI 领域开始&#xff0c;重点是使用机器学习算法创建新的独特数据或内容。它涵盖了生成式 AI 模型的基础知识&#xff0c…...

全量知识系统 程序详细设计之架构设计:一个信息系统架构

统架构&#xff0c;整体设计分成了三部分--三种方面&#xff1a;信息nformation、系统Syste 原文 以下是对全知系统程序详细设计需要的架构规划的考虑。 全知系统架构是一个信息系统架构&#xff0c;整体设计分成了三部分&#xff08;三种“方面”&#xff09;&#xff1a;信…...

从零开始:成功进入IT行业的方法与技巧

如今&#xff0c;信息技术&#xff08;IT&#xff09;行业成为了就业市场上的热门领域。由于其快速发展和广阔的职业机会&#xff0c;许多人希望能够进入这个行业。然而&#xff0c;对于没有任何相关背景知识的人来说&#xff0c;要成功进入IT行业可能会面临一些挑战。本文将分…...

SpringCloud - 如何本地调试不会注册到线上环境(Nacos)?

问题描述 有时候我们需要本地调试注册到 Nacos 上&#xff0c;但是会影响线上服务的 Feign 请求打到本地导致不通影响了线上业务。 原因分析 一般最传统的解决方案就是修改本地 bootstrap.yml 的 spring.cloud.nacos.discovery.namespace spring:application:name: app-serv…...

1.9 面试经典150题 除自身以外数组的乘积

除自身以外数组的乘积 给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...