HTML+CSS作品展示(仿写携程网移动端首页②)
参考来源:
黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili
效果展示:
网页GitHub地址如下:(若加载较慢建议刷新后耐心等待一会~)
ctripH5_splider
主要功能:
接上篇文章,加了轮播图效果
网页代码如下:
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>ctripH5</title><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><link rel="stylesheet" href="css/style.css"><script src="index.js"></script>
</head>
<body><header class="search"><div class="search-inner"><span class="search-icon icon-search"></span><span>搜索:目的地/酒店/景点/航班号</span></div></header><nav class="top-nav"><div class="top-nav-inner"><ul><li class="top-nav-hd-bj1"><span class="top-nav-icon-icon1"></span><span>酒店</span></li><li class="top-nav-bd-bj1"><span class="top-nav-icon-icon2"></span><span>民宿/客栈</span></li><li class="top-nav-bt-bj1"><span class="top-nav-icon-icon3"></span><span>特价/爆款</span></li></ul><ul><li class="top-nav-hd-bj2"><span class="top-nav-icon-icon4"></span><span>机票</span></li><li class="top-nav-bd-bj2"><span class="top-nav-icon-icon5"></span><span>接送机/包车</span></li><li class="top-nav-bt-bj2"><span class="top-nav-icon-icon6"></span><span>航班助手</span></li></ul><ul><li class="top-nav-hd-bj3"><span class="top-nav-icon-icon7"></span><span>火车票</span></li><li class="top-nav-bd-bj3"><span class="top-nav-icon-icon8"></span><span>汽车/船票</span></li><li class="top-nav-bt-bj3"><span class="top-nav-icon-icon9"></span><span>租车</span></li></ul><ul><li class="top-nav-hd-bj4"><span class="top-nav-icon-icon10"></span><span>旅游</span></li><li class="top-nav-bd-bj4"><span class="top-nav-icon-icon11"></span><span>门票/活动</span></li><li class="top-nav-bt-bj4"><span class="top-nav-icon-icon12"></span><span>周边游</span></li></ul><ul><li class="top-nav-hd-bj5"><span class="top-nav-icon-icon13"></span><span>攻略/景点</span></li><li class="top-nav-bd-bj5"><span class="top-nav-icon-icon14"></span><span>美食</span></li><li class="top-nav-bt-bj5"><span class="top-nav-icon-icon15"></span><span>购物/免税</span></li></ul></div></nav><nav class="switch1"><span class="switch1-item1"></span><span class="switch1-item2"></span></nav><section class="product"><div class="product-left"><div class="product-left-hd"><img src="images/zhibo-left.png" alt=""><span>特价好货直播中</span></div><div class="product-left-bd"><img src="upload/zhibo1.jpg" alt=""><div class="tag1">酒店套餐</div><span class="fuhao">¥</span><span class="xprice">2022</span><span class="yprice">4009</span><span class="lijian">立减¥1987</span></div></div><div class="product-right"><div class="product-right-hd"><img src="images/jingxuan-right.png" alt="" class="product-right-hd-img"><span class="product-right-hd-span">权威排行榜</span></div><div class="product-right-bd"><div class="jingxuan1"><img src="upload/jingxuan1.jpg" alt=""><div class="tag2">华东</div><span class="left">华东奢华酒店榜</span></div><div class="jingxuan2"><img src="upload/jingxuan2.jpg" alt=""><div class="tag2">华东</div><span class="right">华东滑雪景点榜</span></div></div></div></section><banner class="tejia"><ul><li><img src="upload/tejia2.png" alt=""></li><li><img src="upload/tejia.jpg" alt=""></li><li><img src="upload/tejia2.png" alt=""></li><li><img src="upload/tejia.jpg" alt=""></li></ul><ol><li class="current"></li><li></li></ol></banner><footer class="toolbox"><div class="toolbox-hd"><a href="#" class="phone"><i class="icon-phone"></i><span class="phone-span">电话预定</span></a><a href="#" class="download"><i class="icon-download3"></i><span class="download-span">下载携程</span></a><a href="#" class="language"><i class="icon-sphere"></i><span class="language-span">Language</span><i class="triangle"></i></a></div><div class="toolbox-bd"><a href="#" class="map">网站地图</a><a href="#" class="computer">电脑版</a><p class="link">©2022携程旅行 沪ICP备08023580号</p></div></footer><nav class="bottom-nav"><a href="#"><span></span><span>首页</span></a><a href="#"><span></span><span>社区</span></a><a href="#"><span></span><span>消息</span></a><a href="#"><span></span><span>我的</span></a></nav><a href="#" class="qiandao"></a>
</body>
</html>
CSS:
body {max-width: 540px;min-width: 320px;margin: 0 auto;padding: 0;font: normal 16px/1.5 PingFangSC-regular,Tahoma,Lucida Grande,Verdana,Microsoft Yahei,STXihei,hei;color: #000;overflow-x: hidden;-webkit-tap-highlight-color: transparent;background: #f4f4f4;
}
ul,
ol,
li {margin: 0;padding: 0;list-style: none;
}
.search {position: fixed;max-width: 540px;min-width: 320px;top: 0;left: 50%;transform: translateX(-50%);width: 100%;height: 50px;background-color: #fff;box-sizing: border-box;z-index: 1;
}
.search-inner {box-sizing: border-box;margin: 12px 8px;border: 1.8px solid #0086f6;border-radius: 15px;
}
.search-inner span {box-sizing: border-box;margin-left: 6px;font-size: 15px;line-height: 21px;color: #999;
}
.search-icon {box-sizing: border-box;color: #666;font-size: 20px;margin-left: 12px;font-family: "icomoon";
}
.top-nav {box-sizing: border-box;max-width: 540px;min-width: 320px;margin-top: 50px;height: 184px;display: flex;background-color: #fff;}
.top-nav-inner {display: flex;flex: 95%;margin: 0 12px 0;/* background-color: pink; */
}
.top-nav ul {display: flex;flex: 1;margin: 0;padding: 0;list-style: none;flex-direction: column;width: 20%;/* background-color: purple; */
}
.top-nav-inner ul li {flex: 1;flex-direction: column;justify-content: center;text-align: center;
}
.top-nav-hd-bj1 span:nth-child(2) {display: block;margin: 0 auto;font-size: 12px;color: #fff;
}
.top-nav-hd-bj2 span:nth-child(2) {display: block;margin: 0 auto;font-size: 12px;color: #fff;
}
.top-nav-hd-bj3 span:nth-child(2) {display: block;margin: 0 auto;font-size: 12px;color: #fff;
}
.top-nav-hd-bj4 span:nth-child(2) {display: block;margin: 0 auto;font-size: 12px;color: #fff;
}
.top-nav-hd-bj5 span:nth-child(2) {display: block;margin: 0 auto;font-size: 12px;color: #fff;
}
.top-nav-bd-bj1 span:nth-child(2) {display: block;margin: 0 auto;font-size: 12px;color: #000;
}
.top-nav-bd-bj2 span:nth-child(2) {display: block;margin: 0 auto;font-size: 12px;color: #000;
}
.top-nav-bd-bj3 span:nth-child(2) {display: block;margin: 0 auto;font-size: 12px;color: #000;
}
.top-nav-bd-bj4 span:nth-child(2) {display: block;margin: 0 auto;font-size: 12px;color: #000;
}
.top-nav-bd-bj5 span:nth-child(2) {display: block;margin: 0 auto;font-size: 12px;color: #000;
}
.top-nav-bt-bj1 span:nth-child(2) {display: block;margin: 0 auto;font-size: 12px;color: #000;
}
.top-nav-bt-bj2 span:nth-child(2) {display: block;margin: 0 auto;font-size: 12px;color: #000;
}
.top-nav-bt-bj3 span:nth-child(2) {display: block;margin: 0 auto;font-size: 12px;color: #000;
}
.top-nav-bt-bj4 span:nth-child(2) {display: block;margin: 0 auto;font-size: 12px;color: #000;
}
.top-nav-bt-bj5 span:nth-child(2) {display: block;margin: 0 auto;font-size: 12px;color: #000;
}
.top-nav-inner ul span[class^="top-nav-icon"] {display: block;margin: 5px auto 0 auto;width: 28px;height: 28px;background: url(../images/stprites1.png) no-repeat 0 -84px;background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon2 {background: url(../images/stprites1.png) no-repeat 0 -335px;background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon3 {background: url(../images/stprites1.png) no-repeat 0 0px;background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon4 {background: url(../images/stprites1.png) no-repeat 0 -168px;background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon5 {background: url(../images/stprites1.png) no-repeat 0 -56px;background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon6 {background: url(../images/stprites1.png) no-repeat 0 -280px;background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon7 {background: url(../images/stprites1.png) no-repeat 0 -364px;background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon8 {background: url(../images/stprites1.png) no-repeat 0 -224px;background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon9 {background: url(../images/stprites1.png) no-repeat 0 -250px;background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon10 {background: url(../images/stprites1.png) no-repeat 0 -140px;background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon11 {background: url(../images/stprites1.png) no-repeat 0 -196px;background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon12 {background: url(../images/stprites1.png) no-repeat 0 -392px;background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon13 {background: url(../images/stprites1.png) no-repeat 0 -28px;background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon14 {background: url(../images/stprites1.png) no-repeat 0 -112px;background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon15 {background: url(../images/stprites1.png) no-repeat 0 -308px;background-size: 28px auto;
}
.top-nav-hd-bj1 {border-top-left-radius: 10px;border-right: 1px solid #fff;background-image: linear-gradient(180deg,#fa5956,#fb8650);
}
.top-nav-hd-bj2 {border-right: 1px solid #fff;background-image: linear-gradient(180deg,#3c83fa,#50b2fa);
}
.top-nav-hd-bj3 {border-right: 1px solid #fff;background-image: linear-gradient(0deg,#66a4ff,#5e80ff);
}
.top-nav-hd-bj4 {border-right: 1px solid #fff;background-image: linear-gradient(180deg,#2fc3b6,#52d9b3);
}
.top-nav-hd-bj5 {border-top-right-radius: 10px;background-image: linear-gradient(0deg,#ffa846,#ff8939 99%);
}
.top-nav-bd-bj1 {border-top: 1px solid #fff;border-right: 1px solid #fff;background-color: #fff5f1;
}
.top-nav-bt-bj1 {border-top: 1px solid #fff;border-right: 1px solid #fff;background-color: #fff5f1;
}
.top-nav-bd-bj2 {border-top: 1px solid #fff;border-right: 1px solid #fff;background-color: #eff9ff;
}
.top-nav-bt-bj2 {border-top: 1px solid #fff;border-right: 1px solid #fff;background-color: #eff9ff;
}
.top-nav-bd-bj3 {border-top: 1px solid #fff;border-right: 1px solid #fff;background-color: #f2f5ff;
}
.top-nav-bt-bj3 {border-top: 1px solid #fff;border-right: 1px solid #fff;background-color: #f2f5ff;
}
.top-nav-bd-bj4 {border-top: 1px solid #fff;border-right: 1px solid #fff;background-color: #ecfcf8;
}
.top-nav-bt-bj4 {border-top: 1px solid #fff;border-right: 1px solid #fff;background-color: #ecfcf8;
}
.top-nav-bd-bj5 {border-top: 1px solid #fff;background-color: #fff9f2;
}
.top-nav-bt-bj5 {border-top: 1px solid #fff;background-color: #fff9f2;
}
.switch1 {display: flex;justify-content: center;padding-top: 4px;height: 20px;width: 100%;background-image: linear-gradient(0deg,#f4f4f4,#fff);
}
.switch1-item1 {margin-right: 4px;width: 14px;height: 4px;border-radius: 2px;background-color: #0086f6;
}
.switch1-item2 {width: 4px;height: 4px;border-radius: 2px;background-color: #ccc;
}
a {text-decoration: none;color: #000;
}
.product {display: flex;margin-left: -8px;margin-bottom: 10px;padding: 0 12px;background-color: #f4f4f4;box-sizing: border-box;
}
.product-left {flex: 50%;margin: 5px;background-color: #fff;border-radius: 10px;
}
.product-left-hd {height: 20px;margin: 8px;
}
.product-left-hd img {float: left;width: 73px;height: 20px;
}
.product-left-hd span {float: right;padding: 0 4px;font-size: 10px;color: #ff4607;border-radius: 2px;background-color: #ffebe3;
}
.product-left-bd {position: relative;
}
.product-left-bd img {width: 238px;height: 84px;border-radius: 5px;margin: 0 5px;
}
.fuhao {float: left;margin-left: 5px;font-size: 11px;color: #f60;line-height: 2.2;
}
.product-left-bd .xprice {float: left;font-size: 16px;color: #f60;font-weight: 700;
}
.product-left-bd .yprice {float: left;margin: 0 3px;font-size: 10px;color: #666;line-height: 1.8;vertical-align: middle;text-decoration: line-through;
}
.lijian {float: left;padding: 3px;background-image: linear-gradient(90deg,#fa5956,#fb8650);border-radius: 2px;font-size: 10px;line-height: 1.1;color: #fff;
}
.product-right {flex: 50%;margin: 5px;background-color: #fff;border-radius: 10px;
}
.product-right-hd {height: 20px;margin: 8px;box-sizing: border-box;
}
.product-right-hd-img {float: left;width: 73px;height: 20px;
}
.product-right-hd-span {float: right;padding: 0 4px;font-size: 10px;color: #ae6e15;border-radius: 2px;background-color: #fdefd2;
}
.product-right-bd {text-align: center;padding: 0 5px;box-sizing: border-box;
}
.jingxuan1 {width: 48%;float: left;margin: 1%;position: relative;overflow: hidden;
}
.jingxuan1 img {width: 100%;height: 84px;margin: 0;padding: 0;border-radius: 6px;
}
.product-right-bd span {display: block;margin-left: -28px;font-size: 11px;color: #333;line-height: 11px;height: 11px;
}
.jingxuan2 {width: 48%;float: left;margin: 1%;position: relative;overflow: hidden;
}
.jingxuan2 img {margin: 0;padding: 0;width: 100%;height: 84px;border-radius: 6px;
}
.tag1 {position: absolute;top: 0;left: 5px;padding: 0 3px;border-top-left-radius: 6px;border-bottom-right-radius: 6px;font-size: 10px;line-height: 14px;background: rgba(51,51,51,.8);color: #fff;
}
.tag2 {position: absolute;top: 0;left: 0;padding: 0 3px;border-top-left-radius: 6px;border-bottom-right-radius: 6px;font-size: 10px;line-height: 14px;color: #663c00;background-image: linear-gradient(270deg,#f8e1bd,#e2c089);
}
.tejia {position: relative;margin-top: 10px;padding: 0;width: 100%;display: block;/* display: flex; */position: relative;background-color: #f4f4f4;box-sizing: border-box;overflow: hidden;
}
.tejia ul {width: 400%;overflow: hidden;margin-left: -100%;
}
.tejia ul li {float: left;width: 25%;overflow: hidden;border-radius: 10px;
}
.tejia img {width: 100%;
}
.tejia ol {position: absolute;bottom: 5px;right: 50%;
}
.tejia ol li {display: inline-block;width: 5px;height: 5px;z-index: 1;background-color: #fff;border-radius: 2px;transition: all .3s;
}
.tejia ol li.current {width: 10px;
}
.toolbox {height: 100px;padding-top: 12px;padding-bottom: 50px;
}
.toolbox-hd {display: flex;justify-content: space-around;margin: 0 12px;
}
.toolbox-hd a {display: flex;justify-content: center;align-items: center;height: 30px;border: 1px solid #999;background-color: transparent;border-radius: 4px;min-width: 100px;
}
.toolbox-hd span {font-size: 13px;color: #333;line-height: 17px;margin-right: 4px;
}
.toolbox-hd i[class^=icon-] {color: #ccc;font-size: 13px;line-height: 17px;margin-right: 4px;
}
.triangle {display: inline-block;border-top: 5px solid #666;border-left: 4px solid transparent;border-right: 4px solid transparent;
}
.toolbox-bd {text-align: center;font-size: 12px;line-height: 15px;margin-top: 13px;}
.toolbox-bd a,
.toolbox-bd p {color: #666;
}
.map {margin-right: 24px;padding-right: 24px;
}
.bottom-nav {display: flex;bottom: 0;left: 0;right: 0;margin: 0 auto;position: fixed;justify-content: center;align-items: center;height: 49px;max-width: 540px;background-color: #fff;box-shadow: 0 -5px 15px 0 rgb(0 0 0 / 5%);
}
.bottom-nav a {margin-top: 1px;flex: 1;display: flex;justify-content: center;align-items: center;flex-direction: column;padding-bottom: 5px;color: #666;font-size: 11px;line-height: 12px;
}
.bottom-nav a:nth-child(1) span:nth-child(1) {width: 32px;height: 32px;background: url(../images/stprites2.png) no-repeat 0 0;background-size: 32px auto;
}
.bottom-nav a:nth-child(2) span:nth-child(1) {width: 32px;height: 32px;background: url(../images/stprites2.png) no-repeat 0 -32px;background-size: 32px auto;
}
.bottom-nav a:nth-child(3) span:nth-child(1) {width: 32px;height: 32px;background: url(../images/stprites2.png) no-repeat 0 -64px;background-size: 32px auto;
}
.bottom-nav a:nth-child(4) span:nth-child(1) {width: 32px;height: 32px;background: url(../images/stprites2.png) no-repeat 0 -96px;background-size: 32px auto;
}
.qiandao {position: fixed;bottom: 55px;right: 0;height: 76px;width: 76px;background: url(../images/qiandao.png) no-repeat;background-size: 76px;
}
JS:
window.addEventListener('load',function() {var tejia = document.querySelector('.tejia');var ul = tejia.children[0];var ol = tejia.children[1];var w = tejia.offsetWidth;var index = 0;// 设置定时器,图片定时播放var timer = setInterval(function() {index++;var transX = -index * w;// 过渡效果ul.style.transition = 'all .3s';ul.style.transform = 'translateX(' + transX + 'px)';},2000);// 让图片无缝滚动ul.addEventListener('transitionend',function() {if(index >= 2) {index = 0;ul.style.transition = 'none';var transX = -index * w;ul.style.transform = 'translateX(' + transX + 'px)';}else if(index < 0) {index = 1;ul.style.transition = 'none';var transX = -index * w;ul.style.transform = 'translateX(' + transX + 'px)';}// 让小圆点随着图片变化而变化ol.querySelector('.current').classList.remove('current');ol.children[index].classList.add('current');});// 手指滑动轮播图var startX = 0;var moveX = 0;ul.addEventListener('touchstart',function(e) {startX = e.targetTouches[0].pageX;clearInterval(timer);});// 节流阀,手指按下移动了再进行判断是否变换图片,如果没有移动就不用判断var flag = false;ul.addEventListener('touchmove',function(e) {// 手指移动距离moveX = e.targetTouches[0].pageX - startX;// 图片移动距离var transX = -index * w + moveX;ul.style.transition = 'none';ul.style.transform = 'translateX(' + transX + 'px)';// 节流阀,手指按下移动了flag = true;// 阻止屏幕默认滚动e.preventDefault();});ul.addEventListener('touchend',function(e) {if(flag) {// 防止因多次点击图片滚动速度变得越来越快flag = false;// moveX取绝对值if(Math.abs(moveX) > 50) {// 右滑,上一张if(moveX > 0) {index--;}else { //左滑,下一张index++;}var transX = -index * w;ul.style.transition = 'all .3s';ul.style.transform = 'translateX(' + transX + 'px)';}else { // 回弹效果var transX = -index * w;ul.style.transition = 'all .1s';ul.style.transform = 'translateX(' + transX + 'px)';};};// 手指离开后先清除所有定时器,再开启新的定时器clearInterval(timer);timer = setInterval(function() {index++;var transX = -index * w;// 过渡效果ul.style.transition = 'all .3s';ul.style.transform = 'translateX(' + transX + 'px)';},2000);})
})
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- Spring Boot如何处理日志?
嗨!大家好吖,今天教大家如何在 Spring Boot 项目中配置日志,你要问日志有什么用?当然是为了记录系统运行记录,方便我们排错和观察系统运行状态了,在生产实际中日志处理是一个很重要的部分。 日志的级别 常…...
2024/3/7 11:33:56 - mysql索引失效场景总结
前言 mysql的调优方面包括 表结构优化、索引优化、sql语句优化、分表分库优化等多个维度,本篇重点总结的是索引失效的场景和原因。 写博客是自己对知识梳理,目前是写给自己看,算是自己学习后的作业,也是为了养成一个良好的习惯。…...
2024/3/7 11:33:56 - Sonic一站式开源分布式集群云真机测试平台阶段性使用总结
Sonic:一站式开源分布式集群云真机测试平台,致力服务于中小企业的客户端UI测试。 通过近段时间的应用当前版本V1.3.1-Beta,总结使用体验如下: (一)具体特性汇总如下(对比为近段时间个人使用体…...
2024/3/7 11:33:54 - 2.使用开发工具实战第一个Spring Boot应用程序
1. 安装IDEA及插件 Spring Boot 开发的主要工具是Eclipse和IDEA。大部分人一开始可能会选择Eclipse,然后转让IDEA,本文重点介绍IDEA。 IDEA官网下载:IntelliJ IDEA: The Capable & Ergonomic Java IDE by JetBrainshttps://www.jetbrai…...
2024/3/7 11:33:54 - python(七)python的类、对象,和python异常处理机制
Python的异常处理机制 Python常见的异常类型 try except结构 捕获异常的顺序按照先子类后父亲类的顺序,为了避免遗漏可能出现的异常,可以在最后增力加BaseException try:n1int(input(请输入一个整数:))n2int(input(请输入一个整数:))resultn1/n2print(结果为:,re…...
2024/3/7 11:33:52 - 【长列表优化】
长列表优化由于长列表的特殊性,即使前面的列表用户不看了,前面dom也需要一直存在,优化为只要在视图窗口就可以。 js代码: <template><div id"u" :style"{padding:padding}"><slot :sliceite…...
2024/3/16 12:58:36 - JS操作cookie
JS操作cookie cookie是通过键值对的形式来存储数据的(keyvalue) js对cookie的操作直接使用 document.cookie … 添加cookie document.cookie "cookie的名字(即key)" "" "cookie中要存储的内容(即value)"; //如下其实…...
2024/3/7 11:33:50 - 【Camera专题】NB模组点亮黑屏案例分享
案例1: 型号:NB模组 异常描述:点亮黑屏 数量:1pcs 测试图片如下: 测试的时候发现一个问题,这个模组一会好一会坏,起初怀疑是有异物在连接器上造成的,后面发现清洁后问题还有。多…...
2024/3/4 10:58:14 - win11 CUDA15.2 cuDNN Tensorflow2.6.0安装
安装英伟达显卡驱动,去英伟达官网下载官方程序,即安装GeForce Experience,可以自动更新到最新版本的驱动 在anaconda power shell prompt 中输入 nvidia-smi,查看可以支持的最高版本CUDA 在tensorflow官网可以查看tensorflow, p…...
2024/3/4 10:58:13 - argocd安装
安装argocd kubectl create namespace argocd kubectl apply -n argocd -f https://raw.githubusercontent.com/argoproj/argo-cd/stable/manifests/core-install.yaml暴露argocd ui kubectl patch service -n argocd argocd-server -p {"spec": {"type"…...
2024/3/4 10:58:12 - 2021美团挑战赛Misc-奇奇怪怪的语言
前言 很久没打比赛&写文章了,本来想2022开年写,没想到还是等到了农历年后,大家,新年快乐!贝塔又回来了,希望多多更新,不咕咕咕 这个题目是2021美团第四届决赛的题目,学到挺多的…...
2024/3/4 10:58:11 - 《C语言程序设计》第4版 何钦铭、颜晖主编 课后习题答案 第3章 分支结构 习题3
习题3 P064~067 一、选择题 1~5 CBADD 6~8 CAB 二、填空题 1、32 585858 2、(x>10&&x<100)||x<0 3、x%20 first1 first0 printf("%d",x) (答案暂定) 4、onetwo 5、maxa maxc b>c maxc 三、程序设计题 习题1~5 …...
2024/3/7 11:33:49 - 个人仿制的SSM框架
个人仿制的SSM框架 1、Pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://mave…...
2024/3/7 11:33:48 - java基础教程25讲:流程控制分支语句switch用法及使用场景
语法: switch(判断语句){ case 条件1:{ //业务逻辑 break; } case 条件2:{ //业务逻辑 break; } ... case 条件n:{ //业务逻辑 break; } default:{ //业务逻辑 } } 结论:switch的使用场景 1、对具体的值进行判断 2、值的个数是固定…...
2024/3/7 11:33:47 - Python实现基础数学的解法
Python实现基础数学的解法之进位问题 例题:已知92012 是一个1920位数,请问1,9,92,93,…,92012中有多少个数首位数字为9? 解:9k首位为9 <> 9k-1首位为1 <> …...
2024/3/29 5:57:16 - 说说Java中对象的创建过程
1.类加载检查 当虚拟机遇到一条new指令时,首先去检查这个指令的参数是否能在常量池中定位到这个类的符号引用,并且检查这个符号引用代表的类是否已经被加载、解析和初始化过。如果没有,需要先执行相应的类加载过程。 2.分配内存 在类加载检查…...
2024/3/7 11:33:45 - 富文本(标签字符串显示)
当从接口中获取的数据是标签字符串时,需要将其以标签的形式显示出来 小程序中可以使用富文本 <rich-text nodes"{{接口数据}}“></rich-text> vue组件中使用v-html <div v-html"接口数据”> </div>...
2024/3/7 11:33:44 - C Primer Plus 第14章(结构和其他数据形式)
目录1. 建立结构声明2. 定义结构变量3.1 初始化结构3.2 访问结构成员3.3 结构的初始化器4. 结构数组4.1 声明结构数组4.2 标识结构数组的成员5. 嵌套结构6. 指向结构的指针6.1 声明和初始化结构指针6.2 使用指针访问成员7. 向函数传递结构的信息7.1 传递结构成员7.2 传递结构的…...
2024/3/7 11:33:43 - 功能测试-知识点和常见面试题
熟悉项目 熟悉新项目 1.根据项目的UI界面和需求文档,使用思维导图整理项目的组织结构架构图(页面级别)目的:了解页面实现的功能 2.根据整理的架构图,针对于每一个页面对于每一个功能去点击;梳理项目的核心…...
2024/3/7 11:33:42 - [云炬创业基础笔记]第一章创业环境测试5
...
2024/3/7 11:33:41
最新文章
- RecyclerView 调用 notifyItemInserted 自动滚动到底部的问题
项目中发现一个奇怪的现象 RecyclerView 加载完数据以后,调用 notifyItemInserted 方法,RecyclerView 会滑动到底部。 简化后的效果图: 因为这个 RecyclerView 的适配器有一个 FootViewHolder,所以怀疑是 FootViewHolder 的问题…...
2024/3/29 9:43:08 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - 推动制药行业数字化转型:基于超融合架构的MES一体机解决方案
随着中国对信息化重视程度的不断加深,制药行业作为国民经济的重要支柱之一,也在积极寻求通过数字化手段提升产业效率与产品质量。自党的十六大提出“以信息化带动工业化”的战略以来,制药业的这一转型探索尤为迫切。 在现代制药生产中&#…...
2024/3/29 9:10:36 - <深度学习初识>——《深度学习笔记》
深度学习笔记 一、人工智能简介 1.人工智能发展的重要时间节点 1.1人工智能孕育期 1.2人工智能诞生期 1.3人工智能第一次浪潮的发展 1.4人工智能的第一次寒冬 第一次寒冬主要面临的几个问题: 1.5人工智能第二次浪潮的发展 1.6人工智能的第二次寒冬 1.7人工智能第…...
2024/3/28 16:56:12 - 基于spring boot的体育场馆设施预约系统
摘 要 时代在飞速进步,每个行业都在努力发展现在先进技术,通过这些先进的技术来提高自己的水平和优势,体育场馆设施预约系统当然不能排除在外。体育场馆设施预约系统是在实际应用和软件工程的开发原理之上,运用java语言以及Sprin…...
2024/3/28 10:24:54 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/3/27 10:21:24 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/3/24 20:11:25 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/3/29 2:45:46 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/3/24 20:11:23 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/3/29 5:19:52 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/3/28 17:01:12 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/3/24 5:55:47 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/3/29 1:13:26 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/3/29 8:28:16 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/3/29 7:41:19 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/3/24 20:11:18 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/3/28 9:10:53 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/3/29 0:49:46 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/3/24 20:11:15 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/3/27 7:12:50 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/3/24 20:11:13 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/3/26 11:21:23 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/3/28 18:26:34 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/3/28 12:42:28 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/3/28 20:09:10 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57