YoDu魔改版主题v3.1更新 （修复bug）
YoDu魔改版主题v3.1更新：修复了长代码在小分辨率下无法换行问题。针对表格代码做了样式调整。回复可见代码微调。修复了footer元素由于启用了css3的弹性布局，导致tim使用软件内浏览时，其内核过旧不能支持，特重新调整，改为css2特性，取消了footer的背景渐变。字体大小调整。
发布者：木灵鱼儿
木灵鱼儿
HTML
修改Typecho个人设置页面的gravatar头像分辨率
因为找了一个个人非常喜欢的头像，美滋滋...提交到gravatar后，默认获取的是220分辨率的头像，压缩的不能看，加上在群里的“月宅”说可以通过头像链接后面的数字修改后就可以获得高清的了，我一想，好了，既然是通过这个获取的，那么博客本身肯定是有预先设置的，于是我就找啊找，终于找到了。[hide]修改的文件路径在：你安装的博客的目录中--admin--profile.php--有一个地方写着数字220，具体位置可以自己通过查看源代码进行对比！下图我也给你标出来了，改成你想要的分辨率，前提你在gravatar中提交的图片够清晰。[/hide]修改好后保存，然后刷新缓存，享受！
木灵鱼儿
CSS
Typecho表格的创建写法和table的css样式分享
之前就听说Typecho的md编辑器支持表格写法了，这次刚好在写一篇文章的时候用到了，所以顺带写了一个css分享出来，很简单的，有需要的可以复制到自己的css文件中。表格的创建写法是：|th内容|th内容| //内容与内容之间都是用|竖线分割 |---------|---| //这里用来分割表头和tbody |内容1|内容2| //需要几行就这样写几行 效果展示：查看有表格的文章CSS代码：table { width: 100%; border: 1px solid #e1e1e1; border-collapse: col...
木灵鱼儿
JavaScript
DOM操作表格及样式（上）
如果要通过js去创建表格元素并添加一定的内容，可以说会让人头疼死，因为你每个元素和内容都需要一个个的去创建去插入，估计写十行表格的代码就可以让你崩溃，每个tr，td都需要documen.createElement('')来创建，还有caption、thead、tbody、tfoot还有内容，于是乎便有了专门应对表格的一些属性和方法，我们一一来介绍下！首先我们要先知道一点：table、th、tbody这三个是没有可以直接创建的对应属性和方法，只能通过documen.createElement('')来创建，不过好在这三个元素重复率不是很多。table对应的属性和方法：属性或方法说明capt...
木灵鱼儿
JavaScript
利用innerHTML传入重复数据
由于每次使用innerHTML都会创建一个浏览器级别的解析器，但是要是使用innerHTML的量大的话，往往会浪费很多资源，特别是在重复传入数据的时候，所以我们可以先使用一个变量来保存这些数据，最后一口气直接传入，这样只使用了一个解析器，省资源又省心。html部分：\<ul id="box"> </ul>\ //博客直接写ul会空白，被解析到了，所以我在前后加了斜杠，这个斜杠不要管它 这是一个空的ul元素，我们给他传入十个li元素；一般写法：var box = document.getElementById('box...
木灵鱼儿
JavaScript
木灵鱼儿
JavaScript
自定义insertAfter() 在当前元素节点的后面添加新的内容
由于document中并没有insertAfter()这个功能，只有insertBefore()在当前元素节点的前面添加新的内容，在后面添加是没有的，但是我们可以自己做一个有这个功能得函数。首先有几点前提条件：该元素节点后面有其他同级得节点如果没有同级得节点他应该就是最后一个节点由于我们写html时会有换行得操作，导致产生了空白节点，所以我们还需要移除这个空白节点才能正常操作。我们先写一个简单得html代码：<body> /*这是该元素为最后一个节点*/ <div id="box"> <p>1</p> <...
木灵鱼儿
JavaScript
location.serach查询字符串参数
location.serach获取到链接地址中?后包括?的内容!此时，假设我们的地址是:https://www.mulingyuer.com/测试/?id=5&search=ok通过location.serach可以获得?id=5&search=ok这部分内容，如果我要分别拿到里面对应的内容，就需要使用字符操作了。首先，?问好是第一个要被排除的对象，我们可以利用slice、substring、substr三个区域选择符进行操作。slice，好处是负数是通过总字符数+负数得到需要的区域！substring,好处是：当只有一个负数的时候，不裁剪区域，全出输出，当其中一个数为负数的时候，默认识...
木灵鱼儿
JavaScript
木灵鱼儿
JavaScript
木灵鱼儿
JavaScript
关于面向对象判断是否原型属性的疑问
首先我们需要创建一个构建函数，并为它添加一个实例属性（实例就是被运行的函数）。function Box() {}; var box1 = new Box(); box1.name = 'mu'; 每个函数都会有一个原型，原型里的数据是共享的，多个变量box1运行同一个函数Box(),这个Box()函数原型中的数据是共有的，并且引用地址相同。加上就近原则，当实例属性中有对应的属性，会优先调用实例属性，如果没有，就会去原型中查找。那么我们要去判断这个属性是实例中的属性还是原型中的属性，有两个判断语法：hasOwnProperty() / inhasOwnProperty(...
木灵鱼儿
HTML
Phurl短网址生成美化版
在泽泽群有人找我美化一下一个短网址生成的程序，前两天我在改键盘，没来得及弄，昨天搞了一下，感觉还可以，就是nginx环境需要加伪静态才能使用，但是我个人还没到自己写伪静态的地步，所以用了很老的一个伪静态了，这就导致了进入后台时需要写完整的路径名了，这个我们待会再讲。先来点图看看效果：展示网址：点击进入安装方法：将目录内的config.php用编辑器打开，对应填好相对应的账号密码，域名这些就行，具体我都在文件内用中文说明，自行设置好就行将目录内的favicon.ico替换成自己的logo文件，格式名称一致。然后整个上传至服务器内，在面板内设置好网站的一些设置，这些就不细说了，很简单的东西。...
木灵鱼儿
CSS
控制tab的宽度tab-size
上一篇文章我们用渐变背景模拟了斑马纹，这次我们顺带简单了解下如何控制tab的宽度。浏览器默认一个tab是8个字符，这种感人的宽度简直让人吐血，你想想你在编辑器里一个tab才多宽，而且我们有时候经常是三个tab起步啊，这要是在浏览器里显示，简直突破天际，为此css3特意出了一个新属性：tab-size。目前tab-size在日常的浏览器都是支持了，but---除了微软的浏览器，微软的浏览器不知道拖了多少后腿，你想想ie....再到现在的edge，来人，做了他。嗯哼~~~有点扯远了，我们继续。tab-size目前用，建议直接用数字，虽然也能用像素单位这些，但是苹果又不行啊，所以我们还是用数字...
木灵鱼儿
CSS
用渐变来模拟斑马纹
斑马纹应用很广泛，用于表格，代码展示，列表展示等等，一般都是先给每一行加一个block的父元素，然后再用元素选择器:nth-child(odd)和:nth-child(even)来选择奇数元素和偶数元素，这样就会产生一个问题，第一行一般都是标题之类的，这样写会让标题和内容部分相同，于是又只能再加一个选择器:first-child将第一个重置。这样虽然说是可以，但是岂不是很麻烦，需要给每一个子元素加一个block，如果子元素本身就是block那好办，如果不是呢，只是纯文本呢，那不是还要用js去选择，得不偿失，于是我们可以试着用背景层去模拟，然后用em或者rem单位控制大小，这样，既可以自适...
木灵鱼儿
CSS
有趣的hue-rotate滤镜
css3的滤镜真的非常强大，比如这个hue-rotate滤镜，可以让图片的一些颜色变成想要的颜色，当然黑色白色除外，因为这个滤镜的原理就是改变图片的色相，如果你用过ps的话就会知道，再ps里面可以通过改变图片的色相来改变图片的颜色，而且效果很方便，不会有颜色与颜色之前的不自然感。下面我们来看看吧！我门先找一张图片：这张应该是红宝石的壁纸，我们先用ps颜色拾取工具或者红宝石的hsl色环角度。红色hsl为4deg，那么我们试着把他变成紫色的！已知紫色hsl色环值为282deg，我们需要添加多少的角度值才能等于282deg，于是：282-4=278，我们需要添加278deg，于是代码这么写;i...
木灵鱼儿
CSS
CSS3 object-fit/object-position简单了解
从第一次使用yodu的主题，我就很在意他是怎么让首页的文章缩略图居中且填满设置好的大小，而且不会产生形变，然后我f12查看代码的时候看到了这个：object-fit:cover；这个cover很容易理解，和background的cover是一样的，而这个object-fit又是什么意思呢？为此我特意去看了大佬“张鑫旭”的博客，从中获益匪浅！我个人的理解是这样的：首先我们要清楚img他的一些结构原理，为此我就简单画个图方便理解!我们的img是一个元素，img就像是一个div一样，他包裹着里面的图片。而img后面调用的src="xxxx.jpg"就是图片的本体，所以我们理解的时候不要想着图片...
木灵鱼儿
CSS
给伪元素也加上box-shadow
在设置一些tag标签样式的时候，我们一般都是设置为一边箭头的标签样式，这个箭头一般都是使用伪元素before来进行模拟，但是当我们想要给这个标签加上阴影box-shadow的时候，你会发现你的阴影并不能应用的伪元素上。我们先看下具体代码：HTML:<div class="div1">tag</div> CSS：.div1 { display: inline-block; line-height: 20px; background-color: currentcolor; color: #00AAFF; ...
木灵鱼儿
CSS
创建渐变条纹linear-gradient以及一些感悟
渐变条纹linear-gradient一些感悟：条纹背景其实用的还是比较少的，主要是因为色彩的调控，有点喧宾夺主，如果是只是简单的页面，非多内容的，其实也可以考虑用色彩比较淡一些的条纹做为背景，然后内容部分用颜色块去凸显主体，不过个人是没有这个调控能力，等以后有机会再试试吧！先我们来讲讲linear-gradient的代码意思：background: linear-gradient(#58a 50%,#999 70%); 这是一段常见的背景渐变，淡蓝色在上面，灰色在下面。如图：这里的50%和70%就需要特别说明一下，这个百分百并不是指颜色占据的高度或者宽度，而是颜色渐变的起始点、结束点，...
木灵鱼儿
CSS
自定义字体font-face中的font-style、font-weight详解
自定义字体相信大家都知道是font-face，但是自定义下来总是有一大段代码，其中引用字体的我们就不谈了，这个比较简单的，我们谈的是里面经常出现的font-style和font-weight，这两个代表的含义！font-style顾名思义，就是字体的风格，常用的就是斜体（initial），非斜体（normal）。font-weight就是设置字体的字重，也就是粗细，100-900。那么为什么每次自定义字体都会出现这两个呢，而且一般都是设置重置normal，既然都是默认，再写一遍岂不是多余？？？其实不能这么理解，我们应该将其理解为引用的——条件——，并且一般是用于多套字体，一个字体名称的。...
木灵鱼儿
CSS
font-size为0，高度反而增高的原因
不知道大家平时写代码的时候有没有发现一个问题，就是有时候设置某段文字font-size:0；的时候，整行高都会突然变高，如下图。以下是代码：html部分<div class="div1"> <p>x<span>x</span>sjdkdfg奥斯卡了多少卡回复</p> </div> css部分.div1 { width: 500px; line-height: 20px; background: #999; } p { margin: 0; paddi...
两栏自适应布局
两栏自适应布局，顾名思义就是当左边的高度高于右边时，右边会自动补全至其等同于左侧的高度！示意图方法有三种，按原理来算应该只能算两种，为此我们慢慢道来：第一种：margin控制外部大小的方式HTML代码：<div class="div1"> <div class="left"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>...
木灵鱼儿
教程
一段指令教你查看笔记本电池损耗win8-win10
过年回家后，天气特别冷，大概长期属于0℃左右，笔记本前几个月就放家里了，想着反正不久就要回来了，就不带来带去，谁知道这次回来笔记本的电池出问题了，充不满了，无奈做了几次电池校准，也不知道有没有效果，后续我再跟进下这个情况，不过本子也用了这么多年，电池损耗也是一定的，手机都换了一次电池了，更何况笔记本这种凶猛性的呢！索性啊！我就看下电池损耗，于是今天就告诉大家电池损耗怎么查看！不需要任何软件，系统自带即可查看！首先我们调出命令菜单（cmd），快捷键：win+R输入cmd回车，win10用PowerShell也是可以的，调出后直接输入代码：powercfg /batteryreport，然后...
木灵鱼儿
CSS
弹性布局flexbox
父元素设置：display: flex; justify-content: space-around; align-items: center; flex-flow: column wrap;（可选） 子元素设置：flex: 1; （可选） order: 1;（可选） align-self: flex-start;（可选） 解释：display: flex; 设置元素为弹性布局justify-content: space-around; 设置子元素水平对齐方式！（flex-start：起点对齐；flex-end：终点对齐；center：居中对齐；space-between：一个子元素时...
木灵鱼儿
CSS
CSS的简写形式合集
注：| 符号为空格！font：italic（font-style:字体倾斜样式）|small-caps（font-variant:小型大写字母）|bold（font-weight：字体粗细）|12px（font-size：字体大小）/1.5em（line-height：行高）|arial，verdana（font-family：字体）;例：完整写法：font：italic small-caps bold 12px/1.5em arial,verdana;简单写法：font: 12px arial,verdana; [字体大小必须在前面！]简写形式必须要有font-size和font-fa...
这次把主题升级了下，然后哭着改完CSS（多列布局属性）
距离自己上次魔改主题也过去了一段时间，说实话我差不多把自己改的地方都忘了，然后这次脑子一抽就更新了，然后就是666.....从凌晨2点左右就在搞了，各种更新调试，只能怪自己不熟练，找了好多地方调整，然后本来如果是直接在原来的css的属性上改会比较省事，但是发现以后要是再更新，那我不得想死，于是又单独开了一列，用了超多!important属性，然后呕心沥血的改好了，防止自己作死删了修改好的源文件，直接贴上大部分的CSS吧！又需要也可以自己粘贴使用哈哈，不过仅限于YoUDu这个主题。说下心得：本来我是想着既然css3出了一个多列布局的属性，那么不用白不用，就来体验下，发现，这个属性最大的bu...
最近评论