首页
网站文档
素材技术
Typecho
闲言碎语
各类源码
网站源码
闪念笔记
朋友圈
留言板
关于我
赞助榜
更多
恋爱日记
站点导航
精选壁纸
站点统计
测试输出
关键词搜索
搜索
标签搜索
网站美化
网站源码
Joe
css
Typecho
恋爱
api
js
饭后茶余
诗句
ip属地
近期浏览
热门文章
1
Joe主题 给首页和文章页顶部加一个大图
2,235 阅读
2
分享自己搭建的API 头像源丶背景图片丶随机一言
1,656 阅读
3
Xc主题 全量文件 更新历史
1,632 阅读
4
Joe主题 更换评论框样式，填写QQ自动获取昵称邮箱
1,119 阅读
5
干净个人主页html源码
952 阅读
6
Joe主题 标题导航栏合并教程
930 阅读
7
搭建一个属于自己的api随机图教程
842 阅读
8
Emoji 可复制静态表情符号
712 阅读
9
Joe主题修复几个部分字体不渲染的问题
621 阅读
狱长
Xc主题 交流QQ群：
751620634
狱长
昨天 18:57
在线
累计撰写
40
篇文章
累计收到
821
条评论
首页
栏目
网站文档
素材技术
Typecho
闲言碎语
各类源码
网站源码
页面
闪念笔记
朋友圈
留言板
关于我
赞助榜
恋爱日记
站点导航
精选壁纸
站点统计
测试输出
用户登录
登录
注册
“css” 共(6)篇
title标签输出美化
alt和title提示美化，jquery的特效，记录一次美化美化教程效果图： 教程也很简单，创建一个js和一个css引用到网站即可，这里就不教怎么引用了，很多文章都写过教程第一步 创建一个js文件 把以下内容放进去var sweetTitles = { x: 10, y: 20, tipElements: "a,span,img,div ", noTitle: false, init: function() { var b = this.noTitle; $(this.tipElements).each(function() { $(this).mouseover(function(e) { if (b) { isTitle = true } else { isTitle = $.trim(this.title) != '' } if (isTitle) { this.myTitle = this.title; this.title = ""; var a = "<div class='Xc_title'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='Xc_title_inside'>" + this.myTitle + "</div></div>"; $('body').append(a); $('.Xc_title').css({ "top": (e.pageY + 20) + "px", "left": (e.pageX - 20) + "px" }).show('fast') } }).mouseout(function() { if (this.myTitle != null) { this.title = this.myTitle; $('.Xc_title').remove() } }).mousemove(function(e) { $('.Xc_title').css({ "top": (e.pageY + 20) + "px", "left": (e.pageX - 20) + "px" }) }) }) } }; $(function() { sweetTitles.init() });第二步 创建一个css文件 把以下内容放进去.Xc_title{font-size:13px;position:absolute;padding:10px;z-index:100000;opacity:.8;font-family:Microsoft Yahei} .tipsy-arrow{position:absolute;width:0;height:0;line-height:0;border:0px dashed #000;top:4px;left:50%;margin-left:-5px;border-bottom-style:solid;border-top:0;border-left-color:transparent;border-right-color:transparent} .tipsy-arrow-n{border-bottom-color:#232323e0} .Xc_title_inside{background-color:#000000e3;color:#FFF;max-width:350px;padding:8px 8px 8px 8px;border-radius: 10px;text-align:center;border-radius:5px}
2022年12月29日
162
5
4
给网站加一个背景颜色渐变效果
效果图 可以在任意网站使用，这里就以Joe主题做教程以下代码加入到全局设置-自定义CSS里即可，180是角度，上下渐变，或者左右渐变自己调body::before { background: linear-gradient(180deg, #fed6e3, #c0efec) ; }方法二：放在header 或者footer，或者后台的自定义css填写框里<style>body::before { background: linear-gradient(180deg, #fed6e3, #c0efec) ; }</style>
2022年11月28日
316
9
2
网站底部自定义按钮美化
网站底部自定义按钮美化效果如图 第一步 后台添加自定义CSS样式代码 :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; } 第二步网站底部自定义链接,添加以下代码<!--网站底部自定义链接 -开始--> <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> <!--网站底部自定义链接 -结束-->
2022年07月20日
414
0
4
Joe主题修复几个部分字体不渲染的问题
Joe主题修复一大部分地方字体不渲染的问题修复前提：以下方法基本可以解决所有的部分字体不渲染的问题，当然这个前提是你后台已经设置了自定义字体才会生效。友情提示：如果还有其他地方字体无法渲染的问题，并且此方法无法解决 或者只想渲染单个部分字体的话可以在下方留言。 目前发现字体无法渲染的地方有{timeline}{timeline-item color="#ed4014"}评论框{/timeline-item}{timeline-item color="#ed4014"}代码块 {/timeline-item}{timeline-item color="#ed4014"}行内代码 {/timeline-item}{timeline-item color="#ed4014"}首页搜索框{/timeline-item}{/timeline} 修复方法修改CSS文件 joe.normalize.min.css 文件目录 Joe主题文件/assets/css/joe.normalize.min.css 把以下代码加入到最前面的 *{ 后面，也就是{的后面font-family: 'Joe Font';CSS修改完成后的样子*{font-family: 'Joe Font';
2022年07月07日
621
21
2
Joe主题修复友情链接宽度不整齐的问题
Joe修复友情链接的网站介绍太长导致宽度不整齐的问题，如下图修复方法修改CSS文件 joe.global.min.css 文件目录： Joe主题文件/assets/css/joe.global.min.css 搜索关键词 desc{margin-right:10px} 把以下代码加入到关键词里的10px后面;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;CSS修改完成后的样子desc{margin-right:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}修改完后网站介绍太长会直接以...的方式省略掉，如下图
2022年06月27日
381
3
7
CSS代码 给网站修改自定义字体
操作方法把以下代码添加到CSS当中即可完成网页字体替换 @font-face { font-family: "font-zt"; src: url("这里填入你的字体链接地址"); } div { font-family: font-zt ; }
2022年06月25日
380
5
6
