前端开发常用案例（二）
这里写目录标题
- 1.loding加载动画
- 2.全屏加载动画效果
- 3.吃豆豆
- 4.鼠标悬停3D翻转效果
- 5.3D旋转木马效果
- 6.flex弹性布局-酷狗音乐播放列表
- flex弹性布局-今日头条首页热门视频栏
- grid网格布局-360图片展示
- 小米商城左侧二级菜单
1.loding加载动画
代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>loding加载动画</title><style type="text/css">body {margin: 0;padding: 0;}.loading {width: 200px;height: 200px;background-color: skyblue;margin: 100px auto 0;position: relative;}.loading .item {width: 20px;height: 20px;background-color: rgba(255,255,255,0.2);position: absolute;top: 0;left: 50%;margin-left: -10px;transform-origin: 10px 100px;border-radius: 50%;/* 存在逻辑运算 *//* 使用自定义属性来进行运算 */transform: rotate(calc(var(--i)*40deg));animation: loading 1s ease infinite;animation-delay: calc(var(--i)*0.11s);}@keyframes loading {/* 0-1s */%0,%50{background-color: rgba(255,255,255,0.2);}/* 时间50.5%-100% */50.5%,100%{background-color: #fff;}}/* .loading .item:nth-child(1) {animation-delay: 0s;}.loading .item:nth-child(2) {animation-delay: 0.11s;}.loading .item:nth-child(3) {animation-delay: 0.22s;}.loading .item:nth-child(4) {animation-delay: 0.33s;}.loading .item:nth-child(5) {animation-delay: 0.44s;}.loading .item:nth-child(6) {animation-delay: 0.55s;}.loading .item:nth-child(7) {animation-delay: 0.66s;}.loading .item:nth-child(8) {animation-delay: 0.77s;}.loading .item:nth-child(9) {animation-delay: 0.88s;} */</style></head><body><div class="loading"><div class="item" style="--i:0"></div><div class="item" style="--i:1"></div><div class="item" style="--i:2"></div><div class="item" style="--i:3"></div><div class="item" style="--i:4"></div><div class="item" style="--i:5"></div><div class="item" style="--i:6"></div><div class="item" style="--i:7"></div><div class="item" style="--i:8"></div></div></body>
</html>
2.全屏加载动画效果
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>全屏加载动画效果</title><link rel="stylesheet" href="css/animate.min.css"><style type="text/css">body {margin: 0;padding: 0;}.container {width: 100%;/* 浏览器整个高度被分为100份,100vh即为整个页面高度 */height: 100vh;background-color: aqua;position: relative;}.box {width: 1080px;height: 540px;/* background-color: beige; */position: absolute;/* 设置水平居中效果 */left: 50%;margin-left: -540px;top: 50%;margin-top: -270px;}.box .item{float: left;margin: 10px;border-radius: 10px;}.item1{width: 250px;height: 520px;background-image: linear-gradient(to bottom,#fff,pink);}.item2,.item3{width: 380px;height: 250px;background-image: linear-gradient(to bottom,pink,#fff);}.item4,.item5,.item6{width: 250px;height: 250px;background-image: linear-gradient(to bottom,#fff,pink);}</style></head><body><div class="container"><div class="box"><div class="item item1 animate__animated animate__backInDown">可是</div><div class="item item2 animate__animated animate__backInLeft">遗憾的是。</div><div class="item item3 animate__animated animate__backInRight">我们生活在</div><div class="item item4 animate__animated animate__backInUp">两条平行直线</div><div class="item item5 animate__animated animate__bounceIn">永远不会相交的</div><div class="item item6 animate__animated animate__fadeInDown">世界里</div></div></div></body>
</html>3.吃豆豆
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>吃豆豆动画效果</title><style type="text/css">body {margin: 0px;padding: 0px;}.eat-peas {width: 600px;height: 200px;/* background-color: antiquewhite; */margin: 150px auto 0;position: relative;}.eat-peas .head {width: 200px;height: 200px;/* border: 2px solid blue; */border-radius: 50%;/* 隐藏多余盒子部分 */overflow: hidden;position: relative;z-index: 2;}/* 利用伪元素构造盒子 */.eat-peas .head::before {content: "";display: block;width: 200px;height: 100px;background-color: tomato;/* 以盒子底部中心为轴向上旋转盒子 */transform-origin: bottom center;transform: rotate(0deg);/* 引入动画 */animation: rotate1 .4s ease infinite alternate;}.eat-peas .head::after {content: "";display: block;width: 200px;height: 100px;background-color: tomato;/* 以盒子顶部中心为轴向下旋转盒子 */transform-origin: top center;transform: rotate(0deg);/* 引入动画 */animation: rotate2 .4s ease infinite alternate;}@keyframes rotate1 {0% {transform: rotate(0deg);}100% {transform: rotate(-30deg);}}@keyframes rotate2 {0% {transform: rotate(0deg);}100% {transform: rotate(30deg);}}/* 眼睛 */.eat-peas .eye{width: 20px;height: 20px;background-color: #000;border: 2px solid #fff;position: absolute;top: 20px;left: 80px;border-radius: 50%;}/* 豆豆 */.eat-peas .peas{width: 40px;height: 40px;background-color: tomato;border-radius: 50%;position: absolute;left: 120px;top: 50%;margin-top: -20px;box-shadow: 70px 0px 0px tomato,140px 0px 0px tomato,210px 0px 0px tomato,280px 0px 0px tomato,350px 0px 0px tomato;animation: move .8s ease infinite;}@keyframes move {0%{transform: translateX(0px);}100%{transform: translateX(-70px);}}</style></head><body><div class="eat-peas"><div class="head"><div class="eye"></div></div><div class="peas"></div></div></body>
</html>
4.鼠标悬停3D翻转效果
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>鼠标悬停3D翻转效果</title><style type="text/css">body,h3,p{margin: 0;padding: 0;}.scene{width: 400px;height: 400px;/* border: 2px solid red; */margin: 100px auto 0;/* 视距,决定了3D效果*/perspective: 800px;}.scene .box{width: 400px;height: 300px;/* background-color: yellow;*//* 添加过渡动画 */transition: all ease 1s;position: relative;/* 令元素呈现3D效果 */transform-style: preserve-3d;}.scene .box:hover{transform: rotateY(-180deg);}.box .box-front{width: 400px;height: 300px;background-color: pink;position: absolute;left: 0;top: 0;/* 调高层级 */z-index: 2;}.box .box-mid{width: 400px;height: 300px;background-color: rgba(0, 0, 0, 0.5);position: absolute;left: 0;top: 0;transform: translateZ(-1px);}.box .box-back{width: 200px;height: 200px;background-color: skyblue;background-image: linear-gradient(to bottom right,pink,#fff,skyblue);position: absolute;left: 50%;margin-left: -100px;top: 50%;margin-top: -100px;transform: translateZ(-100px) rotateY(-180deg);font-size: 14px;line-height: 20px;box-sizing: border-box;border-radius: 10px;}.box .box-back h3{text-align: center;color: #000;font-weight: 400;font-size: 16px;}.box .box-back p{font-size: 13px;margin: 10px;font-weight: 200;line-height: 20px;}</style></head><body><div class="scene"><div class="box"><div class="box-front"><img src="images/3d01.jpg" alt=""></div><div class="box-mid"></div><div class="box-back"><h3>每日一言</h3><p>遗憾的是我们生活在两条平行直线永远不会相交的世界里。</p></div></div></div></body>
</html>
css3-3D
5.3D旋转木马效果
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>3D旋转木马效果</title><style type="text/css">body{margin: 0;padding: 0;background-color: #000;}.scene{width: 600px;height: 300px;/* border: 2px solid red; */margin: 150px auto 0;/* 设置视距 */perspective: 800px;}.scene .box{width: 600px;height: 300px;/* background-color: yellow; *//* 设置动画 *//* transition: all 1s ease; */position: relative;transform-style: preserve-3d;animation: rotate 5s ease infinite;}/* .scene:hover .box{transform: rotateY(-300deg);} */.scene .box .item{width: 200px;height: 200px;background-color: skyblue;position: absolute;bottom: 0;left: 50%;margin-left: -100px;/* transform: rotateY(calc(var(--i) * 40deg)) translateZ(300px); */}.box .item:nth-child(1){transform: translateZ(300px);}.box .item:nth-child(2){transform: rotateY(40deg) translateZ(300px);}.box .item:nth-child(3){transform: rotateY(80deg) translateZ(300px);}.box .item:nth-child(4){transform: rotateY(120deg) translateZ(300px);}.box .item:nth-child(5){transform: rotateY(160deg) translateZ(300px);}.box .item:nth-child(6){transform: rotateY(200deg) translateZ(300px);}.box .item:nth-child(7){transform: rotateY(240deg) translateZ(300px);}.box .item:nth-child(8){transform: rotateY(280deg) translateZ(300px);}.box .item:nth-child(9){transform: rotateY(320deg) translateZ(300px);}.box:hover{animation-play-state: paused;}@keyframes rotate {0%{transform: rotateX(-10deg) rotateY(0deg);}100%{transform: rotateX(-10deg) rotateY(-360deg);}}</style></head><body><div class="scene"><div class="box"><div class="item --i:0"><img src="images/gg1.jpg" alt="" width="200" height="200"></div><div class="item --i:1"><img src="images/gg2.jpg" alt="" width="200" height="200"></div><div class="item --i:2"><img src="images/gg3.jpg" alt="" width="200" height="200"></div><div class="item --i:3"><img src="images/gg4.jpg" alt="" width="200" height="200"></div><div class="item --i:4"><img src="images/gg4.jpg" alt="" width="200" height="200"></div><div class="item --i:5"><img src="images/gg1.jpg" alt="" width="200" height="200"></div><div class="item --i:6"><img src="images/gg1.jpg" alt="" width="200" height="200"></div><div class="item --i:7"><img src="images/gg1.jpg" alt="" width="200" height="200"></div><div class="item --i:8"><img src="images/gg1.jpg" alt="" width="200" height="200"></div></div></div></body>
</html>
6.flex弹性布局-酷狗音乐播放列表
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>flex弹性布局-酷狗音乐播放列表</title><style type="text/css">body {margin: 0;padding: 0;}a {text-decoration: none;}.container {width: 100%;/* height: 600px; *//* background-color: antiquewhite; *//* 设置最小宽度,防止缩至过少造成挤压 */min-width: 680px;margin-top: 100px;/* 弹性布局 */display: flex;flex-wrap: wrap;}.container .item {width: 25%;display: flex;/* 调成内容居中显示 */justify-content: center;margin-bottom: 20px;}.container .item .item-con {width: 150px;/* border: 1px solid red; *//* 弹性布局方向设置为纵向 */display: flex;flex-direction: column;}.item-con a.item-con-img {height: 150px;/* background-color: antiquewhite; */position: relative;}.item-con a.item-con-img img {border-radius: 10px;}/* 下方文字 */.item a.item-con-img span {font-size: 14px;color: #fff;/* background-color: red; */display: flex;position: absolute;bottom: 10px;left: 10px;z-index: 2;}.item-con a.item-con-img span img {margin-right: 5px;}/* 图片半下方遮罩层 */.item-con a.item-con-img::after{content: '';width: 100%;height: 50%;/* 使用渐变色 */background-image: linear-gradient(to bottom,rgba(255,255,255,0),rgba(0,0,0,0.5));display: block;position: absolute;left: 0;bottom: 0;border-radius: 0px 0px 10px 10px;}.item-con a.item-con-title{font-size: 14px;color: #333;margin-top: 10px;}.item-con a.item-con-title:hover{color: tomato;}</style></head><body><div class="container"><div class="item"><div class="item-con"><a href="" class="item-con-img"><img src="images/flex-01.jpg" alt=""><span><img src="images/icon_play.png" alt="" width="14">2444.0万</span></a><a href="" class="item-con-title">催眠：Delta脑波音乐减压深度睡眠</a></div></div><div class="item"><div class="item-con"><a href="" class="item-con-img"><img src="images/flex-02.jpg" alt=""><span><img src="images/icon_play.png" alt="" width="14">2444.0万</span></a><a href="" class="item-con-title">催眠：Delta脑波音乐减压深度睡眠</a></div></div><div class="item"><div class="item-con"><a href="" class="item-con-img"><img src="images/flex-03.jpg" alt=""><span><img src="images/icon_play.png" alt="" width="14">2444.0万</span></a><a href="" class="item-con-title">催眠：Delta脑波音乐减压深度睡眠</a></div></div><div class="item"><div class="item-con"><a href="" class="item-con-img"><img src="images/flex-04.jpg" alt=""><span><img src="images/icon_play.png" alt="" width="14">2444.0万</span></a><a href="" class="item-con-title">催眠：Delta脑波音乐减压深度睡眠</a></div></div><div class="item"><div class="item-con"><a href="" class="item-con-img"><img src="images/flex-05.jpg" alt=""><span><img src="images/icon_play.png" alt="" width="14">2444.0万</span></a><a href="" class="item-con-title">催眠：Delta脑波音乐减压深度睡眠</a></div></div><div class="item"><div class="item-con"><a href="" class="item-con-img"><img src="images/flex-06.jpg" alt=""><span><img src="images/icon_play.png" alt="" width="14">2444.0万</span></a><a href="" class="item-con-title">催眠：Delta脑波音乐减压深度睡眠</a></div></div><div class="item"><div class="item-con"><a href="" class="item-con-img"><img src="images/flex-07.jpg" alt=""><span><img src="images/icon_play.png" alt="" width="14">2444.0万</span></a><a href="" class="item-con-title">催眠：Delta脑波音乐减压深度睡眠</a></div></div><div class="item"><div class="item-con"><a href="" class="item-con-img"><img src="images/flex-08.jpg" alt=""><span><img src="images/icon_play.png" alt="" width="14">2444.0万</span></a><a href="" class="item-con-title">催眠：Delta脑波音乐减压深度睡眠</a></div></div></div></body>
</html>flex-shrink
flex-shrink 属性指定了 flex 元素的收缩规则，默认值是1。在flex 元素的默认宽度之和大于容器的宽度时候，元素会发生收缩，其收缩的大小的依据是 flex-shrink 值。
flex弹性布局-今日头条首页热门视频栏
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>flex弹性布局-今日头条首页热门视频栏</title><style type="text/css">body {margin: 0;padding: 0;}a{text-decoration: none;}.show-monitor {width: 320px;height: 600px;/* border: 2px solid red; */margin: 50px 0px 0px 50px;}.panel-head {display: flex;/* height: 100px; *//* 解除图标变形 */align-items: center;}.panel-head span.panel-head-title {/* 占满全部空间 */flex-grow: 1;font-size: 20px;margin-left: 10px;}.panel-head .panel-head-sx {font-size: 16px;color: red;margin-left: 5px;}.panel-con {height: 94px;/* background-color: antiquewhite; */margin-top: 20px;display: flex;}.panel-con .panel-con-img {width: 126px;/* 高度自动继承 *//* height: 94px; *//* background-color: aqua; */margin-right: 10px;flex-shrink: 0;}.panel-con .panel-con-img img {width: 100%;height: 100%;/* 裁剪图片 防止变形 */object-fit: cover;}.panel-con .panel-con-txt {/* background-color: aquamarine; *//* 占满剩余空间 */flex-grow: 1;display: flex;flex-direction: column;text-overflow: ellipsis;}.panel-con .panel-con-txt a{font-size: 16px;color: #222;/* 超过44px文字不再显示 */max-height: 44px;overflow: hidden;line-height: 22px;/* 弹性伸缩盒子模型显示 */display: -webkit-box;/* 设置或检索伸缩盒子对象的子元素的排列方式 */-webkit-box-orient: vertical;/* 限制在一个块级元素显示的文本的行数 */-webkit-line-clamp: 2;/* 文本溢出显示省略号 */text-overflow: ellipsis;}.panel-con .panel-con-txt span.like{font-size: 12px;background-color: #fff2f2;color: #f04142;/* 消除占满整行现象 变为内容实际所占宽度*/align-self: flex-start;padding: 3px 6px;border-radius: 5px;margin-top: 5px;}.panel-con .panel-con-txt .desc{font-size: 14px;color: #999;display: flex;justify-content: space-between;margin-top: 5px;}</style></head><body><div class="show-monitor"><div class="panel-head"><img src="images/icon-play.png" alt="" width="22"><span class="panel-head-title">热门视频</span><img src="images/icon-sx2.png" alt="" width="16"><span class="panel-head-sx">换一换</span></div><div class="panel-con"><div class="panel-con-img"><a href=""><img src="images/toutiao-01.jpeg" alt=""></a></div><div class="panel-con-txt"><a href="">司马南：中国与俄罗斯的战线</a><span class="like">1万评论</span><div class="desc"><span>148万次观看</span><span>司马南频道</span></div></div></div><div class="panel-con"><div class="panel-con-img"><a href=""><img src="images/toutiao-02.jpeg" alt=""></a></div><div class="panel-con-txt"><a href="">无论做什么鱼：最忌放盐和料酒研制，大厨教你绝招.</a><span class="like">1万评论</span><div class="desc"><span>148万次观看</span><span>司马南频道</span></div></div></div><div class="panel-con"><div class="panel-con-img"><a href=""><img src="images/toutiao-03.jpeg" alt=""></a></div><div class="panel-con-txt"><a href="">司马南：中国与俄罗斯的战线</a><span class="like">1万评论</span><div class="desc"><span>148万次观看</span><span>司马南频道</span></div></div></div><div class="panel-con"><div class="panel-con-img"><a href=""><img src="images/toutiao-04.jpeg" alt=""></a></div><div class="panel-con-txt"><a href="">司马南：中国与俄罗斯的战线</a><span class="like">1万评论</span><div class="desc"><span>148万次观看</span><span>司马南频道</span></div></div></div></div></body>
</html>
grid网格布局-360图片展示
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>grid网格布局-360图片展示</title><style type="text/css">body{margin: 0;padding: 0;}.container{width: 100%;/* height: 700px; *//* background-color: aquamarine; */margin-top: 100px;display: grid;/* 行高 */grid-template-rows: 207px 155px 259px;grid-template-columns: 420px 365px 299px 118px 296px;/* 网格居中显示 */justify-content: center;/* 合并单元网格 */grid-template-areas: 'a b d d f''a b e h h''a c e h h';/* 行间隙 列间隙 */gap: 3px 3px;}.item:nth-child(1){grid-area: a;}.item:nth-child(2){grid-area: b;}.item:nth-child(3){grid-area: c;}.item:nth-child(4){grid-area: d;}.item:nth-child(5){grid-area: e;}.item:nth-child(6){grid-area: f;background-color: pink;}.item:nth-child(7){grid-area: h;}</style></head><body><div class="container"><div class="item"><img src="images/grid-01.jpg" alt=""></div><div class="item"><img src="images/grid-02.jpg" alt=""></div><div class="item"><img src="images/grid-03.jpg" alt=""></div><div class="item"><img src="images/grid-04.jpg" alt=""></div><div class="item"><img src="images/grid-05.jpg" alt=""></div><div class="item"></div><div class="item "><img src="images/grid-06.jpg" alt=""></div></div></body>
</html>
小米商城左侧二级菜单
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>小米商城左侧二级菜单</title><style type="text/css">body {margin: 0;padding: 0;background-image: linear-gradient(to right, skyblue, #fff);}a {text-decoration: none;}.menu {width: 230px;height: 420px;padding: 20px 0;background-color: rgba(0, 0, 0, 0.5);margin: 50px 0 0 50px;position: relative;}.menu .item {height: 42px;/* border: 1px solid red; */color: #fff;font-size: 14px;line-height: 42px;padding-left: 30px;background: url('images/right-jiantou.png') no-repeat 200px 10px;cursor: pointer;}.menu .item:hover {background-color: #ff6700;background-image: url('images/right-jiantou2.png');}/* 右侧二级菜单 */.menu .item .nav {min-width: 250px;height: 460px;background-color: #fff;border: 1px solid #666;position: absolute;top: 0;left: 100%;box-sizing: border-box;/* 六行单元格平分整个区域 */display: grid;grid-template-rows: repeat(6, 1fr);grid-template-columns: 250px;/* 排列方式设置为先列后行 */grid-auto-flow: column;/* 设置隐式网格宽度 */grid-auto-columns: 250px;padding: 20px;/* 初始默认隐藏 */display: none;}.item .nav a {/* border: 1px solid red; */color: #000;display: flex;/* 垂直方向居中对齐,防止随父元素高度而被拉伸 */align-items: center;}.item .nav a img {margin-right: 10px;}.item .nav a:hover {color: #ff6700;}.item:hover .nav {display: grid;}</style></head><body><div class="menu"><div class="item">手机<div class="nav"><a href=""><img src="images/grid-mi-01.webp" alt="" width="40">黑鲨5 Pro</a><a href=""><img src="images/grid-mi-02.webp" alt="" width="40">黑鲨5</a><a href=""><img src="images/grid-mi-03.webp" alt="" width="40">Redmi 10A</a><a href=""><img src="images/grid-mi-04.webp" alt="" width="40">Redmi K50 Pro</a><a href=""><img src="images/grid-mi-05.webp" alt="" width="40">Redmi K40S</a><a href=""><img src="images/grid-mi-06.webp" alt="" width="40">黑鲨5 Pro</a><a href=""><img src="images/grid-mi-07.webp" alt="" width="40">黑鲨5</a><a href=""><img src="images/grid-mi-08.webp" alt="" width="40">Redmi 10A</a><a href=""><img src="images/grid-mi-09.webp" alt="" width="40">Redmi K50 Pro</a><a href=""><img src="images/grid-mi-05.webp" alt="" width="40">Redmi K40S</a></div></div><div class="item">电视<div class="nav"><a href=""><img src="images/grid-mi-01.webp" alt="" width="40">黑鲨5 Pro</a><a href=""><img src="images/grid-mi-02.webp" alt="" width="40">黑鲨5</a><a href=""><img src="images/grid-mi-03.webp" alt="" width="40">Redmi 10A</a><a href=""><img src="images/grid-mi-04.webp" alt="" width="40">Redmi K50 Pro</a><a href=""><img src="images/grid-mi-05.webp" alt="" width="40">Redmi K40S</a><a href=""><img src="images/grid-mi-06.webp" alt="" width="40">黑鲨5 Pro</a><a href=""><img src="images/grid-mi-07.webp" alt="" width="40">黑鲨5</a><a href=""><img src="images/grid-mi-08.webp" alt="" width="40">Redmi 10A</a><a href=""><img src="images/grid-mi-09.webp" alt="" width="40">Redmi K50 Pro</a><a href=""><img src="images/grid-mi-05.webp" alt="" width="40">Redmi K40S</a><a href=""><img src="images/grid-mi-09.webp" alt="" width="40">Redmi K50 Pro</a><a href=""><img src="images/grid-mi-05.webp" alt="" width="40">Redmi K40S</a></div></div><div class="item">笔记本 平板<div class="nav"><a href=""><img src="images/grid-mi-01.webp" alt="" width="40">黑鲨5 Pro</a><a href=""><img src="images/grid-mi-02.webp" alt="" width="40">黑鲨5</a><a href=""><img src="images/grid-mi-03.webp" alt="" width="40">Redmi 10A</a><a href=""><img src="images/grid-mi-04.webp" alt="" width="40">Redmi K50 Pro</a><a href=""><img src="images/grid-mi-05.webp" alt="" width="40">Redmi K40S</a><a href=""><img src="images/grid-mi-07.webp" alt="" width="40">黑鲨5</a><a href=""><img src="images/grid-mi-08.webp" alt="" width="40">Redmi 10A</a><a href=""><img src="images/grid-mi-09.webp" alt="" width="40">Redmi K50 Pro</a><a href=""><img src="images/grid-mi-05.webp" alt="" width="40">Redmi K40S</a><a href=""><img src="images/grid-mi-01.webp" alt="" width="40">黑鲨5 Pro</a><a href=""><img src="images/grid-mi-02.webp" alt="" width="40">黑鲨5</a><a href=""><img src="images/grid-mi-03.webp" alt="" width="40">Redmi 10A</a><a href=""><img src="images/grid-mi-04.webp" alt="" width="40">Redmi K50 Pro</a><a href=""><img src="images/grid-mi-05.webp" alt="" width="40">Redmi K40S</a><a href=""><img src="images/grid-mi-06.webp" alt="" width="40">黑鲨5 Pro</a><a href=""><img src="images/grid-mi-07.webp" alt="" width="40">黑鲨5</a><a href=""><img src="images/grid-mi-08.webp" alt="" width="40">Redmi 10A</a><a href=""><img src="images/grid-mi-09.webp" alt="" width="40">Redmi K50 Pro</a><a href=""><img src="images/grid-mi-05.webp" alt="" width="40">Redmi K40S</a></div></div><div class="item">家电</div><div class="item">出行 穿戴</div><div class="item">智能 路由器</div><div class="item">电源 配件</div><div class="item">健康 儿童</div><div class="item">耳机 音箱</div><div class="item">生活 箱包</div></div></body>
</html>
网盘地址
相关文章：
前端开发常用案例（二）
这里写目录标题1.loding加载动画2.全屏加载动画效果3.吃豆豆4.鼠标悬停3D翻转效果5.3D旋转木马效果6.flex弹性布局-酷狗音乐播放列表flex弹性布局-今日头条首页热门视频栏grid网格布局-360图片展示小米商城左侧二级菜单1.loding加载动画 代码如下： <!DOCTYPE h…...
基于springboot+vue的儿科保健计划免疫系统
基于springbootvue的儿科保健计划免疫系统 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取项目下载方式🍅 一、项目背…...
1.两数之和
难度简单给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target 的那 两个 整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序…...
字符串匹配 - 模式预处理：KMP 算法（Knuth-Morris-Pratt）
Knuth-Morris-Pratt算法（简称KMP）是最常用的字符串匹配算法之一。算法简介如下算法解释主要来源于这里，但是通常很难阅读完全，我推荐你直接进入下一节 图例解释部分。我们来观察一下朴素的字符串匹配算法的操作过程。如下图&#…...
工程师手册：电源设计中的电容选用规则
摘要 电源往往是我们在电路设计过程中最容易忽略的环节。作为一款优秀的设计，电源设计应当是很重要的，它很大程度影响了整个系统的性能和成本。电源设计中的电容使用，往往又是电源设计中最容易被忽略的地方。一、电源设计中电容的工作原理 在…...
【安全开发】专栏文章汇总
安全开发–1–TCP和UDP网络编程 安全开发–2–嗅探邮箱协议口令 安全开发–3–Python实现ARP缓存投毒 安全开发–4–SSH通信工具开发 安全开发–5–编写简单的netcat工具 安全开发–6–一个简单的TCP代理工具开发 安全开发–7–SSH隧道工具开发 安全开发–8–Python实现流量数据…...
视频监控流程图4
<html> <head> <meta http-equiv"Content-Type" content"text/html; charsetUTF-8"/> <link rel"stylesheet" type"text/css" href"visio.css"/> <title> 视频监控流程图 </title> <…...
「JVM 编译优化」Java 语法糖（泛型、自动装箱/拆箱、条件编译）
「JVM 编译优化」Java 语法糖（泛型、自动装箱/拆箱、条件编译） 语法糖可以看做事前端编译期的一些小把戏；虽不会提供实质性的功能改进，但它们或能提高效率，或能提升语法的严谨性，或能减少编码出错的机会&a…...
Linux下的进程控制
目录 退出码 终止进程 进程等待 进程程序替换 自己实现简易shell命令行 内建命令 退出码 在编写代码时main函数内部我们通常都使用return 0;结尾，以此标识正常退出。这里的return 0就是所谓的退出码，Linux下也是一样： 看这个小程序&…...
QT 文件监视系统QFileSystemWatcher监视目录的改变directoryChanged和监视文件的改变fileChanged
QT 文件监视系统QFileSystemWatcher监视目录的改变相关操作说明mainwindow.hmainwindow.cpp调试结果相关操作说明 添加头文件 Header: #include qmake: QT core bool QFileSystemWatcher::addPath(const QString &path)如果路径存在，则会向文件系统监视器添…...
Typescript基础知识（类型断言、类型别名、字符串字面量类型、枚举、交叉类型）
系列文章目录 引入一：Typescript基础引入（基础类型、元组、枚举） 引入二：Typescript面向对象引入（接口、类、多态、重写、抽象类、访问修饰符） 第一章：Typescript基础知识（Typescri…...
Windows系统扩充C盘空间系列方法总结
目录前言方法一 使用自带的Windows的DiskPart扩充C盘1. 打开cmd2.三步命令方法二：使用Windows系统内置磁盘管理扩展C盘方法三. 使用专业磁盘分区工具总结前言 本教程是总结Windows系统进行C盘（系统盘）扩充空间的系列方法，一般来讲…...
华为OD机试 - 跳格子（Python）
跳格子 题目 地上共有N个格子，你需要跳完地上所有的格子， 但是格子间是有强依赖关系的，跳完前一个格子后， 后续的格子才会被开启，格子间的依赖关系由多组steps数组给出， steps[0]表示前一个格子,steps[1]表示steps[0]可以开启的格子: 比如[0,1]表示从跳完第0个格子以后…...
Java配置文件的值注入
1.平常使用直接在变量头上加上Value就可以把配置文件的值注入进来 Value(“${environment.active}”) private String environment; 2.但是变量使用static修饰时，就不能注入进来了 Value(“${environment.active}”) private static String environment; 这是因…...
SAP 订单BOM与销售BOM的区别
订单BOM与销售BOM的区别 訂單BOM: 是實際生產時用的BOM, 在標準BOM和銷售BOM基礎上增減物料的BOM 銷售BOM: 是為特定客戶設定的BOM, 在主檔數據層次上的BOM, 在生產時是帶到訂單BOM中去的. 標準BOM: 是公司為標準生產的BOM, 在主檔數據層次上的BOM, 在生產時是帶到訂單BOM中去的…...
支付宝支付详细流程
1、二维码的生成二维码生成坐标 <!-- zxing生成二维码 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.3.3</version></dependency><dependency><groupId>co…...
TCP 的演化史-fast retransmit/recovery
工作原因要对一个 newreno 实现增加 sack 支持。尝试写了 3 天 C，同时一遍又一遍梳理 sack 标准演进。这些东西我早就了解，但涉及落地写实现，就得不断抠细节，试图写一个完备的实现。 这事有更简单的方法。根本没必要完全实现 RFC…...
CSS基础选择器，你认识多少？
前言在上一文初识CSS中，我们了解到了其格式：选择器{ }在初步尝试使用时，我们笼统的直接输入了p { }以选择p标签来对其操作，而这一章节里，我们再进一步探索有关基础选择器的相关内容，理解选择器的作用。选择…...
ChatGPT入门案例｜商务智能对话客服（三）
本篇介绍智能客服的基本功能架构和基本概念，并利用对话流技术构建商务智能应用。 01、商务智能客服功能结构 互联网的发展已经深入到社会的各个方面，智能化发展已经成为社会发展的大趋势。在大数据和互联网时代，企业和组织愈加重视客户沟通…...
Matlab 最小二乘法拟合平面（SVD）
文章目录 一、简介1.1最小二乘法拟合平面1.2 SVD角度二、实现代码三、实现效果参考资料一、简介 1.1最小二乘法拟合平面 之前我们使用过最为经典的方式对平面进行了最小二乘拟合（点云最小二乘法拟合平面），其推导过程如下所示： 仔细观察一下可以发现...
AtCoder Regular Contest 126 D题题解
思路 首先我们看看假设选中 mmm 个数后的答案。 我们首先现将 mmm 个数移动到一起，在将他们重新排序。 我们知道，mmm 个数移在一起时，当位于中间的那个数不动时交换次数最少，于是可以列出式子（cic_ici 是点 iii 的…...
Android R WiFi热点流程浅析
Android R WiFi热点流程浅析 Android上的WiFi SoftAp功能是用户常用的功能之一，它能让我们分享手机的网络给其他设备使用。 那Android系统是如何实现SoftAp的呢，这里在FWK层面做一个简要的流程分析，供自己记录和大家参考。 以Android R版本为…...
【C++进阶】二、多态详解（总）
目录 一、多态的概念 二、多态的定义及实现 2.1 多态的构成条件 2.2 虚函数 2.3 虚函数的重写 2.4 虚函数重写的两个例外 2.4.1 协变 2.4.2 析构函数的重写 2.5 C11 override 和 final 2.5.1 final 2.5.2 override 2.6 重载、覆盖(重写)、隐藏(重定义)的对比 三、…...
node-sass@4.14.1 包含风险， 如何升级依赖至 dart-sass
文章目录需求我上网都查到了哪些信息在 github 看到了 node-sass 依赖的最新版本的列表：关于方案2的失败不同版本的 nodejs 和 node-sass依赖的**适配关系**从何得知替代方案——dart-sass如何安装 dart sass？需求 在做一个基于Node、React的前端项目&a…...
DataWhale 大数据处理技术组队学习task2
三、Hadoop分布式文件系统 1. 产生背景 数据量越来越大，一台独立的计算机已经无法存储所有的数据---->将大规模的数据存储到成百上千的计算机中------为了解决数据管理以及维护极其繁琐与低效------>分布式文件系统 分布式文件系统是管理网络中跨多台计算机…...
一文读懂select、poll、epoll的用法
select，poll，epoll都是IO多路复用的机制。I/O多路复用就通过一种机制，可以监视多个描述符，一旦某个描述符就绪（一般是读就绪或者写就绪），能够通知程序进行相应的读写操作。但select，…...
《C陷阱与缺陷》----词法“陷阱”
导言： 由于一个程序错误可以从不同层面采用不同方式进行考察，而根据程序错误与考察程序的方式之间的相关性，可以将程序错误进行划分为各种陷阱与缺陷： ①.词法“陷阱” ②.语法“陷阱” ③.语义“陷阱” ④.连接问题 ⑤.库函数问…...
千锋教育+计算机四级网络-计算机网络学习-04
UDP概述 UDP协议 面向无连接的用户数据报协议，在传输数据前不需要先建立连接；目地主机的运输层收到UDP报文后，不需要给出任何确认 UDP特点 相比TCP速度稍快些简单的请求/应答应用程序可以使用UDP对于海量数据传输不应该使用UDP广播和多播应用…...
蓝桥杯算法训练合集十四 1.P08052.P07053.同余方程4.P08015.ascii应用
目录 1.P0805 2.P0705 3.同余方程 4.P0801 5.ascii应用 1.P0805 问题描述 当两个比较大的整数相乘时，可能会出现数据溢出的情形。为避免溢出，可以采用字符串的方法来实现两个大数之间的乘法。具体来说，首先以字符串的形式输入两个整数&…...
判断字符串中的字符的类型isdecimal()；isalpha()；isdigit()；isalnum()
【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 判断字符串中的字符的类型 isdecimal()；isalpha()；isdigit()；isalnum() [太阳]选择题 对于代码中isdecimal()和isalnum()输出的结果是? s "ABc123&…...
昆山苏州网站建设/免费发布产品信息的网站
网易考拉（以下简称考拉）是网易旗下以跨境业务为主的综合型电商，自2015年1月9日上线公测后，业务保持了高速增长，这背后离不开其技术团队的支撑。微服务化是电商IT架构演化的必然趋势，网易考拉的服务架构演进…...
做网站计划/我要下载百度
Back up 1,右键选中需要备份的数据库，Tasks-->Backup 2.General中，Destination，先remove掉之前的，然后再Add 需要注意的是，add的文件，必须要以.bak为后缀名，否则后面restore的话，…...
做网站商城需要多少钱/怎么做网站排名
MySQL 有许多图形化的管理工具，我们在此介绍二个官方的工具「MySQL Administrator」及「MySQL Query Browser」。MySQL Administrator 是用来管理 MySQL Server 用的，您可以查看目前系统状态、新增使用者等。而 MySQL Query Browser 可以用来查看数据库内…...
wordpress系统密码忘记/快速提升网站排名
1.JavaScript打印 <input id"btnPrint" type"button" value"打印" οnclick"javascript:window.print();" /> 可以用样式控制，你想让那块打印就打印啊，样式如下： <style type"text…...
西安网站建设雄账号/网站推广软件下载
rxjs 获取接口示例这篇文章是由同行评审弗洛里安Rappl和莫里茨克罗格 。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态！ 随着对函数式React式编程 （FRP）的兴趣的增长， RxJS已经成为该范例中最流行JavaScript库之一…...
网站开发无锡/西安百度
栈 栈本身也是一种线性表，只是它只允许在一端进行插入和删除，栈结构的元素满足先进后出（LIFO）的特征。线性表本身分为顺序表和链表，所以栈也分为顺序栈和链栈。 1.顺序栈 顺序表声明的时候需要指明顺序表的最大容量…...