data-toggle="tooltip" data-placement="left" data-toggle="tooltip" data-placement="top" /bottom/right 工具提示...a href="#" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip 工具提示
前言 想着美化下自己的个人部落格,那就先从鼠标样式开始美化吧,默认的鼠标样式有点单调,那应该如何美化呢?...鼠标样式 1、首先下载鼠标样式(博客系统中一般用的都是系统默认的鼠标和点击链接的样式,我们点击访问致美化提供的鼠标样式https://zhutix.com/tag/cursors/) 教学内容 PS:...有能力的也可以自己PS两张鼠标样式 2、把喜欢的鼠标样式下载到本地,然后上传到网站目录下,比如图片存放目录或者主题images的文件夹中(鼠标样式存储样式可以随意,不限制) 3、站长这边以本站博客为例,...进入博客后台主题设置 >> 首页设置 >> 自定义CSS >> 填写如下CSS(其他博客或者网站自行修改style.css样式表即可) CSS /*鼠标样式开始*/ /*鼠标指针样式*/ body{cursor.../link.cur),pointer;} /*鼠标样式结束*/ 注意鼠标样式路径修改为刚刚上传的存放目录路径 4、清空浏览器缓存(如有CDN,则更新CDNstyle.css文件缓存 5、效果预览
使用url,可自定义鼠标图标。...cursor: url('https://blog-static.cnblogs.com/files/lucas--liu/cat6.ico'), default; 自定义图标注意点 尺寸最好选择不大于于
CSS Sprites 样式生成工具 由 Ghostzhang 发表于 2019-02-17 22:47 2009年写的一个小工具,当时只是为了解决自己每次对雪碧图做修改时总得去计算位置,要么就是得打开...现在已经各种框架、自动打包工具处理图片,本以为已经没人用了,没想到今天有人加我QQ反馈说这个工具今天突然就报错了。 看了下他给的截图,跟我之前遇到的情况很像,猜想大概率是证书过期了。...bg2css。
默认样式: 自定义样式: CSS 代码: ol { counter-reset: li; // 创建计数器 } ol li { position: relative; padding-left...li; // 递增计数器 position: absolute; left: 0; font-size: 28px; color: rgba(0, 0, 0, .8); } 首发自:css...自定义 ol/li 序号样式 - 小鑫の随笔
默认样式: [image.png] 自定义样式: [image.png] ol { counter-reset: li; // 创建计数器 } ol li { position: relative
看到了老师的博客井井有条的栏目,忍不住就修改了下自己的小站 因为别人的友情链接模板样式都是针对性的对于他们的主题使用的,自己搜了一下插件商店并没有现成的插件,只有自己写一个友情连接的页面样式,但是当前整站使用的是一个整体主题...在编辑页面栏目里找到新建图片栏目 选中栏目进行html编辑 在html编辑里插入自定义的class类名 这里就可以写入自定义的css类名 栏目可以保存为重复使用,方便下次添加直接调用。...然后样式内容在 可重用模块 简易效果 完成后就可以进行友情链接的编辑了。见效果。虽然很简单,但是找到了可以自定义样式的方法,后期有闲心就可以继续美化站点主题了。
在Hexo博客中,如果使用 Fluid 主题,经常需要修改网页中的样式,为了无侵入地修改CSS样式可以使用 Fluid 自定义 CSS样式的功能,本文记录使用方法。...使用方法 创建相对于 Hexo 根目录 source 文件夹创建 css 文件 然后在主题配置文件中加入该文件相对路径即可 custom_css: - /css/custom.css - //at.alicdn.com.../t/font_1736178_ijqayz9ro8k.css 示例 我想要修改目录的文字颜色,那么我需要重新定义 .tocbot-link 的样式 image.png 在 hexo 根目录的 source.../css 文件夹建立 custom.css 文件,写入: .tocbot-link { color: #d8d9da; } 重新生成 hexo 文件 在主题外部通过自定义css 文件实现了对主题...css 的修改 参考资料 https://hexo.fluid-dev.com/docs/guide/#自定义-js-css-html
各种各样的鼠标样式,对于经常使用电脑的人而言一定不会生疏。当鼠标移动到不同的地方时,当鼠标执行不同的功能时,鼠标的外形都会发生变化。...实际上,用css可以方便地定义许多种鼠标外形。下面小编就为大家介绍一下怎样利用CSS改变鼠标的样式。 用CSS改变鼠标的样式,我们使用cursor属性,现在就让我们了解一下这个属性的相关内容。...三、cursor写法 cursor写法非常简单 如果你想设置鼠标移动到html p对象时鼠标变为文本选择样式,只需这样写: p{cursor:text;} 如果你想设置设置鼠标移动到a超链接对象时鼠标变为手指形状...但在实际布局时,应注意不要滥用光标并尽量减少使用自定义图片作为鼠标样式,从而避免网页给人一种过于复杂不符合用户体验的感觉。
原文链接: http://davidwalsh.name/css-custom-cursor Demo地址: http://davidwalsh.name/demo/css-custom-cursor.php...CometCursor非常强悍,主要用来创建和加载自定义鼠标光标样式。...CSS代码 CSS中的 cursor 属性可以用逗号分隔指定一系列的光标项,可以用 url() 来自定义光标的图案: body { cursor: url('some-cursor.ico'),...default; } 在实际应用中, 最好在后面加上后备的原生光标,如 default, 这和设置字体( font-family)样式是一样的道理。...不要犹豫了,在重要的地方加上自定义指针图标吧. 就如在看相册预览时的放大(+)和缩小(-)按钮,你肯定想做得与众不同.
="viewport" content="width=device-width, initial-scale=1.0"> css...Document Haihong Pro CSS....btn:active{ top: 2px; } emmm,就是产生一个点击按钮的动态效果(点击一下,动一下),具体可以查看css :active的作用,这里就不多说了。
标签的伪类 上下两条线利用span的伪类::before/::after实现,原理类似左右两边的直线 其实与上一篇文章实现的原理是一样的,只是线条的位置和方向有所变化,其他基本没有什么变化「HTML+CSS...」--自定义按钮样式【001】 Demo代码 HTML css...Document Haihong Pro CSS...注:这里使用了红色背景,以便观察 结语 学习来源: https://codepen.io/yuhomyan/pen/OJMejWJ css只会一点点,学习之余从喜欢看一些大神级别的css效果展示,
CSS用于修饰网页样式,但是,如果希望CSS修饰的样式起作用,就必须在html档中引入CSS样式表。引入样式表的常用方式有三种,即行内式、内嵌式、外链式,具体介绍如下。...通常CSS的书写位置是在 头部标记中,行内式却是写在根标记中,例如下面的示例代码,即为行内式CS样式的写法。...使用CSS行内式修饰一级标题的字体大小和颜色 在上述代码中,使用 标记的style属性设置行内式CSS样式,用来修饰一级标题的字体大小和颜色。效果如下图所示。...上述语法中, 3.外链式 外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过标记将外部样式表文件链接到HTML文档中,其基本语法格式如下: css文件的路径...外链式是使用频率最高是最实用的CSS样式表,因为它将HTML代码与CSS代码分离为两个或多个文件,实现了将结构和样式完全分离,使得网页的前期制作和后期维护都十分方便。
本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的滚动条。...0.需求 有的时候我们不想使用浏览器默认的滚动条样式,因为不够定制化和美观。那么如何自定义滚动条的样式呢?下面一起来看看吧。...1 基础知识 1.1 Webkit内核的css滚动条选择器 ::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式 属性: ::-webkit-scrollbar — 整个滚动条...1.2 IE自定义滚动条样式 可自定义的样式比较少,只能控制滚动条各个部分显示的颜色,定制性较低。...2.2 IE自定义滚动条样式 <!
接上一篇,有的时候在项目里面会使用到滚动条 但是浏览器默认的滚动条的样式不怎么好看 这个时候需要进行一些处理 一般用到两种 1:隐藏滚动条,但是可以支持滚动的方法 ::-webkit-scrollbar...{display:none} 示例: https://www.jianshu.com/p/9efdb18d92a6 2:自定义滚动条样式 .healthName::-webkit-scrollbar...{ /*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/...父级元素中的内容不换行 */ } .healthName::-webkit-scrollbar { /*滚动条整体样式
谷歌官方提供了TabLayout,但是我们发现很多项目并不愿意使用,主要原因就是样式处理不够灵活。 当然TabLayout可以自己实现TabItem,这样就可以满足大部分需求。...但是其实使用默认的TabItem也可以实现很多样式,我们可以使用一些巧妙的方法来达到我们需要的效果,比如: 下面我们就看如何一步步实现上面的效果 改变字体颜色、大小 这个很简单,xml中直接设置即可:...这也是很多人需要自定义TabItem或者完全自己实现tab的原因。其实我们可以通过一个巧妙的简单方法去实现。...onTabReselected(TabLayout.Tab tab) { } }); 在这里我们可以得到Tab对象,它并不是一个view,只是可以设置text,icon等,无法改变ui样式
WordPress 中的登录页面wp-login.php 的默认样式是如此简陋,如果你有兴趣想自定义一下样式,可以参考以下的例子来进行。...以下的代码将通过添加过滤器来实现自定义logo 图标、自定义链接样式、按钮样式。相信你也知道,代码一如既往放在主题的functions.php 文件下。 代码来源:点击查看;感谢原作者。...自定义logo 图片 function wptutsplus_login_logo() { ?...> 路径的代码修改请参考《WordPress 路径相关函数总结(二):主题路径相关函数》 logo 的自定义样式 function wptutsplus_login_logo() { ?...> 链接样式 function wptutsplus_login_logo() { ?
="viewport" content="width=device-width, initial-scale=1.0"> css...span> Haihong Pro CSS...注: 这里将颜色改为红色,线条宽度为20px,便于观察 这里说的初始位置是指动画开始时的初始位置 以一条线条(第一条)的动画为例 其css设置为:绝对定位 position:absolute top=0...结语 学习来源: https://codepen.io/bhadupranjal/pen/vYLZYqQ css只会一点点,学习之余从喜欢看一些大神级别的css效果展示,根据源码一点一点学习知识点
="viewport" content="width=device-width, initial-scale=1.0"> css... Haihong Pro CSS...利用CSS 中的 transition 属性,在鼠标停留(hover)在其上时,将其宽度修改为100%, 就可以实现延展效果了 // 鼠标停留在上方时,宽度变成100% .btn:hover::before...不了解css transition的小伙伴可以查看: transition简介:https://www.w3school.com.cn/cssref/pr_transition.asp 一个before...只会一点点,学习之余从喜欢看一些大神级别的css效果展示,根据源码一点一点学习知识点,文中有不对的地方,欢迎指出~
前几天闲来无事,然后就去找了一下discuz论坛的漏洞,然后还真就找到了,在顺便的就写成了个软件,再就顺势的水一篇 下面这是事件起因 这个漏洞对网站并没有太大的危害,仅只能自定义个人空间的css样式...软件效果即可以自定义discuz个人空间的装扮的css样式,丰富美化个人空间,让其不再单调。 测试discuz版本X3.4,其他版本自测。...仅测试了全球主机交流论坛(站长求放过),同版本discuz理论通用 未开通个人空间的论坛不可用 自定义css不建议过多且建议压缩成一行,以免导致失败 协议头正常情况下,理论可以不用修改...如下图所示 第一种方法中的开发人员工具在早期的博文中也有使用过,但没有讲到如何获取cookie。...下载 下面这个下载样式已经好几年没用过了,今天终于重出江湖了 下载地址: 文件名称:discuz个人空间自定义css 文件大小:2.92M解压密码:PMyq 更新日期:2020
领取专属 10元无门槛券
手把手带您无忧上云