首页
源码插件
代码笔记
精品资源
美图音乐
点滴记忆
关于博主
友情链接
搜索
搜索
热门搜索
分享一个简约导航网站单页| blog.qqzzz.cn
莱卡云2025年5月促销活动来袭| Lcayun.com
BingGan
她说爱你,没说只爱你!
累计撰写
99
篇文章
累计收到
50
条评论
首页
导航
首页
源码插件
代码笔记
精品资源
美图音乐
点滴记忆
关于博主
友情链接
旗下站点
Bg‖ 在线音乐
Bg‖ Mail邮件
Bg‖ SEO外链
包含标签 【单页】 的文章
2025-5-19
分享一个简约导航网站单页| blog.qqzzz.cn
一个简约的网站导航源码单页,直接新建index.html 把下方源码粘贴进去修改保存即可。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>导航网站 -blog.qqzzz.cn</title> <meta name="keywords" content="双虹云博客"> <meta name="description" content="双虹云博客。"> <meta name="author" content="导航网站"> <meta name="robots" content="index,follow"> <meta property="og:title" content="导航网站 - "> <meta property="og:description" content="双虹云。"> <meta property="og:type" content="website"> <link rel="icon" href="https://blog.qqzzz.cn/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="https://blog.qqzzz.cn/favicon.ico" type="image/x-icon"> <style> /* 基础样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 主体样式 */ body { background: #f0f2f5; font-family: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif; margin: 0; padding: 0; min-height: 100vh; overflow-x: hidden; position: relative; display: flex; flex-direction: column; } /* 容器样式 */ .container { max-width: 1200px; margin: 0 auto; padding: 20px; flex: 1; display: flex; flex-direction: column; align-items: center; width: 100%; } /* 主盒子样式 */ .main-box { background: white; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); border-radius: 24px; border: 1px solid #e9ecef; width: 100%; max-width: 1000px; padding: 30px; margin: 0 auto 15px; transition: all 0.3s ease; position: relative; z-index: 2; } .main-box:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2); } /* 头部样式 */ .header { text-align: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .header h1 { font-size: 32px; background: linear-gradient(120deg, #2b5876 0%, #4e4376 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 15px; } /* 提示框样式 */ .notice { background: transparent; padding: 0 25px; border-radius: 12px; margin-bottom: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notice p { color: #4facfe; font-size: 16px; line-height: 1; font-weight: bold; letter-spacing: 0.5px; margin: 0; } /* 流量卡领取样式 */ .flow-card, .flow-card-top { background: linear-gradient(120deg, #4facfe 0%, #00f2fe 100%); box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1); border-radius: 12px; padding: 10px 15px; margin-bottom: 10px; text-align: center; position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; } .flow-card::before, .flow-card-top::before { content: ''; position: absolute; top: -10px; right: -10px; width: 80px; height: 80px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; } .flow-card .text-content, .flow-card-top h3 { flex: 1; text-align: left; color: #ffffff; font-size: 16px; margin: 0; } .flow-card h2 { color: #ffffff; font-size: 18px; margin-bottom: 4px; font-weight: 600; } .flow-card p { color: rgba(255, 255, 255, 0.9); font-size: 14px; margin-bottom: 0; } .flow-card a, .flow-card-top a { display: inline-block; background: #ffffff; color: #2b5876; padding: 8px 0; border-radius: 50px; font-size: 15px; cursor: pointer; transition: all 0.3s ease; font-weight: 600; text-decoration: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); margin: 0 5px; white-space: nowrap; width: 110px; text-align: center; } /* 所有按钮统一样式 */ .flow-card .buttons a, .flow-card-top .buttons a { background: #ffffff; color: #2b5876; } .flow-card .buttons a:hover, .flow-card-top .buttons a:hover { background: #f8f9fa; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); } .flow-card .buttons, .flow-card-top .buttons { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; } .flow-card a:hover, .flow-card-top a:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); background: #f8f9fa; } .flow-card-top { margin-bottom: 10px; } /* 导航网格样式 */ .nav-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; width: 100%; margin: 0 auto; padding: 0; } /* 导航项样式 */ .nav-item { background: hsl(230, 10%, 33%); border-radius: 12px; padding: 12px; text-align: center; box-shadow: none; transition: all 0.3s ease; min-height: 75px; position: relative; } .nav-item:hover { transform: none; background: hsl(230, 10%, 38%); } .nav-item a { text-decoration: none; color: inherit; display: block; text-align: center; } .nav-item h3 { color: #ffffff; font-size: 17px; margin-bottom: 8px; } .nav-item p { color: rgba(255, 255, 255, 0.9); font-size: 16px; margin-bottom: 4px; } .nav-item .status { position: absolute; bottom: -20px; left: 0; right: 0; color: #ff6b6b; font-size: 12px; text-align: center; font-weight: 500; } /* 底部导航样式 */ .float-nav { display: none; } @media (max-width: 768px) { body { padding-bottom: 20px; } .container { padding: 10px; } .main-box { padding: 15px; margin: 5px; } .header { margin-bottom: 15px; padding-bottom: 10px; } .nav-grid { gap: 15px; } .flow-card, .flow-card-top { padding: 12px; margin-bottom: 10px; flex-direction: column; } .flow-card .text-content, .flow-card-top h3 { text-align: center; margin-bottom: 12px; font-size: 16px; } .flow-card h2 { font-size: 16px; margin-bottom: 5px; text-align: center; } .flow-card p { font-size: 13px; text-align: center; padding: 0 5px; } .flow-card a, .flow-card-top a, .flow-card .buttons a, .flow-card-top .buttons a { padding: 7px 0; font-size: 14px; margin: 0 4px; width: 95px; text-align: center; background: #ffffff; color: #2b5876; } .flow-card .buttons, .flow-card-top .buttons { justify-content: center; width: 100%; margin-top: 5px; } .nav-item { padding: 12px; min-height: 70px; width: 100%; } .header h1 { font-size: 24px; } .notice p { font-size: 14px; } .copyright { padding: 10px 0; font-size: 12px; } } /* 版权信息样式 */ .copyright { text-align: center; padding: 15px 0; color: #6c757d; font-size: 13px; letter-spacing: 0.5px; width: 100%; max-width: 1200px; margin: 0 auto; } /* 弹窗样式 */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; justify-content: center; align-items: center; z-index: 10000; } .modal { background: white; border: 1px solid #e9ecef; padding: 25px; border-radius: 15px; width: 90%; max-width: 320px; text-align: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } .modal h2 { color: #2b5876; margin-bottom: 20px; font-size: 20px; font-weight: bold; } .modal p { color: #6c757d; margin-bottom: 25px; font-size: 16px; line-height: 1.8; } .modal button { background: #ffffff; border: none; color: #2b5876; padding: 10px 40px; border-radius: 50px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; font-weight: 600; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .modal button:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); background: #f8f9fa; } </style> </head> <body> <div class="container"> <div class="main-box"> <div class="header"> <h1>网址导航</h1> <div class="notice"> <p></p> </div> </div> <!-- 流量卡领取 --> <div class="flow-card"> <div class="text-content"> <h2>🎁一号店铺免费流量卡领取🎁</h2> <p>全国通用流量卡,每月仅19-39元起,80G-200GB超大流量,无限速!</p> </div> <div class="buttons"> <a href="https://172.lot-ml.com/ProductEn/Index/4e9215cbe8c3a4ba" target="_blank">立即领取</a> <a href="https://haoka.-ml.com/plugreg.html?agentid=10147" target="_blank">免费开通代理</a> </div> </div> <div class="flow-card"> <div class="text-content"> <h2>🎁二号店铺免费流量卡领取🎁</h2> <p>全国通用流量卡,每月仅19-39元起,80G-200GB超大流量,无限速!</p> </div> <div class="buttons"> <a href="https://h5.gao.com/url?value=yQKCu1743343994" target="_blank">立即领取</a> <a href="https://h5.gantanhao.com/url?value=Cgzla1743395118452" target="_blank">免费开通代理</a> </div> </div> <div class="nav-grid"> <!-- 导航项目1 --> <div class="nav-item"> <a href="javascript:void(0)" onclick="copyAndRedirect('www.baidu.cn', 'http://www.udg.cc')"> <h3>我爱代挂</h3> <p class="url">WWW.UDG.CC</p> <p class="status">全站暂停下单和续费</p> </a> </div> <!-- 导航项目2 --> <div class="nav-item"> <a href="javascript:void(0)" onclick="copyAndRedirect('www.nsss.cc', 'http://www.nsss.cc')"> <h3>我爱云代挂</h3> <p class="url">WWW.NSSS.CC</p> <p class="status">全站暂停下单和续费</p> </a> </div> <!-- 导航项目3 --> <div class="nav-item"> <a href="javascript:void(0)" onclick="copyAndRedirect('www.qqmz.cc', 'http://www.qqmz.cc')"> <h3>QQ秒赞</h3> <p>WWW.QQMZ.CC</p> </a> </div> <!-- 导航项目4 --> <div class="nav-item"> <a href="javascript:void(0)" onclick="copyAndRedirect('www.zpo.cc', 'http://www.zpo.cc')"> <h3>导航网站</h3> <p>WWW.ZPO.CC</p> </a> </div> </div> </div> </div> <div class="copyright"> Copyright © 2025 All Rights Reserved </div> <!-- 弹窗 --> <div class="modal-overlay" id="welcomeModal"> <div class="modal"> <h2>网站公告</h2> <p>QQ代挂全面停止新增和续费<br>老用户不受影响可正常操作</p> <button onclick="closeModal()">OK</button> </div> </div> <script> // 定义提示词 const NOTICE_TEXT = "请收藏本导航站防止丢失,方便下次访问!"; // 页面加载时设置提示词 window.onload = function() { // 置提示词 document.querySelector('.notice p').textContent = NOTICE_TEXT; // 查弹窗显示 checkModalDisplay(); }; // 检查弹窗显示次数 function checkModalDisplay() { // 获取当前显示次数 let modalCount = localStorage.getItem('modalDisplayCount') || 0; modalCount = parseInt(modalCount); // 如显示数小于2次,显示弹窗并增加计数 if (modalCount < 2) { document.getElementById('welcomeModal').style.display = 'flex'; localStorage.setItem('modalDisplayCount', modalCount + 1); } else { document.getElementById('welcomeModal').style.display = 'none'; } } // 关闭弹窗 function closeModal() { document.getElementById('welcomeModal').style.display = 'none'; } // 复制本到贴板并跳转 function copyAndRedirect(text, url) { // 创建临时输入框 const input = document.createElement('input'); input.value = text; document.body.appendChild(input); input.select(); document.execCommand('copy'); document.body.removeChild(input); // 跳转到目标网址 window.open(url, '_blank'); } </script> </body> </html>
2025年-5月-19日
50 阅读
0 评论
源码分享
2024-5-9
墨星拟态个人引导页v3.0版本
随着应用功能越来越多,繁多而详细的功能使用和说明文档,已经不能满足时代追求 快速 的需求,而 引导页(或分步引导) 本质就是 化繁为简,将核心功能以更简单、简短、明了的文字指引用户去使用对应的功能,特别是 ToB 的项目,各种新功能需求迭代非常快,免不了需要 引导页 的功能来快速帮助用户引导。
2024年-5月-9日
737 阅读
1 评论
源码分享
2024-4-16
网站URL在线批量提取工具
网站URL批量提取工具可用性较大,可以一键生成网站页面链接,支持在线导出链接为txt文本和一键复制功能,导出的链接可用来提交到百度收录或者其他搜索引擎收录。
2024年-4月-16日
251 阅读
0 评论
源码分享
2024-4-15
站长街|互站网交易平台导航源码
源码纯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日
276 阅读
0 评论
源码分享
2024-3-31
炫酷渐变色引导页HTML源码
源码说明: 单页源码/下载源码安装直接修改index.html即可。 图片我直接调用的QQ头像API和自己博客的外链图片。 样式挺好看,背景支持渐变色。 下载地址: 渐变色个人引导页源码
2024年-3月-31日
329 阅读
0 评论
源码分享
2024-3-28
简约404报错html单页源码
页面很是简洁,挺好看的,新建404.html页面把下面源码复制粘贴进去,可以放到网站根目录或者宝塔面板404错误页面。
2024年-3月-28日
265 阅读
0 评论
源码分享
2024-3-27
随机小姐姐视频单页源码
①:原接口已废,现已修复 ②:自适应pc和手机端 ③:优化静态文件 ④:接口来自 Qoc Api ⑤:如有自己的短视频接口可自行替换
2024年-3月-27日
400 阅读
0 评论
点滴记忆
2024-3-21
自动采集QQ微信头像php源码附API接口
源码说明: 最新QQ微信头像获取php源码,页面自带头像分类功能,点击头像可查看更多,源码无需依赖数据库,直接上传到站点根目录解压即可使用。 头像API接口来自第三方,包括js都是引用的超链,觉得卡的话自己本地话即可。 下载地址: [cv] https://wwp.lanzoup.com/iRBLU1s43ajg [/cv]
2024年-3月-21日
272 阅读
0 评论
美图音乐
2024-3-17
在线欣赏美图html单页源码
2024年-3月-17日
253 阅读
0 评论
美图音乐
2024-3-14
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日
841 阅读
1 评论
源码分享
2024-3-11
一款好看的HTML单页源码,可做个人介绍
一款适合做个人介绍的html单页,自建一个html页面把下面代码复制保存即可。 !DOCTYPE html html lang=en head meta charset=UTF-8 title Title /title /head body section c...
2024年-3月-11日
282 阅读
1 评论
源码分享