找到
10
篇与
美化教程
相关的结果
-
Joe主题美化教程_typecho博客Joe主题的头像呼吸灯 mf3oi9hy.png图片 效果可以看博主的头像，评论区的头像也会自动加上呼吸灯，点击头像或电脑端停留在头像上面还会旋转 教程 <style> /*头像呼吸光环和鼠标悬停旋转放大_[淡泊云资源网_danb.cc]*/ .avatar { border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s; } .avatar:hover { transform: scale(1.15) rotate(720deg); } @keyframes light { 0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;} } </style>将上面的代码放到网站的 <head> 或<body>里面保存即可查看效果了，建议放在<body>里面!
-
Joe主题美化教程_Typecho实现评论时自动随机输入一条评论功能 mf3oi9hy.png图片 修改 core/function.php 打开function.php文件，找到下方代码 function _getVersion() { return "7.7.1"; };将以下代码复制粘贴到后边 function random_comment() { $comments = array('对小白真的很友好，写的很全面', '终于找到这篇文章了，感谢作者的分享', '喜欢这篇文章，作者666，文章真棒', '支持博主，一定多分享', '这篇文章写的真不错，真详细，点个赞', '这篇文章肯定会火，作者666大顺', '受益匪浅，感谢博主', '学习到了，感谢博主'); return $comments[rand(0,count($comments)-1)]; }修改 public/comment.php 打开comment.php文件找到下方代码（在第33行左右），将下方代码 <textarea class="text joe_owo__target" name="text" value="" autocomplete="new-password" placeholder="说点什么吧，点击右上方切换成画图试试？"></textarea>替换为以下代码 <textarea class="text joe_owo__target" name="text" value="" autocomplete="new-password" placeholder="说点什么吧，点击右上方切换成画图试试？"><?php echo random_comment(); ?></textarea>
-
Joe主题美化教程_如何让Joe主题实现半透明 mf3oi9hy.png图片 在Joe主题，全局设置 → 自定义css粘贴下面这个代码 body { --background: rgba(255,255,255,0.8) }其中 0.8 表透明度，这个值越低，其越透明 这个 0.8 只是我加上的数值，同理： 如果想半透明，只需把 0.8 改为 0.5 body { --background: rgba(255,255,255,0.5) }body { --background: rgba(255,255,255,0.5) }如果想完全透明，只需把 0.8 改为 0.0 就好了 body { --background: rgba(255,255,255,0.0) }
-
Joe主题美化教程_Typecho博客自定义右键 简单来说就是花里胡哨，没别的意思，看着喜欢就拿去 mf3oi9hy.png图片 效果演示 mf3s177x.png图片 教程步骤 第一步：复制下列代码,引入 layer.js <script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>第二步：依次进入控制台 – 外观 – 设置外观 – 自定义 <body></body> 末尾位置内容（非必填），将以下代码加入到自定义 <body></body> 末尾位置内容（非必填），部分内容自行修改即可。 <!-- 自定义右键菜单美化 --> <style type="text/css"> a {text-decoration: none;} div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba (0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;} div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block} div.usercm ul li{margin:0px;padding:0px;line-height:35px;} div.usercm ul li a{color:#666;padding:0 15px;display:block} div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)} div.usercm ul li a i{margin-right:10px} a.disabled{color:#c8c8c8!important;cursor:not-allowed} a.disabled:hover{background-color:rgba(255,11,11,0)!important} div.usercm{background:#fff !important;} </style> <div class="usercm" style="left: 199px; top: 5px; display: none;"> <ul> <li><a href="http://blog.danb.cc/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li> <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li> <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li> <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li> <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li> <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li> <li><a href="https://www.oszz.cn/"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li> </ul> </div> <script type="text/javascript"> (function(a) { a.extend({ mouseMoveShow: function(b) { var d = 0, c = 0, h = 0, k = 0, e = 0, f = 0; a(window).mousemove(function(g) { d = a(window).width(); c = a(window).height(); h = g.clientX; k = g.clientY; e = g.pageX; f = g.pageY; h + a(b).width() >= d && (e = e - a(b).width() - 5); k + a(b).height() >= c && (f = f - a(b).height() - 5); a("html").on({ contextmenu: function(c) { 3 == c.which && a(b).css({ left: e, top: f }).show() }, click: function() { a(b).hide() } }) }) }, disabledContextMenu: function() { window.oncontextmenu = function() { return !1 } } }) })(jQuery); function getSelect() { "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢！") : document.execCommand("Copy") } function baiduSearch() { var a = window.getSelection ? window.getSelection() : document.selection.createRange().text; "" == a ? layer.msg("啊噢...你没还没选择文字呢！") : window.open("https://www.baidu.com/s?wd=" + a) } $(function() { for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) { d = !1; break } d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu()) }); </script>
-
Joe主题美化教程_如何给joe博客主题添加底部导航栏 mf3oi9hy.png图片 效果演示 mf3rw2j9.png图片 教程步骤 首先在网站主题assets/css目录下，新建一个名为lyxdh.css的文件，并将如下代码放置于该文件中 * { margin: 0; padding: 0; box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent } ::-webkit-scrollbar { width: 8px; height: 8px } ::-webkit-scrollbar-thumb { border-radius: 4px; background: var(--seat) } ::-webkit-scrollbar-track { background: transparent } ::-moz-selection { color: #fff; background: var(--theme) } ::selection { color: #fff; background: var(--theme) } body { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom) } body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -520; pointer-events: none } input[type='text'] { -webkit-appearance: none; border-radius: 0; font-size: 13px; font-weight: 500 } iframe { display: block; border: none; margin: 0 auto; vertical-align: middle } textarea { font-size: 14px; resize: none; -webkit-appearance: none } li { list-style: none } a { text-decoration: none } h1,h2,h3,h4,h5,h6 { font-weight: 500 } img { border: 0; vertical-align: middle } img[src=''],img:not([src]) { border: 0; opacity: 0 } svg,canvas { vertical-align: middle } button { cursor: pointer; -webkit-appearance: none; font-size: 13px } table { border-collapse: collapse; border-spacing: 0 } .joe_main { min-width: 0; flex: 1; padding: 15px 0 } .joe_container { display: flex; width: 100%; margin: 0 auto; padding: 0 15px } @media (min-width: 576px) { .joe_container { max-width:540px } } @media (min-width: 768px) { .joe_container { max-width:720px } } @media (min-width: 992px) { .joe_container { max-width:960px } } @media (min-width: 1200px) { .joe_container { max-width:1140px } } @media (min-width: 1400px) { .joe_container { max-width:1320px } } @font-face { font-family: "cyicon"; /* Project id 2611504 */ src: url('https://at.alicdn.com/t/font_2611504_8nq4wp1bmb3.woff2?t=1623735805644') format('woff2'), url('https://at.alicdn.com/t/font_2611504_8nq4wp1bmb3.woff?t=1623735805644') format('woff'), url('https://at.alicdn.com/t/font_2611504_8nq4wp1bmb3.ttf?t=1623735805644') format('truetype'); } .cyicon { font-family: "cyicon" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .zrnq-xintiao:before { content: "\e6e7"; } .zrnq-saoma:before { content: "\e6e2"; } .zrnq-haibaofenxiang:before { content: "\e6e3"; } .zrnq-pinglun:before { content: "\e605"; } .zrnq-tongji3:before { content: "\e6ce"; } .zrnq-time:before { content: "\e6be"; } .zrnq-huanyingye:before { content: "\e728"; } .zrnq-106collect:before { content: "\e7a7"; } .zrnq-womendefuwu:before { content: "\e8d8"; } .zrnq-yu:before { content: "\e602"; } .zrnq-zhichi:before { content: "\e639"; } .zrnq-ganxie:before { content: "\e638"; } .zrnq-huoban:before { content: "\e63a"; } .zrnq-xinaixin:before { content: "\e608"; } .zrnq-beian:before { content: "\e61a"; } .zrnq-zhuye-copy:before { content: "\e601"; } .zrnq-hi:before { content: "\e606"; } .zrnq-guandianjianpingcopy:before { content: "\e87b"; } .zrnq-weiyuqiang-:before { content: "\e631"; } .zrnq-guanyu:before { content: "\e6a8"; } .zrnq-search-copy:before { content: "\e600"; } .zrnq-daohang:before { content: "\e60a"; } .zrnq-dashang:before { content: "\e7fb"; } .zrnq-3132:before { content: "\e603"; } .zrnq-dashang1:before { content: "\e65d"; } .zrnq-yinyue-copy-copy:before { content: "\e60b"; } .zrnq-gongju:before { content: "\e609"; } .zrnq-youlianguanli:before { content: "\e66f"; } .zrnq-shezhi:before { content: "\e629"; } .zrnq-dashang2:before { content: "\e61f"; } .zrnq-yanjing:before { content: "\e60c"; } .zrnq-gongjuxiang:before { content: "\e607"; } .zrnq-shuaxin:before { content: "\e647"; } .zrnq-fuzhi:before { content: "\e697"; } .zrnq-google1:before { content: "\e87a"; } .zrnq-backward:before { content: "\ea87"; } .zrnq-go:before { content: "\ea8b"; } .zrnq-rhome-fill:before { content: "\ec0b"; } .zrnq-service-Fill:before { content: "\e8e6"; } .zrnq-144message02:before { content: "\e7b0"; } .zrnq-352:before { content: "\e7ca"; } .zrnq-baidu:before { content: "\e6b6"; } .zrnq-banquan:before { content: "\e6c9"; } .zrnq-aixin2:before { content: "\e6ff"; } .zrnq-sitemap:before { content: "\e80a"; } .zrnq-RSS:before { content: "\e604"; } .zrnq-shengming:before { content: "\e627"; } .zrnq-anquanguanli:before { content: "\e7c6"; } .zrnq-anonymous-full:before { content: "\e8f0"; } .zrnq-taiji:before { content: "\e653"; } .zrnq-shuaxin3:before { content: "\e6db"; } .zrnq-dengdai:before { content: "\e6df"; } @media screen and (min-width:767px){#mobile-footer{display:none}} #mobile-footer{height:50px;background:#fafafa;position:fixed;bottom:0;left:0;border-top:0;width:100%;z-index:9999999} #mobile-menu{display:block} #mobile-menu:after{content:'';display:block;height:0;clear:both} #mobile-menu>li{width:20%;float:left;border-top:1px solid #e6e6eb;height:100%} #mobile-menu>li>a:hover{color:#000;} #mobile-menu>li>.active{color:#000;} #mobile-menu>li>a{text-align:center;color:#777;display:block;line-height:12px;height:100%} #mobile-menu>li>a>span{font-size:20px;display:block;line-height:30px}然后复制如下代码粘贴于footer.php文件 <?php $this->footer(); ?> 后边即可 code here... 首页 友链 壁纸 工具 关于
-
Joe主题美化教程_底部自定义美化按钮 最近浏览博客，看到不少朋友这个底部的美化，我也觉得底部的这些按钮平平无奇，就想着用css设置一个样式，从而美化按钮方法，至此分享给大家。 mf3oi9hy.png图片 效果演示 mf2bcyp7.png图片 教程 步骤1 主题设置—>全局设置—>自定义CSS样式代码，添加以下 CSS 代码： /*代码网站底部按钮美化_[淡泊云资源网_danb.cc]*/ :root{--theme-color:#f04494;--focus-shadow-color:rgba(240,68,148,.4);--mian-max-width:1200px;}.github-badge { display: inline-block; border-radius: 4px; text-shadow: none; font-size: 12px; color: #fff; line-height: 15px; margin-bottom: 5px; } .badge-subject { display: inline-block; background-color: #4d4d4d; padding: 4px 4px 4px 6px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .github-badge .bg-blue { background-color: #007ec6; } .github-badge .bg-brightgreen { background-color: #4dc820; } .github-badge .bg-blueviolet { background-color: #8833d7; } .github-badge .badge-value { display: inline-block; padding: 4px 6px 4px 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .github-badge .bg-orange { background-color: orange; } .github-badge .bg-red { background-color: red; } /*代码网站底部按钮美化结束_[淡泊云资源网_danb.cc]*/步骤2 主题设置—>底部设置—>网站底部右侧自定义链接,添加以下 HTML 代码： <!--网站底部按钮美化_[淡泊云资源网_danb.cc]--> <div class="github-badge"> <span class="badge-subject bg-blue"> <a style="color:#fff" href="链接" target="_blank">自定义文字</a> </span>- <span class="badge-subject bg-brightgreen"> <a style="color:#fff" href="链接" target="_blank">自定义文字</a> </span>- <span class="badge-subject bg-green"> <a style="color:#fff" href="链接" target="_blank">自定义文字</a> </span>- <span class="badge-subject bg-orange"> <a style="color:#fff" href="链接" target="_blank">自定义文字</a> </span>- <span class="badge-value bg-blueviolet"> <a style="color:#fff" href="链接" target="_blank">自定义文字</a> </span>- <span class="badge-value bg-red"> <a style="color:#fff" href="链接" target="_blank">自定义文字</a> </div> <!--网站底部按钮美化_[淡泊云资源网_danb.cc]-->
-
Markdown文档常用图标 合理的使用图标可以让文档更具有可读性，但要确保见名知意，不要过度使用。 内容图标 ⚠️ Warning: 这是一个警告信息。 ℹ️ Info: 这里是一些额外的信息。 ❗ Important: 这是一个重要提示。 💡 Tip: 这是一个有用的提示。 📝 Note: 这是一个备注或注释。 开源项目必备 🚀 rocket: 火箭 🎉colour bar：彩带 🎯focus：专注 💪fist: 力量 🌟star ：星星 🛠️ Setup: 用于说明设置或安装过程。(或者工具) 🔒 Security: 强调安全性相关的特性或提示。 ⚙️ Configuration: 指向配置文件或配置步骤。 📊 Metrics: 展示项目的状态或性能指标。 📦 Package: 提到与包管理或发行版相关的内容。 🐛 Bug Fix: 指出已解决的错误或已知问题。 ✨ Enhancement: 强调新功能或改进。 📚 Documentation: 指向项目的文档或说明。 🧪 Testing: 与测试相关的代码或说明。 🔄 Update: 标记更新或版本迭代。 🗂️ File Structure: 描述项目的文件组织。 🏗️ Architecture: 描述系统架构或高层设计。 🌐 Web: 专用于Web开发或相关技术的提示。 🤝 Contribution: 邀请他人贡献代码或参与项目。 👀 Review: 请求审查或提醒审查相关事项。 📘 introduction：介绍 🌍 i18n：国际化 ❓ question：用来表示问题或询问，可以用在探究原因的上下文中。 🔍 magnifying glass：放大镜，象征搜索或调查，可以用来表示寻找原因。 🏋️♂️ man lifting： 举重运动员，象征着努力和坚持。 🧗 man climbing：攀岩者，代表攀登和克服困难的努力。 💭 thought balloon：想法气泡，用来表示思考中的想法或幻想。 🧠 brain：大脑，象征智力和思考过程。 ☁️ cloud: 云，表示云计算和云服务。 🧭 – 罗盘，象征导向或指引，可以用于指示方向或引导来源。 🔗 – 链接符号，表示来源是通过链接或互联网连接的。 🔜 – “即将”箭头符号，直接表示即将发生的事件。 🪄 魔法棒，代表创造和变化 ✨ 闪光点，代表灵感和创意—引申为新功能 📄 文档，表示文档 平时的图标 🖼️ 背景图 🍅 番茄钟 🔊 声音 ⚙️ 设置 👤 个人信息图标 🤖 机器人，代表人工智能、机器学习或自动化。 ⏳ – 沙漏，象征时间的流逝，适用于表示等待或过渡期。 📅 – 日历，适用于表示特定的日期或时间规划。 🕒 – 时钟，显示特定的时间（例如三点钟）。 微表情 😂 – 笑哭 😊 – 高兴/满足 😁 – 笑脸/开心 😢 – 哭泣 🤔 – 思考 🙂 – 微笑 🙁 – 轻微不开心 😍 – 热爱 😎 – 戴着太阳镜的酷脸 😴 – 睡觉 😮 – 惊讶 😡 – 生气 😱 – 恐惧 🧐 – 带着放大镜的脸，象征研究和查找信息。 😏 – 得意/调皮 😌 – 安心/满足 😭 – 大哭/非常伤心 🥰 – 拥抱的脸/表达爱和亲近 颜文字 哭泣：(｡•́︿•̀｡) 开心：\_ (˃ᴗ˂) ٩(◕‿◕｡)۶ (＾-＾)ノ 悲伤/失望：(T\_T) (╥\_╥) (｡•́︿•̀｡) (｡╯︵╰｡) 可爱/萌：(≧ω≦) (｡♥‿♥｡) (✿◠‿◠)
