-
简单的HTML网页图片轮播自动切换!附源码！ 效果图可以看本站，我这里就上传了一张。 html部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1,maximum-scale=1,user-scalable=no" /> <!--引入CSS代码--> <link rel="stylesheet" type="text/css" href="./css/index.css"/> <!--引入Js代码--> <script src="./js/index.js"></script> <title>Js实现轮播图</title> </head> <body> <div class="lunbo"> <div class="content"> <ul id="item"> <li class="item"> <a href="#"><img src="img/pic1.jpg" ></a> </li> <li class="item"> <a href="#"><img src="img/pic2.jpg" ></a> </li> <li class="item"> <a href="#"><img src="img/pic3.jpg" ></a> </li> <li class="item"> <a href="#"><img src="img/pic4.jpg" ></a> </li> <li class="item"> <a href="#"><img src="img/pic5.jpg" ></a> </li> </ul> <div id="btn-left"><</div> <div id="btn-right">></div> <ul id="circle"> <li class="circle"></li> <li class="circle"></li> <li class="circle"></li> <li class="circle"></li> <li class="circle"></li> </ul> </div> </div> </body> </html> </html> CSS部分: *{ margin: 0; padding: 0; } a{ list-style: none; } li{ list-style: none; } .lunbo{ width: 100%; } .content{ width: 800px; height: 300px; margin: 20px auto; position: relative; } #item{ width: 100%; height: 100%; } .item{ position: absolute; opacity: 0; transition: all 1s; } .item.active{ opacity:1; } img{ width: 100%; } #btn-left{ width: 30px; height: 69px; font-size: 30px; color: white; background-color:rgba(0,0,0,0.4); line-height: 69px; padding-left:5px; z-index: 10;/*始终显示在图片的上层*/ position: absolute; left: 0; top: 50%; transform: translateY(-60%);/*使按钮向上偏移居中对齐*/ cursor: pointer; opacity: 0;/*平时隐藏*/ } .lunbo:hover #btn-left{ /*鼠标滑入，显示图标*/ opacity: 1; } #btn-right{ width: 26px; height: 69px; font-size: 30px; color: white; background-color:rgba(0,0,0,0.4); line-height: 69px; padding-left: 5px; z-index: 10; position: absolute; right: 0; top: 50%; cursor: pointer; opacity: 0; transform: translateY(-60%); } .lunbo:hover #btn-right{ opacity: 1; } #circle{ height: 20px; display: flex; position: absolute; bottom: 35px; right: 25px; } .circle{ width: 10px; height: 10px; border-radius: 10px; border: 2px solid white; background: rgba(0,0,0,0.4); cursor: pointer; margin: 5px; } .white{ background-color: #FFFFFF; } js部分: window.onload=function(){ var items=document.getElementsByClassName("item"); var circles=document.getElementsByClassName("circle"); var leftBtn=document.getElementById("btn-left"); var rightBtn=document.getElementById("btn-right"); var content=document.querySelector('.content'); var index=0; var timer=null; //清除class var clearclass=function(){ for(let i=0;i<items.length;i++){ items[i].className="item"; circles[i].className="circle"; circles[i].setAttribute("num",i); } } /*只显示一个class*/ function move(){ clearclass(); items[index].className="item active"; circles[index].className="circle white"; } //点击右边按钮切换下一张图片 rightBtn.onclick=function(){ if(index<items.length-1){ index++; } else{ index=0; } move(); } //点击左边按钮切换上一张图片 leftBtn.onclick=function(){ if(index<items.length){ index--; } else{ index=items.length-1; } move(); } //开始定时器，点击右边按钮，实现轮播 timer=setInterval(function(){ rightBtn.onclick(); },1500) //点击圆点时，跳转到对应图片 for(var i=0;i<circles.length;i++){ circles[i].addEventListener("click",function(){ var point_index=this.getAttribute("num"); index=point_index; move(); }) } //鼠标移入清除定时器，并开启一个三秒的定时器，使慢慢转动 content.onmouseover=function(){ clearInterval(timer); timer=setInterval(function(){ rightBtn.onclick(); },3000) } //鼠标移出又开启定时器 content.onmouseleave=function(){ clearInterval(timer); timer=setInterval(function(){ rightBtn.onclick(); },1500) } }- 2024年-5月-22日
- 390 阅读
- 0 评论
-
-
支付宝在线生成自定义支付收款二维码源码 支付宝在线生成自定义收款二维码是一款非常方便的收款收款工具，使用这个工具可以快速生成支付宝自定义收款金额和备注二维码，不限制生成二维码次数。- 2024年-4月-29日
- 266 阅读
- 0 评论
-
-
给博客添加一个文字广告位代码 效果样式如上图，给博客添加一个自适应文字广告位代码，把下方代码粘贴在需要展示的地方即可使用。 <style type="text/css"> .tp-ad-text1 {width:100%;padding-top:6px;box-sizing:border-box;overflow: hidden;background: rgba(255,255,255,.2);} .tp-ad-text1 a {color:#7fba00;font-size:14px;line-height:38px;text-align:center;border:1px dashed rgba(0,0,0,.2);padding:0 3px;box-sizing:border-box;float:left;width:11.5%;height:38px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 0.5% 6px;text-decoration:none;transition:all .6s;} .tp-ad-text1 a:hover {font-weight: bold;color:#fff!important;background:#7fba00;transition: all .6s;} .tp-ad-text1 a:nth-child(2n) {color:#f74e1e;} .tp-ad-text1 a:nth-child(2n):hover {background:#f74e1e;border-color: #f74e1e;} .tp-ad-text1 a:nth-child(3n) {color:#00a4ef;} .tp-ad-text1 a:nth-child(3n):hover {background:#00a4ef;border-color: #00a4ef;} .tp-ad-text1 a:nth-child(4n) {color:#0517c2;} .tp-ad-text1 a:nth-child(4n):hover {background:#0517c2;border-color: #0517c2;} .tp-ad-text1 a:nth-child(5n) {color:#601165;} .tp-ad-text1 a:nth-child(5n):hover {background:#601165;border-color: #601165;} .tp-ad-text1 a:nth-child(6n) {color:#ffb900;} .tp-ad-text1 a:nth-child(6n):hover {background:#ffb900;border-color: #ffb900;} .tp-ad-text1 a:nth-child(7n) {color:#0fc317;} .tp-ad-text1 a:nth-child(7n):hover {background:#0fc317;border-color: #0fc317;} .tp-ad-text1 a:nth-child(8n) {color:#601165;} .tp-ad-text1 a:nth-child(8n):hover {background:#601165;border-color: #601165;} .tp-ad-text1 a:nth-child(9n) {color:#fba78f;} .tp-ad-text1 a:nth-child(9n):hover {background:#fba78f;border-color: #fba78f;} .tp-ad-text1 a:nth-child(10n) {color:#13cf8f;} .tp-ad-text1 a:nth-child(10n):hover {background:#13cf8f;border-color: #13cf8f;} .tp-ad-text1 a:nth-child(11n) {color:#f74e1e;} .tp-ad-text1 a:nth-child(11n):hover {background:#f74e1e;border-color: #f74e1e;} .tp-ad-text1 a:nth-child(12n) {color:#ffb900;} .tp-ad-text1 a:nth-child(12n):hover {background:#ffb900;border-color: #ffb900;} .tp-ad-text1 a:nth-child(13n) {color:#fba78f;} .tp-ad-text1 a:nth-child(13n):hover {background:#fba78f;border-color: #fba78f;} .tp-ad-text1 a:nth-child(14n) {color:#f74e1e;} .tp-ad-text1 a:nth-child(14n):hover {background:#f74e1e;border-color: #f74e1e;} .tp-ad-text1 a:nth-child(15n) {color:#7fba00;} .tp-ad-text1 a:nth-child(15n):hover {background:#7fba00;border-color: #7fba00;} .tp-ad-text1 a:nth-child(16n) {color:#0fc317;} .tp-ad-text1 a:nth-child(16n):hover {background:#0fc317;border-color: #0fc317;} .tp-ad-text1 a:nth-child(17n) {color:#0517c2;} .tp-ad-text1 a:nth-child(17n):hover {background:#0517c2;border-color: #0517c2;} .tp-ad-text1 a:nth-child(18n) {color:#13cf8f;} .tp-ad-text1 a:nth-child(18n):hover {background:#13cf8f;border-color: #13cf8f;} .tp-ad-text1 a:nth-child(19n) {color:#ffb900;} .tp-ad-text1 a:nth-child(19n):hover {background:#ffb900;border-color: #ffb900;} .tp-ad-text1 a:nth-child(20n) {color:#f74e1e;} .tp-ad-text1 a:nth-child(20n):hover {background:#f74e1e;border-color: #f74e1e;} @media screen and (max-width: 1198px){ .tp-ad-text1 a{ width: 24%; } } </style> <div class="tp-ad-text1"> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> <a href="http://blog.qqzzz.cn" title="双虹网" target="_blank">双虹网</a> </div>- 2024年-4月-16日
- 261 阅读
- 0 评论
-
网站URL在线批量提取工具 网站URL批量提取工具可用性较大，可以一键生成网站页面链接，支持在线导出链接为txt文本和一键复制功能，导出的链接可用来提交到百度收录或者其他搜索引擎收录。- 2024年-4月-16日
- 204 阅读
- 0 评论
-
站长街|互站网交易平台导航源码 源码纯html单页，互站网最新引导分发页。 新建index.html把下方源码导入进 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>站长街 - 免费素材网为你提供站长资讯,软件下载,PSD素材,特效代码,字体下载,特效代码下载,打造完美站长资源平台!</title> <meta name="keywords" content="素材网,站长资讯,站长资源平台,软件下载,PSD素材,特效代码,字体下载"> <meta name="description" content="站长街为国内体验最好的站长资源平台,提供免费矢量素材,站长资讯,软件下载,网页模板,JS特效代码,PSD网页素材,字体下载,整站程序源代码,FLASH整站程序等,让任何一个站长都能轻松找到自己想要素材。"> <base target="_blank"> <link rel="stylesheet" href="img/temp.css" type="text/css"> <script type="text/javascript" language="javascript"> $(function(){ $('#taobao_ico').poshytip(); $('#hotel_ico').poshytip(); $('#travel_ico').poshytip(); $('#youxia_ico').poshytip(); }); function _load(){ var _bodyHeight =parseInt(document.documentElement.clientHeight); var _height = parseInt(document.getElementById("footer").offsetHeight); var _centerHeight = parseInt(document.getElementById("center").offsetHeight); var _contentHeight = _bodyHeight - _centerHeight; if(_contentHeight>_height){ document.getElementById('footer').style.height=_contentHeight-27+'px'; } } $(window).resize(function(){ _load(); }); </script> </head> <body onload="_load()"> <div id="center"> <div class="ico"> <label> <a href="http://www.huzhan.com" ><img id="index_ico" title="" src="img/huzhan_1.png" width="53" height="54"></a> <a href="http://www.huzhan.com">互站网首页</a> </label> <label><a href="http://www.huzhan.com/code/"><img id="code_ico" title="" src="img/huzhan_2.png" width="53" height="54"></a> <a href="http://www.huzhan.com/code/">源码-交易</a> </label> <label> <a href="http://web.huzhan.com/"><img id="web_ico" title="" src="img/huzhan_3.png" width="53" height="54"></a> <a href="http://web.huzhan.com/">网站-交易</a> </label> <label> <a href="http://domain.huzhan.com/"><img id="domain_ico" title="" src="img/huzhan_4.png" width="53" height="54"></a> <a href="http://domain.huzhan.com/">域名-交易</a> </label> <label> <a href="http://www.huzhan.com/serve/"><img id="serve_ico" title="" src="img/huzhan_5.png" width="53" height="54"></a> <a href="http://www.huzhan.com/serve/">服务-市场</a> </label> <label> <a href="http://task.huzhan.com/"><img id="task_ico" title="" src="img/huzhan_6.png" width="53" height="54"></a> <a href="http://task.huzhan.com/">任务-需求</a> </label> </div> <div class="quckLink">友情链接： <a href="about/about.html">关于我们</a><label>|</label> <a href="javascript:;">联系我们</a><label>|</label> <a href="javascript:;">网站地址</a><label>|</label> <a href="javascript:;">广告合作</a> </div> </div> <div style="height: 117px;" id="footer"> <p>Copyright © 2009-2017, www.zzjie.com. All Rights Reserved. <br> 站长街 版权所有 <a href="https://beian.miit.gov.cn" style="color:#b8dde9" target="_blank" rel="nofollow">皖ICP备19017101号-3</a> </p> </div> </body> </html> css部分: body{ font-family: 微软雅黑,Arial, Helvetica, sans-serif; font-size: 12px; margin:0 auto; padding:0; background-color:#daf7ff; line-height:14px; } a{ color:#4dabc7; text-decoration:none;} a:hover{ text-decoration:underline;} #center{ background:url(//img.alicdn.com/imgextra/i2/462055445/TB2tgtxXCvHfKJjSZFPXXbttpXa-462055445.png) no-repeat; width:960px; height: 500px; margin:0 auto;} #center .ico{ padding-top: 340px; text-align:center; width:960px;} #center .ico label{ padding-right:10px; text-align:center; width:65px; display:inline-block;} #center .ico label img{ padding-bottom:5px;} #center .quckLink{ color:#ff9900; width:960px;text-align:center; height:16px; padding-top: 60px;} #center .quckLink label{ margin:0 10px;color:#4dabc7; } #footer{ background:url(../img/footer_bg.gif) repeat-x; height:80px; color:#b8dde9; padding-top:27px; text-align:center; background-color:#4dabc7;} #footer a{ color:#b8dde9;} #footer p{ margin:0; padding:5px 0px; line-height:18px;} #footer span{ padding:0 8px;} img{ border:0;}- 2024年-4月-15日
- 230 阅读
- 0 评论
-
好看的程序发布页导航html源码第二版 页面标题自带跳动特效，css直接集成到了html页面，单页可做导航网/引导单页/程序分发页等，直接新建index.html把下面源码复制粘贴进去即可。- 2024年-4月-12日
- 263 阅读
- 0 评论
-
程序发布页导航html源码 源码介绍： 这套源码样板很久之前就有了，刚好最近本站缺少一个引导页，于是网上扒拉一个，把css都集成到了html页面。 源码纯HTML单页，可做导航网/程序分发页/引导单页等，直接新建index.html页面 把下面源码复制进去自行修改即可。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta content="width=device-width, initial-scale=1.0, user-scalable=0" name="viewport"> <title>引导页-blog.qqzzz.cn</title> <meta name="keywords" content=""> <meta name="description" content=""> <link rel="icon" type="image/x-icon" href=".//blog.qqzzz.cn/favicon.ico"> <style type="text/css"> *{padding:0;margin:0} body{background-color:#00c250;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif} #main{margin:10px auto;display:flex;justify-content:center;flex-direction:column;align-items:center} .field{width:500px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;color:#6c757d;font-size:16px;padding:15px;margin:5px auto;border-radius:6px} .field.desc ul>li{text-align:left;font-size:14px} @media (max-width:500px){#main{padding:0 5px} .field{width:100%;padding:15px 0} .field.desc ul{margin:0 15px} .field.desc ul>li{text-align:left} } ul>li{margin-bottom:10px;list-style-type:none;text-align:center} ul>li.text{font-size:12px;clear:both;width:100%} .field .title{margin-bottom:15px;font-weight:700;color:#343a40} a,a:active,a:focus,a:hover,a:visited{color:inherit;text-decoration:none} .brand{display:flex;align-items:center;justify-content:flex-start;text-align:center;color:#000;font-size:30px;font-weight:200;padding:20px;cursor:pointer} .brand span{color:#fff;font-weight:600} .brand span.flag{color:#00c250;background:#fff;border-radius:6px;font-size:20px;font-weight:700;display:inline-block;padding:0 5px;margin-left:5px} .enter-maomi{width:75%;text-align:center;line-height:40px;border:1px solid #00c250;border-radius:4px;margin-bottom:20px;margin-top:10px} .enter-icon{width:32px;height:41px;float:left;margin-right:5px;background-color:#00c250} .enter-link a{display:block} .icon{width:20px;height:20px;background-position:center;background-size:contain;background-repeat:no-repeat;display:inline-block} .icon_hand{width:27px;height:27px;vertical-align:middle;background-image:url(data:image/png;base64,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);padding-top:12px} .c_black{color:#333;line-height:30px;font-size:12px} .c_blue{color:#00c250} .c_red{color:#f00} .c_link{font-size:14px;line-height:30px} .fri_link{overflow:hidden;width:80%} .fri_link li{float:left;display:block;font-size:.875rem;width:33.33333333%} .icon_ios_shared{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuGAAALhgBKqonIAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAHsSURBVGiB7ZvLasJAFEBvnsYXhFoKXaRLi/QHWrppl/2mrvtL3dZlf0AElxXsRiVgo+bdTVJEUmUmyYTc3ANCTGbuneMMmTEPKY5jaBJy1Q0QTeOEVZbCN6+z3Akt05A3bjhVZGmxcrznvPG+3oZM5YX2cCpr7/zhyvGeBl39Q2R+AIHClmmoqWy678cNHi3TYBpleREinMhODmUBANwg0jZuOLFMQ9gPX3qiLNmWKvvptr3zhxs3nIqSLjVJlqzZ1mZXPb1ntrW/M6BI6dIS/Cfbbymjub33+i3lrgrpUoKfkY0AAOb2PqhCuvDAydRzUjYlS1qRpcVxuSIpXHhu7yNFlr7T7xmy8cEnlR6ZbW026OrjIhYjpyhlDkwWFeMwiq+zevaY5PhtGW05prRJf+V4TwAA9s4/U1IsjfvzQMLYIWHskDB2WOdhlkucEmNsITlq3cMdXXFY69RaeOuFHdY63EvLi472eer4esu3pDwXN4l9zxUccgivt/4Db90C4nLfLqn1kOaBhLFDwtghYeyQMHZIGDskjB0Sxg4JY4eEsSP0obAE3uvVhdC4HiZh7JAwdhonzD0tXXb19yIbwsLS8bjrcgsvHe+FO2uFMA3plir7h8861xGmHnaDSE82a/uyk0QvaiGnccK/XaTidYL+GAMAAAAASUVORK5CYII=)} .icon_android_share{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuGAAALhgBKqonIAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAFYSURBVGiB7doxSgNBFMbxt5PZrGFWCMHCgAg2Fp7CUj1DbmBhZ2Ntk87CC3gIsfQWgo0gFoJRAm4YN7uZsTDKGtLOG3j7/cpt3v4TAl+RxHtPbaJivwA3BEuHYOkQLB2CpUOwdAiWrnXBmuPI7sUjDY0Zfc7nV0VVDbRSvp9ldxNrT54v9zle4Q/LN7yT53tv1t4UVTUgIqqdSybWHm/1ercc95tYgr8Wi+vauWT1+bQsjzjuN0X9Da/7EEJjCdZK3a97nqfpB8f9Jpbg19ls3M+yh+YzrZTf7HbPOO7/u8t1aFqWB9vGnNfOHRIRbXQ6py9F8cR1/xdbMNHPN01EY86bq1o3PBAsHYJDGRozytP0nYi8VsrFmJVE2NJhYEsvYUszwJYOBVs6EgwP6RAsHbZ0CNjSS9jSDLClQ8CWpnhbOsG/aYVDsHQIlg7B0iFYOgRLh2DpvgEr5a2EBqrivQAAAABJRU5ErkJggg==)} </style> </head> <body> <div id="main"> <div class="brand" id="logo"> <span>双虹云 </span><span class="flag">永久发布页</span> </div> <div class="field"> <div class="enter-maomi"> <div class="enter-icon"> <div class="icon icon_hand"></div> </div> <div class="enter-link"> <a href="http://blog.qqzzz.cn"><span class="c_blue">点击进入→双虹云1</span> </a> </div> </div> <div class="enter-maomi"> <div class="enter-icon"> <div class="icon icon_hand"></div> </div> <div class="enter-link"> <a href="http://blog.qqzzz.cn"><span class="c_blue">点击进入→双虹云官网2</span> </a> </div> </div> <div class="enter-maomi"> <div class="enter-icon"> <div class="icon icon_hand"></div> </div> <div class="enter-link"> <a href="http://blog.qqzzz.cn"><span class="c_blue">点击进入→双虹云官网3</span> </a> </div> </div> <div class="enter-maomi"> <div class="enter-icon"> <div class="icon icon_hand"></div> </div> <div class="enter-link"> <a href="http://blog.qqzzz.cn"><span class="c_red">点击进入→双虹云副业网</span> </a> </div> </div> <div class="enter-maomi"> <div class="enter-icon"> <div class="icon icon_hand"></div> </div> <div class="enter-link"> <a href="http://blog.qqzzz.cn"><span class="c_red">全网最低价拿货商城</span> </a> </div> </div> <p class="c_blue c_link">永久发布地址1：<a href="http://blog.qqzzz.cn" target="_blank">http://blog.qqzzz.cn</a></p> <!--p class="c_blue c_link">永久发布地址2：<a href="http://blog.qqzzz.cn" target="_blank">http://blog.qqzzz.cn</a></p--> <p style="text-decoration: line-through;">即将失效：<a target="_blank">https://www.qq.com</a></p> <p style="text-decoration: line-through;">即将失效：<a target="_blank">https://www.qq.cn</a></p> <!--p style="text-decoration: line-through;">即将失效：<a target="_blank">http://blog.qqzzz.cn</a></p> <p style="text-decoration: line-through;">已经失效：<a target="_blank">http://blog.qqzzz.cn</a></p--> </div> <div class="field "> <h4 class="title">✈ 记住永久地址</h4> <ul> <li><a href="http://blog.qqzzz.cn" target="_blank">http://blog.qqzzz.cn</a></li> </ul> </div> <div class="field desc"> <h4 class="title">✐ 溫馨提示</h4> <ul> <li>* 推荐使用谷歌(Chrome)浏览器访问本站，谷歌浏览器速度更快，iPhone建议使用手机自带Safria浏览器访问。</li> <li>* 如果您记不住本站域名，请收藏该页地址，收藏并分享给好朋友。</li> <p class="c_black">1、使用电脑的用户，请按键盘上的CTRL+D进行收藏</p> <p class="c_black">2、苹果手机用户在浏览器点击<span class="icon icon_ios_shared small-img"></span>，然后添加到个人收藏或主屏幕。</p> <p class="c_black">3、安卓手机用户点击<span class="icon icon_android_share small-img"></span>，或者打开浏览器设置，添加到书签或主屏幕。</p> </ul> </div> </div> </body> </html>- 2024年-4月-8日
- 349 阅读
- 0 评论
-
-
简约404报错html单页源码 页面很是简洁，挺好看的，新建404.html页面把下面源码复制粘贴进去，可以放到网站根目录或者宝塔面板404错误页面。- 2024年-3月-28日
- 222 阅读
- 0 评论
-
随机小姐姐视频单页源码 ①:原接口已废，现已修复 ②:自适应pc和手机端 ③:优化静态文件 ④:接口来自 Qoc Api ⑤:如有自己的短视频接口可自行替换- 2024年-3月-27日
- 326 阅读
- 0 评论
-
-
html简约大气的公告模板源码 自建html单页，把下面代码粘贴进去自行修改即可。 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <section class="diy-editor"> <section style="margin: 0px auto; text-align: center; background: #548dd4; color: #ffffff;"> <section style="padding: 20px;background-position: bottom; "> <section style="display: flex;justify-content:space-between;align-items: center;"> <section class="diybrush" data-brushtype="text" style="font-size: 16px;letter-spacing: 1.5px;color: #ffff; "> 放假通知 </section> </section> <section class="assistant" style="box-sizing:border-box; width: 20%; background-color: #ffffff; height: 5px; margin-right: auto; overflow: hidden;"></section> <section class="assistant" style="box-sizing:border-box; width: 100%; background-color: #ffffff; height: 1px; margin: -3px 0px 20px; overflow: hidden;"></section> <section data-autoskip="1" class="diybrush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#ffff;background: transparent;"> <p> 关于2021年劳动节放假安排的通知根据国务院办公厅通知精神。现将2021年劳动节放假安排通知如下： </p> </section> </section> </section> </section> <!----------------> <!----------------> <br><br><br> <!----------------> <!----------------> <section class="diy-editor"> <section style="border: 0px; margin: 2px auto; box-sizing: border-box; padding: 0px;"> <section style=" height: 6px; box-sizing: border-box; color: inherit;"> <section style=" height: 100%; width: 6px; float: left; border-top: 2px solid rgb(18, 150, 219); border-right-color: rgb(18, 150, 219); border-bottom-color: rgb(18, 150, 219); border-left: 2px solid rgb(18, 150, 219); box-sizing: border-box; color: inherit;"></section> <section style=" height: 100%; width: 6px; float: right; border-top: 2px solid rgb(18, 150, 219); border-right: 2px solid rgb(18, 150, 219); border-bottom-color: rgb(18, 150, 219); border-left-color: rgb(18, 150, 219); box-sizing: border-box; color: inherit;"></section> <section style="display: inline-block; color: rgb(18, 150, 219); clear: both; box-sizing: border-box; border-color: rgb(18, 150, 219);"></section> </section> <section style="margin: -1px 4px; padding: 0.8em; border: 1px solid rgb(18, 150, 219); box-sizing: border-box; box-shadow: rgb(117, 117, 117) 0px 0px 4px; color: inherit;"> <section style="color: rgb(51, 51, 51); font-size: 1em; line-height: 1.4; word-break: break-all; word-wrap: break-word;"> <p> 你有时会站在自己的那座孤独山丘，以为风尘滚滚也会比别人高瞻远瞩。 </p> </section> </section> <section style=" height: 6px; box-sizing: border-box; color: inherit;"> <section style=" height: 100%; width: 6px; float: left; border-bottom: 2px solid rgb(18, 150, 219); border-top-color: rgb(18, 150, 219); border-right-color: rgb(18, 150, 219); border-left: 2px solid rgb(18, 150, 219); box-sizing: border-box; color: inherit;"></section> <section style=" height: 100%; width: 6px; float: right; border-bottom: 2px solid rgb(18, 150, 219); border-top-color: rgb(18, 150, 219); border-right: 2px solid rgb(18, 150, 219); border-left-color: rgb(18, 150, 219); box-sizing: border-box; color: inherit;"></section> </section> </section> </section> <!----------------> <!----------------> <br><br><br> <!----------------> <!----------------> <section class="diy-editor"> <fieldset style="margin: 2em 1em 1em; padding: 0px; border: 0px rgb(18, 150, 219); max-width: 100%; box-sizing: border-box; color: rgb(62, 62, 62); font-size: 16px; line-height: 25px; word-wrap: break-word !important;"> <section style="max-width: 100%; word-wrap: break-word !important; box-sizing: border-box; line-height: 1.4; margin-left: -0.5em;"> <section style="max-width: 100%; box-sizing: border-box; border-color: rgb(0, 0, 0); padding: 3px 8px; border-radius: 4px; color: rgb(255, 255, 255); font-size: 1em; display: inline-block; transform: rotate(-10deg); transform-origin: 0% 100% 0px; background-color: rgb(18, 150, 219); word-wrap: break-word !important;"> <span style="color:#FFFFFF">微信编辑器</span> </section> </section> <section class="diybrush" style="max-width: 100%; box-sizing: border-box; padding: 22px 16px 16px; border: 1px solid rgb(18, 150, 219); color: rgb(0, 0, 0); font-size: 14px; margin-top: -24px;"> <p style="line-height:24px;"> <span style="color:#595959; font-size:14px">微信编辑器提供非常好用的微信图文编辑器。可以随心所欲的变换颜色调整格式，更有神奇的自动配色方案。</span> </p> </section> </fieldset> </section> <!----------------> <!----------------> <br><br><br> <!----------------> <!----------------> <section class="diy-editor"> <fieldset style="margin: 0px; padding: 5px; border: 1px solid rgb(204, 204, 204); max-width: 100%; color: rgb(62, 62, 62); line-height: 24px; text-align: justify; box-shadow: rgb(165, 165, 165) 5px 5px 2px; background-color: rgb(250, 250, 250);"> <legend style="margin: 0px; padding: 0px; text-align: left;margin-left: 20px;width: auto;"> <strong><strong style="background-color: rgb(18, 150, 219); color: rgb(255, 255, 255); line-height: 20px;"><span class="diybrush" data-brushtype="text" style="background-color: #1296DB; border-radius: 0.5em 4em 3em 1em 0.5em 2em; box-shadow: #A5A5A5 4px 4px 2px; color: #FFFFFF; max-width: 100%; padding: 4px 10px; text-align: justify;">公告通知</span></strong></strong> </legend> <section class="diybrush"> <p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; max-width: 100%; min-height: 1.5em; line-height: 2em;"> 各位小伙伴们，微信图文美化编辑器正式上线了，欢迎大家多使用多提供反馈意见。使用<span style="color:inherit"><strong>谷歌与火狐浏览器</strong></span>，可获得与手机端一致的显示效果。ie内核的低版本浏览器可能有不兼容的情况 </p> </section> </fieldset> </section> <!----------------> <!----------------> <br><br><br> <!----------------> <!----------------> <section class="diy-editor"> <section style="border:dashed 2px #bbd8fd;padding:15px 15px ;color:#184491;font-size: 15px;"> <p style="letter-spacing: 2px;"> <span style="font-size: 15px; letter-spacing: 2px;">28日大风伴沙尘暴，能见度差，空气混浊，请公众尽量减少户外活动，外出注意健康防护和出行安全。</span> </p> </section> </section> <!----------------> <!----------------> <br><br><br> <!----------------> <!----------------> <section class="diy-editor"> <section style="margin: 10px 0;"> <section style="display: flex;justify-content: center;margin-bottom: -18px;"> <section class="diybrush" data-brushtype="text" style="color: #ffffff;line-height: 1.75em; font-size: 16px;padding: 2px 1em;background-color: #d82821; letter-spacing: 1.5px;border-radius: 10px;"> 假期防控提示 </section> </section> <section style="background-color: #f7f8ff;padding: 20px"> <section> <section style="display: flex;align-items: flex-end;margin-top: 20px;"> <section style="font-size:34px;background-image:-webkit-linear-gradient(#fd9765,#ffffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-weight: bold;color: transparent;transform: rotate(0deg);margin-bottom: -18px;"> 0<span class="autonum" data-original-="">1</span> </section> <section class="diybrush" data-brushtype="text" style="font-size: 16px;letter-spacing: 1.5px;margin-left: 10px;font-weight: bold;"> 切实做好假期期间疫情防控 </section> </section> <section class="assistant" style="box-sizing:border-box;width: 100%;height: 6px;background-image: -webkit-linear-gradient(left, #d3e5ff,#a2bcfb);" data-width="100%"></section> <section data-autoskip="1" class="diybrush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#333;margin-top: 10px;"> <p hm_fix="305:328"> 听从学校安排，在家中，要时刻注意班级群消息，遵从学校的安排，认真听取相关意见。坚持每日量体温，并在“健康日报系统”中按时打卡，做好健康防 </p> </section> </section> <section class="box-edit"> <section style="display: flex;align-items: flex-end;margin-top: 20px;"> <section style="font-size:34px;background-image:-webkit-linear-gradient(#fd9765,#ffffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-weight: bold;color: transparent;transform: rotate(0deg);margin-bottom: -18px;"> 0<span class="autonum" data-original-="">2</span> </section> <section class="diybrush" data-brushtype="text" style="font-size: 16px;letter-spacing: 1.5px;margin-left: 10px;font-weight: bold;"> 减少聚集活动 </section> </section> <section class="assistant" style="box-sizing:border-box;width: 100%;height: 6px;background-image: -webkit-linear-gradient(left, #d3e5ff,#a2bcfb);" data-width="100%"></section> <section data-autoskip="1" class="diybrush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#333;margin-top: 10px;"> <p> 尽可能不搞人员聚集的活动，特别是室内活动，例如家庭大聚会、朋友同学会等。确有必要参加的活动，需提前了解参加人员的健康状况和近期外出史，尽量 </p> </section> </section> <section class="box-edit"> <section style="display: flex;align-items: flex-end;margin-top: 20px;"> <section style="font-size:34px;background-image:-webkit-linear-gradient(#fd9765,#ffffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-weight: bold;color: transparent;transform: rotate(0deg);margin-bottom: -18px;"> 0<span class="autonum" data-original-="">3</span> </section> <section class="diybrush" data-brushtype="text" style="font-size: 16px;letter-spacing: 1.5px;margin-left: 10px;font-weight: bold;"> 做好日常防护 </section> </section> <section class="assistant" style="box-sizing:border-box;width: 100%;height: 6px;background-image: -webkit-linear-gradient(left, #d3e5ff,#a2bcfb);" data-width="100%"></section> <section data-autoskip="1" class="diybrush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#333;margin-top: 10px;"> <p> 疫情期间，要做好防护工作，要勤洗手、多开窗、多通风、出门戴口罩，尽量少去人口密集的公共场所，要吃熟食，不要食用野生动物，还要经常打扫卫生， </p> </section> </section> </section> </section> </section> <!----------------> <!----------------> <br><br><br> <!----------------> <!----------------> <section class="diy-editor"> <section style="position:relative;text-align:center;"> <section style="position:relative;top:24px;padding:2px 10px;display:inline-block;color:#CE6328;border-radius:4px;"> <p> <span style="font-size:18px;"><strong>温馨提示</strong></span> </p> </section> <section contenteditable="undefined" style="padding:12px;color:#666;text-align:left;border:1px solid #ddd;border-radius:2px;"> <p> <span style="color:#666666">1、戴好口罩</span> </p> <p> <span style="color:#666666">2、请出示健康码</span> </p> <p> <span style="color:#666666">3、配合测量温度</span> </p> </section> </section> </section> <!----------------> <!----------------> <br><br><br> <!----------------> <!----------------> <section class="diy-editor"> <section> <section style="position: relative;"> <section style="margin:10px auto;"> <section style="border-color: rgb(18, 150, 219); color: rgb(255, 255, 255); margin: 10px 0px 0px 2px; height: 5px; width: 65%; box-sizing: border-box; padding: 0px; background-color: rgb(18, 150, 219);" data-width="65%"></section> <section style="box-shadow: rgb(170, 170, 170) 0px 0px 4px; margin: 0px 3px; padding: 20px; background-color: rgb(254, 254, 254);"> <p> <span data-brushtype="text" style="font-size:18px;font-weight: bold;line-height: 1.75em; ">最好用的微信编辑器</span> </p> <section style="color: inherit; border-color: rgb(18, 150, 219); box-sizing: border-box; padding: 0px; margin: 0px; font-size: 14px;"> <p style="border-color: rgb(18, 150, 219); color: inherit; box-sizing: border-box; padding: 0px; margin: 0px; line-height: 1.75em; text-align: justify;"> 在这里替换你的文字内容， </p> <p style="border-color: rgb(18, 150, 219); color: inherit; box-sizing: border-box; padding: 0px; margin: 0px; line-height: 1.75em; text-align: justify;"> 注意不要用删除键把所有文字删除， </p> <p style="border-color: rgb(18, 150, 219); color: inherit; box-sizing: border-box; padding: 0px; margin: 0px; line-height: 1.75em; text-align: justify;"> 请保留一个或者用鼠标选取后TXT文档复制粘贴替换， </p> <p style="border-color: rgb(18, 150, 219); color: inherit; box-sizing: border-box; padding: 0px; margin: 0px; line-height: 1.75em; text-align: justify;"> 防止格式错乱。 </p> </section> </section> </section> </section> <p> <br/> </p> </section> </section> <!----------------> <!----------------> <br><br><br> <!----------------> <!----------------> <section class="diy-editor"> <section style="max-width: 100%; margin: 2px; padding: 0px;"> <section style="max-width: 100%;margin-left:1em; line-height: 1.4em;"> <span style="font-size:14px"><strong style="color:rgb(62, 62, 62); line-height:32px; white-space:pre-wrap"><span class="diybrush" data-brushtype="text" data-mce-style="color: #a5a5a5;" placeholder="关于微信编辑器" style="background-color: #1296DB; border-radius: 5px; color: #FFFFFF; padding: 4px 10px;">关于微信编辑器</span></strong></span> </section> <section class="diybrush" style="font-size: 1em; max-width: 100%; margin-top: -0.7em; padding: 10px 1em; border: 1px solid rgb(18, 150, 219); border-radius: 0.4em; color: rgb(51, 51, 51); background-color: rgb(239, 239, 239);"> <p> <span placeholder="提供非常好用的微信文章编辑工具。">非常好用的在线图文编辑工具</span> </p> </section> </section> </section> <!----------------> <!----------------> <br><br><br> <!----------------> <!----------------> <section class="diy-editor"> <section style="font-size: 20px; letter-spacing: 3px; padding: 0px; text-align: center; margin: 0px auto; border: 3px solid rgb(18, 150, 219); color: inherit;"> <section style="color: inherit; margin: 0px 0px 8px; display: block; width: 0px; height: 0px; border-width: 10px; border-style: solid; border-color: rgb(18, 150, 219) transparent transparent rgb(18, 150, 219); z-index: 1;"></section> <section style="margin:5px;"> <p style="margin: -20px 5px 5px;line-height:1.2em;color(198,198,199);font-size:16px;padding:15px;text-align:left;"> 反正人生不是在此处失败，就是在彼处失败。失败者才不管别的有多重要。任性一回，不然一辈子都憋屈。by毛利 </p> </section> </section> </section> </body> </html>- 2024年-3月-14日
- 802 阅读
- 1 评论
-
-
