<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>百度换肤</title></head><style>* {margin: 0;padding: 0;}body {background: url(img/gangtiexia.jpg) top center no-repeat;background-size: cover;}li {list-style: none;}.baidu {overflow: hidden;margin: 100px auto;background-color: #fff;width: 410px;padding-top: 3px;}.baidu li {float: left;margin: 0 1px;cursor: pointer;}.baidu img {width: 100px;}</style><body><ul class="baidu"><li><img src="./images/1.jpg" alt=""></li><li><img src= "./images/2.jpg"></li><li><img src="./images/3.jpg"alt=""></li><li><img src=".//images/4.jpg" alt=""></li></ul><script>var imgs = document.querySelector('.baidu').querySelectorAll('img')for (var i = 0; i < imgs.length; i++) {imgs[i].onclick = function() {document.body.style.backgroundImage = 'url(' + this.src + ')';}}</script></body></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><link rel="stylesheet" href="./static/css/index.css"><link rel="stylesheet" href="./static/iconfont/iconfont.css"><link rel="stylesheet" href="./static/swiper/swiper-bundle.min.css"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="./static/swiper/swiper-bundle.min.js"></script><script src="./static/js/flexable.js"></script></head><body><div id="app"><!-- 推荐区域 --><header id="top-bar"><div class="left"><i class="iconfont icon-video"></i></div><div class="center"><span>关注</span><span class="iconfont icon-shuxian"></span><span>推荐</span><span class="iconfont icon-shuxian"></span><span>附近</span></div><div class="right"><i class="iconfont icon-search"></i></div></header><!-- 视频翻页 --><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><!-- 播放按钮 --><img class="play-btn" src="./static/image/play.png" alt=""><!-- 播放区功能交互区 --><div class="interactive"><div class="avatar"><img src="./static/image/avatar.png" alt=""><i class="iconfont icon-plus add-friend" style="color:red"></i></div><div class="stars"><i class="iconfont icon-star"></i></div><div class="comment"><i class="iconfont icon-comment"></i></div><div class="share"><i class="iconfont icon-share"></i></div></div><!-- 文字区 --><div class="video-msg"><div class="word-msg"><p class="uid">@淘气的猫</p><p class="desc">《古惑仔》是最佳拍档电影公司出品的香港黑帮题材系列电影，正传电影由刘伟强执导，郑伊健、陈小春等主演</p><p class="author"><i class="iconfont icon-music1"></i>@烟台融媒创作的原创原声-烟台传媒</p></div><div class="disk-area"><div class="rotate-disk"><img src="./static/image/avatar.png" alt=""></div></div></div><video loop id="video_0" x5-video-player-fullscreen="true" webkit-playsinline="true"x-webkit-airplay="true" playsinline="true" x5-playsinlinesrc="https://sf1-scmcdn-tos.pstatp.com/goofy/ies/douyin_home_web/medias/1-1.98effe6c.mp4"poster=""></video></div><div class="swiper-slide"><!-- 播放按钮 --><img class="play-btn" src="./static/image/play.png" alt=""><!-- 播放区功能交互区 --><div class="interactive"><div class="avatar"><img src="./static/image/avatar.png" alt=""></div><div class="stars"><i class="iconfont icon-star"></i></div><div class="comment"><i class="iconfont icon-comment"></i></div><div class="share"><i class="iconfont icon-share"></i></div></div><!-- 文字区 --><div class="video-msg"><div class="word-msg"><p class="uid">@淘气的猫</p><p class="desc">《古惑仔》是最佳拍档电影公司出品的香港黑帮题材系列电影，正传电影由刘伟强执导，郑伊健、陈小春等主演</p><p class="author"><i class="iconfont icon-music1"></i>@烟台融媒创作的原创原声-烟台传媒</p></div><div class="disk-area"><div class="rotate-disk"><img src="./static/image/avatar.png" alt=""></div></div></div><video loop id="video_1" x5-video-player-fullscreen="true" webkit-playsinline="true"x-webkit-airplay="true" playsinline="true" x5-playsinlinesrc="https://sf1-scmcdn-tos.pstatp.com/goofy/ies/douyin_home_web/medias/1-2.a8ef0fea.mp4"poster=""></video></div><div class="swiper-slide"><!-- 播放按钮 --><img class="play-btn" src="./static/image/play.png" alt=""><!-- 播放区功能交互区 --><div class="interactive"><div class="avatar"><img src="./static/image/avatar.png" alt=""></div><div class="stars"><i class="iconfont icon-star"></i></div><div class="comment"><i class="iconfont icon-comment"></i></div><div class="share"><i class="iconfont icon-share"></i></div></div><!-- 文字区 --><div class="video-msg"><div class="word-msg"><p class="uid">@淘气的猫</p><p class="desc">《古惑仔》是最佳拍档电影公司出品的香港黑帮题材系列电影，正传电影由刘伟强执导，郑伊健、陈小春等主演</p><p class="author"><i class="iconfont icon-music1"></i>@烟台融媒创作的原创原声-烟台传媒</p></div><div class="disk-area"><div class="rotate-disk"><img src="./static/image/avatar.png" alt=""></div></div></div><video loop id="video_2" x5-video-player-fullscreen="true" webkit-playsinline="true"x-webkit-airplay="true" playsinline="true" x5-playsinlinesrc="https://sf1-scmcdn-tos.pstatp.com/goofy/ies/douyin_home_web/medias/1-4.6d59e328.mp4"poster=""></video></div></div></div><!-- 底部导航栏 --><footer id="tab-bar"><div class="item active"><span>首页</span></div><div class="item"><span>朋友</span></div><div class="item"><div class="plus"><i class="iconfont icon-plus"></i></div></div><div class="item"><span>消息</span></div><div class="item"><span>我</span></div></footer></div><script src="./index.js"></script>
</body>
<script></script></html>
* {padding: 0;margin: 0;
}html,
body,
#app {width: 100%;height: 100%;
}body {overflow: hidden;background-color: #111;padding: 0;margin: 0;overflow: hidden;
}#top-bar {height: 1.2rem;width: 100%;font-weight: 200;color: #fff;font-size: 0.533333rem;display: flex;position: fixed;left: 0;line-height: 1.2rem;top: 0.533333rem;justify-content: space-around;z-index: 99999;
}#top-bar i {font-size: 25px;
}/* 交互功能区 点赞 评论 分享 */
.interactive {width: 1.333333rem;position: absolute;right: 0;top: 30%;display: flex;flex-direction: column;
}.interactive div {margin: 0.266667rem -0.266667rem;color: #fee;
}.interactive .avatar {height: 1.333333rem;width: 1.333333rem;border-radius: 50%;border: 2px solid #fff;overflow: hidden;
}.interactive .avatar img {height: 1.333333rem;width: 1.333333rem;
}.interactive div i {font-size: 1.333333rem;
}.interactive div .add-friend {position: relative;top: -50px;left: 10px;font-size: 10px;
}.video-msg {height: 3.333333rem;width: 100%;/* border: 2px solid #fff; */position: absolute;left: 0;bottom: 1.2rem;overflow: hidden;display: flex;
}.video-msg .word-msg {padding-left: 10px;color: #fee;/* border: 1px solid pink; */width: 80%;overflow: hidden;
}.video-msg .word-msg p {padding: 3px 0;
}.video-msg .word-msg .uid {font-size: 16px;
}.video-msg .word-msg .desc {font-size: 14px;
}.video-msg .word-msg .author {font-size: 12px;
}.video-msg .disk-area {width: 20%;position: relative;/* border: 1px solid orange; */
}@keyframes disk-rotate {from {transform: rotate(0deg);}to {transform: rotate(359deg);}
}.video-msg .disk-area .rotate-disk {height: 40px;width: 40px;border: 15px solid #444;border-radius: 50%;position: absolute;right: 4px;bottom: 8px;overflow: hidden;animation: disk-rotate 10s linear infinite;
}.video-msg .disk-area .rotate-disk img {height: 40px;width: 40px;
}#tab-bar {height: 1.2rem;width: 100%;background-color: #000;font-weight: 200;color: #fff;font-size: 0.533333rem;display: flex;position: fixed;left: 0;line-height: 1.2rem;bottom: 0;justify-content: space-around;z-index: 99999;
}#tab-bar .item .plus {position: relative;top: 8px;line-height: 30px;height: 30px;width: 40px;border: 2px solid #fee;
}#tab-bar .item .plus i {padding-left: 10px;
}#tab-bar .item.active {border-bottom: 0.026667rem solid #fff;
}.swiper-container {height: 100%;
}/* 视频翻页 */
.swiper-slide {/* 一定要设置溢出隐藏，不然会显示下一页的动画 */overflow: hidden;
}.swiper-slide video {width: 100%;height: 100%;outline: none;
}.play-btn {display: block;
}/* 播放按钮 */
.play-btn {width: 100px;height: 100px;position: absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -75px;opacity: 0.5;z-index: 50;display: none;
}

@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1617610061656'); /* IE9 */src: url('iconfont.eot?t=1617610061656#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),url('iconfont.woff?t=1617610061656') format('woff'),url('iconfont.ttf?t=1617610061656') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('iconfont.svg?t=1617610061656#iconfont') format('svg'); /* iOS 4.1- */
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-video:before {content: "\e65f";
}.icon-search:before {content: "\e608";
}.icon-shuxian:before {content: "\e63a";
}.icon-music3:before {content: "\e63b";
}.icon-star:before {content: "\e60c";
}.icon-music2:before {content: "\e77e";
}.icon-plus:before {content: "\e721";
}.icon-share:before {content: "\e637";
}.icon-music1:before {content: "\e61a";
}.icon-comment:before {content: "\e6f5";
}
@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, 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') format('woff');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(-1 * var(--swiper-navigation-size)/ 2);z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}

百度换肤 querySelector方法 抖音播放相关推荐

  1. 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏...

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  2. 排他思想 -- 百度换肤效果案例 以及 点击某按钮只是该按钮变色

    排他思想 – 百度换肤效果案例 以及 点击某按钮只是该按钮变色 1.百度换肤 <!DOCTYPE html> <html lang="en"> <he ...

  3. python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)...

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  4. 百度换肤JavaScript功能

    百度换肤JavaScript功能 CSS-code: <style type="text/css">*{margin: 0;padding: 0;list-style: ...

  5. 堪比病毒营销的新思路：换个姿势玩抖音！

    有时候,粗鲁一点,大力出奇迹.这段时间下班回家撸完自行车后实在没事干,就迷上了刷抖音,现在,让我来试着总结一下这几个月的研究成果,看看当SEO优化去研究抖音推广,会有什么样的结论. 年前还认为某些领域 ...

  6. 【杂谈】GitHub上有哪些好用的爬虫(从Google百度，腾讯视频抖音，豆瓣知乎到不可描述)

    在开发实际项目的时候,你经常没有足够多的数据,需要自己去想办法获取,这个时候常常需要用到爬虫.然而找来找去,很可能找了很久都找不到既免费又好用的爬虫,今天就从好的爬虫开始说起,这很可能是项目成功的开始 ...

  7. 仿造百度换肤功能的实现

    换肤功能的应用很广,不管是搜索界面还是普通的管理界面等等,都可以进行设计并且应用换肤功能,起到更好的用户体验. 今天仿造百度的换肤功能,实现了基本的换肤功能,接下来将会为大家介绍如何实现.在设计界面的 ...

  8. 浏览器换肤功能 项目案例 百度换肤

    大家好 我是攻城狮JiRo, 今天给大家分享一下浏览器换肤的功能 需求:爱美之心,人皆有之,随着人们物质生活的提高,需求也不断提高,同样,作为开发者,我们当然要心系客户,那么今天的案例就是实现换肤功能 ...

  9. 微信小程序（实现抖音播放效果）上下滑动全屏播放效果

    最近项目要做一个类似于抖音的一个视频播放 需要小程序完成 在再次确定了需要这个需求的情况下就开始了(其实因为不是说这个功能不好做主要是但心做出来肯定不流畅 卡顿什么的 优化不好优化然后费了好大的劲优化 ...

最新文章

  1. echo 和 var_dump
  2. python学习笔记 - StringIO以及BytesIO
  3. Java开发入坑,Java开发的自学路线 入坑（和大家来闲聊一下java的学习路线）
  4. 【Qt】QModbusDevice类
  5. java单链表查询功能,Java 实现简答的单链表的功能
  6. 怎样编写测试类测试分支_编写干净的测试–从配置开始
  7. AI如何用特征、权重和避免过拟合等技术来分辨冬瓜和西瓜？
  8. Mysql编写定时任务事件
  9. Mysql讲解数据库并发控制知识
  10. THINKPHP获取路径
  11. DEV-c++中sort的用法
  12. CCNA考试题库中英文翻译版及答案7
  13. 初始单片机 ----自学笔记
  14. 偏差-方差分解（转）
  15. ZenCart facebook 登陆
  16. 拼多多增长黑客模式实战
  17. 深度学习的四种激活函数
  18. MyBatis中如何使用insert标签呢？
  19. 校招基本告一段落，总结一下
  20. 个人写的JSP个人日记本分享学习经验

热门文章

  1. 智能合约_AElf智能合约开发-第一个AElf智能合约
  2. 正则表达式 - 匹配 IPV4地址
  3. 我从负债十几万到财富自由
  4. 找出一个正数的比它大的最小的质数
  5. TCL电子2018年首三季度电视机销售量逾2,112万台超预期
  6. 解决Python库在迁移电脑后用不了
  7. 转载：Tegra TK1刷机 版本R21.4
  8. HTML导航条的功能描述,ps制作网页导航条 忘了写文字描述就发了，步骤为：
  9. 十大反直觉的数学结论
  10. Python中的scatter