标签代码下的文章

2020-10-22

[CSS]背景图片中平铺与拉伸在某业务场景下，需要支持背景图的平铺和拉伸，那么在CSS中的这俩属性表现有何区分关系到是否符合业务表现，因此有必要清晰知道其差别。background-size在CSS中有background-size属性，平铺与拉伸可以通过下面两个值实现：平铺：cover 拉伸：100% 100% 表现如何设置的背景图原图比例表现如下：比较的代码实现如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景图长宽比例问题探索</title> <style type="text/css"> *{ margin: 0; padding: 0; border: 0; } .box { width: 400px; height: 300px; background-color: aquamarine; background-image: url(http://p0.qhimg.com/bdr/__85/t01cf4d52137a580601.jpg); background-size: cover; background-position: center; } .box2 { width: 400px; height: 300px; background-color: red; background-image: url(http://p0.qhimg.com/bdr/__85/t01cf4d52137a580601.jpg); background-size: 100% 100%; background-position: center; } </style> </head> <body> <div class="box"></div> <div 50px;"></div> <div class="box2"></div> </body> </html>其浏览器中表现如下图：可以发现，拉伸是根据容器的宽高来设置图片的宽高，能完整展示整个图片内容，但图像内容发生了变形而平铺比较特殊，完全展示了图片的高度，但是左右两边被裁掉了一部分，无法展示完整的图片，但图片的宽高比例没变，因此图像不存在变形将宽高值互换：.box { width: 300px; height: 400px; background-color: aquamarine; background-image: url(http://p0.qhimg.com/bdr/__85/t01cf4d52137a580601.jpg); background-size: cover; background-position: center; } .box2 { width: 300px; height: 400px; background-color: red; background-image: url(http://p0.qhimg.com/bdr/__85/t01cf4d52137a580601.jpg); background-size: 100% 100%; background-position: center; }其表现如下：总结相较于平铺属性，拉伸的效果非常好理解。平铺，按照我个人理解，平铺的渲染规则是，以图片的“短边”为基准，对图片进行等比例缩放，缩放后的图片“短边”长度等于“短边”所对应容器“边”的长度，“长边”缩放后多余的部分被裁剪。

2020年10月22日
243 阅读
0 评论
0 点赞

2020-08-10

emlog文章新窗口打开方法 emlog首页进入文章页面都是在一个页面，今天分享一下新窗口打开方法。使用方法：1、打开模版文件中的log_list.php 找到：<a href="<?php echo $value['log_url']; ?>2、修改成下面代码：<a href="<?php echo $value['log_url']; ?>"target="_blank"

2020年08月10日
243 阅读
0 评论
0 点赞

2020-08-10

取消Emlog编辑文章时自动保存功能 Emlog自带的保存功能，不仅消耗服务器性能，还有可能当你在发布文章的时候，和自动保存冲突了，然后你就会发现你发布的文章到草稿箱去了，当然这功能有利也有弊。为了解决这个问题，研究了Emlog后台视图模板中的代码，发现只需要简单注释一行代码就搞定了，再也不会因自动保存带来烦恼。打开“admin\views\write.php”文件第140行代码如下：修改后的代码如下：<script> loadEditor('content'); loadEditor('excerpt'); $("#menu_wt").addClass('active'); $("#advset").css('display', $.cookie('em_advset') ? $.cookie('em_advset') : ''); $("#alias").keyup(function () { checkalias(); }); // setTimeout("autosave(0)", 60000); $("#menu_wt").addClass('active'); </script>

2020年08月10日
190 阅读
0 评论
0 点赞

2020-08-10

防扒站的代码这个代码能够直接保护整个站，而不再是单个页面，直接把代码放到自己的网站上。如果是博客建议放到header，如果是单页面直接放到首页即可，也可以单独建一个js文件把代码放入进去，然后引入js文件就行了。代码如下：var a = 'retrtrfdcfvvvv'; var ym = window.location; var ym2 = '这里添加你需要保护的网站域名例如123.com不加http'; var ym3 = String(ym); function suan(a){ var re = a.substring(0,2); var tr = a.substring(2,4); var tr2 = a.substring(4,6); var fd = a.substring(6,8); var cf = a.substring(8,10); var vv = a.substring(10,12); var vv2 = a.substring(12,14); re = 'h'; tr = 't'; tr2 ='t'; fd = 'p'; cf = ':'; vv = '/'; vv2 = '/'; var p = re+tr+tr2+fd+cf+vv+vv2; return p; } if (ym3.indexOf(ym2) == -1 ) { alert(ym2); // var av = ym3; var b = suan(a) + '这里添加如果域名检测失败需要跳转的地址例如123.com不加http' + '/'; window.location = b; }

2020年08月10日
216 阅读
0 评论
0 点赞

2020-07-20

Emlog评论外链跳转代码以及方法看到很多博客都使用了PHP跳转技术进行外链页面的跳转，减少网站权重的流失。1、新建一个go.php文件，在go.php里面输入以下代码（记得修改代码中的http://www.xxx.com/为你自己的域名），然后上传到网站根目录下。<?php $t_url=$_GET['url']; if(!empty($t_url)) { preg_match('/(http|https):\/\//',$t_url,$matches); if($matches){ $url=$t_url; $title='页面跳转中,请稍候...'; } else { preg_match('/\./i',$t_url,$matche); if($matche){ $url='http://'.$t_url; $title='页面跳转中,请稍候...'; } else { $url='http://www.xxx.com/'; $title='参数错误，正在返回首页...'; } } } else { $title='参数缺失，正在返回首页...'; $url='http://www.xxx.com/'; } ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"> <title><?php echo $title;?></title> <style> body{background:#000}.loading{-webkit-animation:fadein 2s;-moz-animation:fadein 2s;-o-animation:fadein 2s;animation:fadein 2s}@-moz-keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@-o-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}.spinner-wrapper{position:absolute;top:0;left:0;z-index:300;height:100%;min-width:100%;min-height:100%;background:rgba(255,255,255,0.93)}.spinner-text{position:absolute;top:50%;left:50%;margin-left:-90px;margin-top: 2px;color:#BBB;letter-spacing:1px;font-weight:700;font-size:36px;font-family:Arial}.spinner{position:absolute;top:50%;left:50%;display:block;margin-left:-160px;width:1px;height:1px;border:25px solid rgba(255,0,0,1);-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;border-left-color:transparent;border-right-color:transparent;-webkit-animation:spin 1.5s infinite;-moz-animation:spin 1.5s infinite;animation:spin 1.5s infinite}@-webkit-keyframes spin{0%,100%{-webkit-transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(720deg) scale(0.6)}}@-moz-keyframes spin{0%,100%{-moz-transform:rotate(0deg) scale(1)}50%{-moz-transform:rotate(720deg) scale(0.6)}}@-o-keyframes spin{0%,100%{-o-transform:rotate(0deg) scale(1)}50%{-o-transform:rotate(720deg) scale(0.6)}}@keyframes spin{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(720deg) scale(0.6)}} </style> </head> <body> <div class="loading"> <div class="spinner-wrapper"> <span class="spinner-text">页面跳转中,请稍候...</span> <span class="spinner"></span> </div> </div> </body> </html>2、打开模板的module.php文件，找到以下代码：<a href="'.$comment['url'].'" target="_blank">更改为：<a href="/go.php?url='.$comment['url'].'" target="_blank">

2020年07月20日
217 阅读
0 评论
0 点赞

2020-05-09

简单的一段css代码让全站变灰将下面代码直接放人<head></head>之间即可。<style> html{ filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:grayscale(100%); filter:gray; } </style>

2020年05月09日
275 阅读
0 评论
0 点赞

2019-12-19

2019年12月19日
251 阅读
0 评论
0 点赞

2019-12-17

实现Emlog评论Gravatar头像缓存功能在安装目录下面建立avatar文件夹，设置其权限为可写 (777)。修改 include\lib\function.base.php 文件，找到： /** * 获取Gravatar头像 * http://en.gravatar.com/site/implement/images/ * @param $email * @param $s size * @param $d default avatar * @param $g */ function getGravatar($email, $s = 40, $d = 'mm', $g = 'g') { $hash = md5($email); $avatar = "http://www.gravatar.com/avatar/$hash?s=$s&d=$d&r=$g"; return $avatar; }更改为以下代码：//获取Gravatar头像 function getGravatar($email, $s=40, $d='monsterid', $r='g') { $f = md5($email); $a = BLOG_URL.'avatar/'.$f.'.jpg'; $e = EMLOG_ROOT.'/avatar/'.$f.'.jpg'; $t = 1296000; //15天，单位：秒 if (empty($d)) $d = BLOG_URL.'avatar/default.jpg'; if (!is_file($e) || (time() - filemtime($e)) > $t ) { //当头像不存在或者超过15天才更新 $g = sprintf("http://cn.gravatar.com",(hexdec($f{0})%2)).'/avatar/'.$f.'?s=40&d='.$d.'&r='.$r; copy($g,$e); $a=$g; //新头像copy时, 取gravatar显示 } if (filesize($e) < 500) copy($d,$e); return $a; }对于没有设置头像的邮箱，默认显示的头像如下：$d='mm' - 神秘人 (灰色头像)$d='monsterid' - 小怪物 (自动生成)$d='identicon' - 抽象图形 (自动生成)$d='wavatar' - W-avatar (自动生成)$d='非空格符' - Gravatar (大写 “G”)注意：$d 数据中的四个关键字只能是小写，不然会被视为其它的非空格符；另外，$d 的数据中也不能出现空格符，否则该函数将不能正常调用。

2019年12月17日
263 阅读
0 评论
0 点赞