搜索到
39
篇与
网站代码
的结果
-
网站底部自定义美化按钮 最近浏览博客，看到不少朋友这个底部的美化，我也觉得底部的这些按钮平平无奇，就想着用css设置一个样式，从而美化按钮方法，至此分享给大家。教程分为两步，添加 css 样式和添加 HTML 代码即可如下（自定义）joe博客主题教程，其他主题自行参考主题设置-全局设置-自定义CSS代码-添加以下代码/*CSS 代码网站底部按钮美化 blog.netzz.net*/ :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; } /*CSS 代码网站底部按钮美化结束 blog.netzz.net*/ 主题设置-底部设置-左侧/右侧自定义内容代码-加入以下代码<!--网站底部按钮美化 html 开始 by 站长网 blog.netzz.net--> <div class="github-badge"> <span class="badge-subject bg-blue"> <a style="color:#fff" href="https://blog.netzz.net/" target="_blank">站长网博客</a> </span>- <span class="badge-subject bg-brightgreen"> <a style="color:#fff" href="https://pay.aimafu.com/" target="_blank">爱码付支付</a> </span>- <span class="badge-subject bg-green"> <a style="color:#fff" href="https://idc.netzz.net/" 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> <!--网站底部按钮美化 html 结束 by 站长网 blog.netzz.net--> -
愚人节整蛊代码：你屏幕上有根毛 愚人节的时候，发现手机百度网页版出了一个有意思的小彩蛋：会在屏幕上放上一根毛，非常逼真。于是乎就把它给存了下来，并进行了一点点优化改进——限制了最大宽度，并加入了随机旋转角度，这下效果更加完美了。以下是优化后的完整 js 代码，将代码插入到你的网页中即可看到效果！代码复制/*** * 愚人节彩蛋 - 你屏幕上有根毛 * 出处：https://www.baidu.com/s?ie=UTF-8&wd=%E6%84%9A%E4%BA%BA%E8%8A%82 * 整理：站长网 https://blog.netzz.net/ */ !function() { var bottom = Math.floor(60 * Math.random()), right = Math.floor(50 * Math.random()), rotate = Math.floor(360 * Math.random()); var foolsEgg = document.createElement("img"); foolsEgg.src = "https://blog.netzz.net/usr/uploads/yigenmao.png"; foolsEgg.style.position = "fixed"; foolsEgg.style.bottom = "".concat(bottom, "%"); foolsEgg.style.right = "".concat(right, "%"); foolsEgg.style.zIndex = "9999"; foolsEgg.style.pointerEvents = "none"; foolsEgg.style.width = "40%"; foolsEgg.style.maxWidth = "190px"; foolsEgg.style.transform = "".concat("rotate(", rotate, "deg)"); document.body.append(foolsEgg); } ();
-
网页屏蔽各种按键的代码分享，屏蔽右键/屏蔽f12 //屏蔽鼠标右键、Ctrl+N、Shift+F10、F11、F5刷新、退格键 function document.oncontextmenu(){event.returnValue=false;} //屏蔽鼠标右键 function window.onhelp(){return false} //屏蔽F1帮助 function document.onkeydown(){ if((window.event.altKey)&&((window.event.keyCode==37)|| //屏蔽Alt+方向键← (window.event.keyCode==39))){ //屏蔽Alt+方向键→ alert("不准你使用ALT+方向键前进或后退网页！"); event.returnValue=false; } if((event.keyCode==8)|| //屏蔽退格删除键 (event.keyCode==116)|| //屏蔽F5刷新键 (event.ctrlKey && event.keyCode==82)){ //Ctrl+R event.keyCode=0; event.returnValue=false; } if(event.keyCode==122){event.keyCode=0;event.returnValue=false;} //屏蔽F11 if(event.ctrlKey && event.keyCode==78)event.returnValue=false; //屏蔽Ctrl+n if(event.shiftKey && event.keyCode==121)event.returnValue=false; //屏蔽shift+F10 if(window.event.srcElement.tagName=="A" && window.event.shiftKey) window.event.returnValue=false; //屏蔽shift加鼠标左键新开一网页 if((window.event.altKey)&&(window.event.keyCode==115)){ //屏蔽Alt+F4 window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px"); return false; } }
-
Typecho萤火虫氛围特效代码 效果展示{callout color="#4dbfef"}让你的 Typecho 博客增添萤火虫氛围效果，纯 CSS 无 JS 加载，可全局使用、可指定任意文章页显示，在暗调页面下效果更优。{/callout}A 引入 CSS右键保存样式文件 lopwon.firefly.cssB 引入 JS<style>.circle-container {position: fixed;top: 0;left: 0;z-index: 1}</style> <script> var firefly = ""; for (var i = 1; i <= 100; i++) { firefly = '<div class="circle-container"><div class="circle"></div></div>'; document.writeln(firefly); } </script>C 示例在缩略名（slug）为 about-me 的独立页面添加萤火虫效果，操作如下：在主题文件 page.php 适当位置，或者！如果 page.php 有引入 footer.php 的话，也可以在 footer.php 适当位置，添加以下代码。<?php if ($this->is('page','about-me')): //仅 about-me 显示萤火虫效果 ?> <link rel="stylesheet" href="<?php $this->options->themeUrl('css/lopwon.firefly.css'); //样式路径 ?>" /> <style>.circle-container {position: fixed;top: 0;left: 0;z-index: 1}</style> <script> var firefly = ""; for (var i = 1; i <= 100; i++) { firefly = '<div class="circle-container"><div class="circle"></div></div>'; document.writeln(firefly); } </script> <?php endif; ?>将以上代码中的 about-me 和样式路径（css/lopwon.firefly.css）替换为自己的，如果不显示萤火虫效果，可尝试修改 style 中的 z-index 层叠值（如：9）。如果想在多个独立页面同时使用萤火虫效果，可以将以上代码中的 if 语句修改为：<?php if ($this->is('page','about-me') or $this->is('page','test')): //将 about-me 和 test 同时显示萤火虫效果 ?>
-
-
-
-
-
-
-
-
-
-
Html网站鼠标右键菜单美化 效果展示 说明 将下面代码放入网页代码即可。引入CSS 这里引入Font Awesome图标字体库和CSS框架，将代码放入头部head引用即可。<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 加入代码 底下代码自行调整修改跳转链接即可。<!-- 站长网-右键菜单美化 --><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://bin00.cn/"><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: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><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li> <li style="border-bottom:1px solid gray"><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li> <li><a target="_blank" href="http://blog.bin00.cn"><i class="fa fa-suitcase fa-fw"></i><span>百宝箱</span></a></li> <li><a href="https://qm.qq.com/cgi-bin/qm/qr?k=PPnvXPkIMGoI68YjK0u27qXe6ljzq4uP&group_code=422505146"><i class="fa fa-meh-o fa-fw"></i><span>加入QQ群</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("http://blog.bin00.cn/?s=" + 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><!-- 站长网-右键菜单美化 -->
-
wordpress网站首页添加四格小工具HTML代码 代码展示 文件下载 {dotted startColor="#ff6c6c" endColor="#1989fa"/}隐藏内容，请前往内页查看详情{dotted startColor="#ff6c6c" endColor="#1989fa"/}简介： 1.下载附件文件，上传到网站根目录(文件名:sige.css),文件名可自定义(注意文件名一致)<link rel="stylesheet" href="你的网站/sige.css" type="text/css" >2.然后在网站添加引入css代码也可自定义HTML里添加css代码最上方写入标签,将css代码放入标签内即可！3.外观-小工具-自定义HTML添加如下代码，或者在网站模板想要添加方格工具的地方添加引入代码。<div class="section"> <div class="home-first"> <div class="container hide_sm"> <div class="col-1-4"> <div class="hf-widget hf-widget-1 hf-widget-software"> <h3 class="hf-widget-title"> <i class="fa fa-cloud"></i> <a href="#" target="_blank">推荐产品</a> <span>云服务器等云产品推荐</span> </h3> <div class="hf-widget-content"> <div class="scroll-h"> <ul> <li> <a href="https://www.aliyun.com/product/ecs?userCode=0juxmvcj" rel="external nofollow" target="_blank"> <i class="thumb " style="background-image:url(https://ae01.alicdn.com/kf/H026cdceabc1942e1b82b1eb2cd5b9e41P.png)"></i> <span>阿里云</span></a> </li> <li> <a href="https://curl.qcloud.com/KeuZuZZQ" target="_blank"> <i class="thumb " style="background-image:url(https://ae01.alicdn.com/kf/H006240f97bff40f5aea223eb51b33c3dq.png)"></i> <span>腾讯云</span></a> </li> <li> <a href="#" target="_blank"> <i class="thumb " style="background-image:url(https://ae01.alicdn.com/kf/H2da200a36ce2401595f8e03f8c750deeT.png)"></i> <span>企业云</span></a> </li> <li> <a href="#" target="_blank"> <i class="thumb " style="background-image:url(https://ae01.alicdn.com/kf/H128bb4d1c77d4f6f9032b934a6a234beD.png)"></i> <span>香港云</span></a> </li> </ul> </div> </div> </div> </div> <div class="col-1-4 sxweb"> <div class="hf-widget hf-widget-2"> <h3 class="hf-widget-title"> <i class="fa fa-tint"></i> <a href="#" target="_blank">热门看点</a> <span>爱学社区精品内容推荐</span></h3> <div class="hf-widget-content"> <div class="no-scroll hf-tags"> <a class="style_orange" href="https://www.xyjwangluo.com/" target="_blank"> <span>小妖精博客</span></a> <a class="" href="#" target="_blank"> <span>教程分享</span></a> <a class="" href="#" target="_blank"> <span>源码分享</span></a> <a class="" href="#" target="_blank"> <span>Android软件</span></a> <a class="" href="#" target="_blank"> <span>新闻资讯</span></a> <a class="" href="#" target="_blank"> <span>线报活动</span></a> <a class="" href="#" target="_blank"> <span>美化代码</span></a> </div> </div> </div> </div> <div class="col-1-4 sxweb"> <div class="hf-widget hf-widget-1 hf-widget-hot-cats"> <h3 class="hf-widget-title"> <i class="fa fa-dropbox"></i> <a href="#" target="_blank">热门专区</a> <span>推荐设计热点</span></h3> <div class="hf-widget-content"> <div class="icon-b"> <ul> <li> <a href="https://www.xyjwangluo.com/" target="_blank"> <i class="fa fa-thumbs-up" aria-hidden="true"></i> <span>每日推荐</span></a> </li> <li> <a href="https://www.xyjwangluo.com/" target="_blank"> <i class="fa fa-cloud-download" aria-hidden="true"></i> <span>软件下载</span></a> </li> <li> <a href="https://www.xyjwangluo.com/" target="_blank"> <i class="fa fa-graduation-cap"></i> <span>源码教程</span></a> </li> <li> <a href="#" target="_blank"> <i class="fa fa-picture-o" aria-hidden="true"></i> <span>福利美图</span></a> </li> </ul> </div> </div> </div> </div> <div class="col-1-4 sxweb"> <div class="hf-widget hf-widget-4"> <h3 class="hf-widget-title"> <i class="fa fa-book"></i> <a href="#" target="_blank">最新活动</a> <span>免费会员享福利</span> </h3> <div class="hf-widget-content"> <div class="scroll-h"> <ul> <li> <h3> <a href="#" target="_blank"> <i class="icon-time"></i> <span>美化服务火热售卖中</span> <em>网站美化</em></a> </h3> </li> <li> <h3> <a href="#" target="_blank"> <i class="icon-time"></i> <span>关于本站学分付费阅读获取内容说明</span> <em>学分说明</em></a> </h3> </li> </ul> </div> </div> </div> </div> </div> </div> </div>
