搭建动态博客的初衷就是想随时随地，只要一个浏览器，就能更新博客。那么就需要一个后台来管理文章，包含文章编辑器，和各种表单控件。...使用方法非常简单，引入 CSS, Javascript 文件后，只需要一句话就搞定了： Html var simplemde = new SimpleMDE({ element: document.getElementById...针对以上两点开始我们的定制。
页面定制CSS代码 博客侧边栏公告 页首Html代码 页脚Html代码 （2）页面定制CSS代码 不必添加内容，但是需要勾选 禁用模板默认CSS。 （3）博客侧边栏公告 添加以下代码： 定制博客园 CSS 的原理 为了帮助理解，说明这些输入框的作用时，我都截取了浏览器开发者工具的截图。 说明 市场上流行的浏览器基本上都支持开发者工具，一般快捷键为 F12。...页面定制CSS代码 在这里添加的 css 代码会被博客园添加到一个临时 css 文件中，并用于渲染你的博客页面。...注意 如果勾选 禁用模板默认CSS ，则你选中的博客皮肤的 css 效果将失效。 博客侧边栏公告 在这里添加代码会被嵌入到博客园页面的 sideBar 下。...另外，需要将博客管理后台的主标题、子标题清空。 文章内容样式定制 有关文章内容的样式定制，我都写入了 cnblog.js 和 cnblog.css。当然，为了提高访问速度，这两个文件被我压缩了。
页面定制CSS代码 博客侧边栏公告 页首Html代码 页脚Html代码 （2）页面定制CSS代码 不必添加内容，但是需要勾选 禁用模板默认CSS。 （3）博客侧边栏公告 添加以下代码： 定制博客园 CSS 的原理 为了帮助理解，说明这些输入框的作用时，我都截取了浏览器开发者工具的截图。 说明 市场上流行的浏览器基本上都支持开发者工具，一般快捷键为 F12。...页面定制CSS代码 在这里添加的 css 代码会被博客园添加到一个临时 css 文件中，并用于渲染你的博客页面。 ?...另外，需要将博客管理后台的主标题、子标题清空。 ? 文章内容样式定制 有关文章内容的样式定制，我都写入了 cnblog.js 和 cnblog.css。当然，为了提高访问速度，这两个文件被我压缩了。...如果想在我的源码基础上作一些修改，可以在这里访问源码： cnblog.js cnblog.css 带头像的评论栏 博客园的评论栏默认不显示用户头像，这样显得非常单调。所以我添加了一段定制代码。
本文链接：https://blog.csdn.net/shiliang97/article/details/103301032 很久不用博客园了，博客园是我最早开始写博客的平台https://www.cnblogs.com.../hx97/，忽然想继续在博客园上写一些文章，但是博客园的皮肤不是特别喜欢了，（挺喜欢的，但是不是特别喜欢，我觉得换的好看一点点会让我更想写下去。）...博客更换前 ? ? 更换成Blibili样式，参考教程https://www.cnblogs.com/gshang/p/11869120.html 最后面是我的教程，也可以直接看原教程。...展示下我的博客效果 ? ? 只需要后台找到设置，然后换成Custom皮肤 ?...然后插入一行代码即可（引用人家写好的css） @import url(https://blog-static.cnblogs.com/files/gshang/gshang.2019.11.19.1.css
本文总结了如何美化博客园中文章的部分显示样式。美化文章标题的显示样式、增添LaTex数学公式的显示、目录索引的显示、添加文章末尾的固定信息。...0 获取权限 首先，在自定一个博客样式之前，我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。...【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟，再刷新一下，页面就会显示支持js代码 。...1 美化文章标题 在【博客设置】页面中的【页面定制css代码】框中输入下面的css代码即可完成文章标题的美化的。...important; padding: 5px 0 5px 10px; text-shadow: 2px 2px 3px #222222; } 2 加一个可爱的返回顶部功能 css代码
温馨提示：因微信中外链都无法点击，请通过文末的 “阅读原文” 到技术博客中完整查阅版； 1、起因 因为项目的缘故，Antd 的样式 CSS 文件通过 link 标签引入，而该项目又要求自定义 Antd...我首先想到的能否直接去官网能否直接定制并下载 CSS 文件。 然而答案是 否定 的。...作为业界优秀的开源项目，Antd 提供了自定义定制主题样式的方法（在官网 定制主题 就有详细的说明）然而 Antd 却只提供了 LESS 样式定制的功能，并没有提供现成的生成 CSS 样式文件定制并下载的功能...利用关键字 antd theme css custom 搜索一番，还真找到几篇有用的文章（见文末参考文档）。随后经过本人的总结和实践，就有了本文介绍的定制生成 Antd 主题 CSS 样式文件的方法。...4、小结 从上可看到整个过程一次就能上手，后续想要生成另外一份定制的 CSS 文件就更简单了： 修改自定义的 my-theme.less 文件中的样式变量 执行 lessc --js my-theme.less
但期间有些博客主题中没有合适的地方放热力图，就放弃了。 最近博客热力图又有热度了，刚好我这个主题可以放在首页，又折腾上了。...从 Koobai 大佬发布《 HUGO 折腾随记之热力图 / 段落导航》时，我就说要折腾一个纯 CSS 版的热力图，一直推迟到今天才完成。...我的博客中还渲染了 count post title date 4 数据用于 Tooltip。...TailwindCSS，为了写文章，已转成传统 CSS 样式，相当于用 CSS 重新实现了一遍。...# CSS 样式仿照的是 GitHub 的配色，Dark mode 是 GitHub Dimmed 的配色。
最近有几个博客园的朋友们私信问我怎么设置代码颜色字体的，干脆整理一下。...博客园写博客的TinyMCE编辑器下添加代码有两种方式，我平时用的是第二种，就是代码背景是一行灰一行白的，行号和代码之间有一条绿色竖线的这种。...important; } 然后，它的颜色是可以通过css定制的，下面的配色是按我的喜好配的： .syntaxhighlighter .preprocessor {/*头文件、预编译部分*/...important; } ---- 2017.4.30更新：博客园设置Google-code-prettify渲染代码高亮
主题定制 Varlet是通过css变量来组织样式的，什么是css变量呢，其实很简单，首先声明自定义的css属性，随便声明在哪个元素上都可以，不过只有该元素的后代才能使用，所以如果要声明全局所有元素都能使用的话...函数调用即可： div { background-color: var(--main-bg-color); } 只要更改了--main-bg-color属性的值，所有使用该样式变量的地方都会更新，所以主题定制靠的就是这个...组件式调用 组件式调用可以有范围性的定制组件样式，避免全局污染，使用示例： import { ref, reactive } from 'vue' const state...变量设置到该div上，这样这些css变量只会影响它的子孙元素。...变量，其实就是内置了一套暗黑模式的css变量： 总结 可以发现使用css变量来实现主题定制和暗黑模式是非常简单的，兼容性也非常好，各位如果有涉及到换肤的需求都可以优先考虑使用。
我们玩独立博客的，都会有一个关于或发展历程的页面，专门用来记录我们折腾博客的一些重大事情。如果用时光轴来记录这些重大事情，可以让用户更加直观地看到我们的发展历程，这样对用户体验应该是有好处的。...在我们所使用的 WordPress 主题的 style.css 文件后面添加以下代码： /* 站点动态时间轴 */ #teamnewslist ol{list-style:none;margin-left...2、由于这个时光轴仅仅是通过 CSS 来实现，所以在编辑时光轴记录的时候一定要严格按照相应的格式编写才行。...3、同样是因为时光轴是通过 CSS 来实现，所以任何博客网站，包括 WordPress、zblog 等程序建立的博客网站都可以按这个方法成功添加时光轴记录。 沈唁志|一个PHPer的成长之路！...原创文章采用CC BY-NC-SA 4.0协议进行许可，转载请注明：转载自：纯CSS为博客网站添加时光轴记录
对于原主题中想要取消的css属性，使用inherit. 响应式 当屏幕宽度不同时，隐藏部分元素。...ease-in-out; border: 0; border-bottom: 1px solid #fff; color: #fff; width: 5pc; } 动画 css3
我们定制镜像得把这两种都包含进去。 2.定制Centos redhat/oel同样适用。...删除检查选项的默认（不删除的话，就不得行，只能有一个默认，当然你手选也行，但就没得定制镜像的意义了撒） 2.1.4 配置ks.cfg（不会的可以用图形化的： system-config-kickstart...（可加入定制镜像）： 主要设置的是PS1环境变量和一些其它操作，我觉得太麻烦就打成rpm包了。...='\t [\[\e[31;40m\]\u\[\e[0m\]@\h \[\e[36;40m\]\W\[\e[0m\]]\$' 2020-09-20_175243.png 5.升级openssh（可加入定制镜像...2020-09-20_175745.png 2020-09-20_182448.png 6.定制yum源（附加） createrepo 略....
最近有网友跟我反馈，想要一个logo扫光的特效，第一款主题梦想家就有这个特效，不过后期也有人反馈说太卡，使用主题的时候CPU就爆了，好吧，那我就撤了，把相关的特效删除了没在跟紧，记得之前张戈在博客中有谈到过这个事情...我就想着为什么有些人会卡有些人不卡呢，服务器配置太低，但是一个css而已的，应该占不上太多的资源吧，抽空把css的logo扫光特效优化下，在主题模板中也用上了最新的logo扫光，当然也一定是加上了开关，...rel="home"> css
昨天在无主题博客看到他分享了这个功能的代码之后，觉得可以试试。...代码保存为 hi.css 上传到网站即可，然后记住这个 css 文件的 http 路径，后面的 js 中需要填写。...③、页面 JS 代码 /* 定义hi.css */ var hicss="此处请填写hi.css的地址，比如http://zhangge.net...onclick="hig();" ondblclick="location.reload(true);">点我嗨一下 将以上代码添加到网站的合适位置即可，样式可以进一步 DIY 一下，比如张戈博客是弄了一个图片启动按钮...三、文件下载 为了方便部署，张戈特意打包了所有代码和文件，不过要记得修改代码中的 CSS 和歌曲地址哦！
可是SwipeRefreshLayout只支持下拉刷新，没有上拉加载更多，这样是没办法满足我们的需要的，所以本文就对它进行一下定制，加上下拉刷新。 首先贴用法： xml: <?...import android.widget.ListView; import android.widget.TextView; import com.utilslibrary.R; /** * 定制
过程记录 今天为博客申请了一个SSL证书，安装完成以后开启了强制HTTPS，然后在博客后台设置-基本-站点地址 把原先的http地址改为了https。此时一切都还正常。...然后我又把SSL证书部署取消了，结果在http下访问出问题，博客无法加载任何css样式和js！...如图： 失去css和js就是这么丑 错误原因 如上所述，css与js无法加载，F12调出调试发现，竟然是因为所有css和js的路径都带https！...因为把服务器SSL证书取消部署以后，忘记在博客后台改站点地址了。...Error:总结：设置-基本-站点地址选项和博客前台css、js以及文章图片路径相关联，错误设置会导致无法加载样式和文章图片。
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。...网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。...其中： （1）html文件包含：其中index.html是首页、其他html为二级页面； （2） css文件包含：css全部页面样式,文字滚动, 图片放大等； （3） js文件包含：js实现动态轮播特效...DOCTYPE html> 博客世界 css/style.css" /> <div
css样式相关小知识 文字超出一行显示省略号 overflow: hidden; /*自动隐藏文字*/ text-overflow: ellipsis; /*文字隐藏后添加省略号*/ white-space...类选择器样式 > 元素选择器样式 过渡样式 transition: property duration timing-function delay; transition-property:指定过渡的css
技术栈 这个后台模板中，用到了如下的框架或库： Vite Pinia Vue Router Tailwind CSS Vite SVG loader 前提 开始之前，首先要安装 Node.js，这个自行百度解决...vue3-boilerplate npm install npm run dev 运行后在本地开发环境中查看 http://127.0.0.1:5173 此示例页面： 图片 添加 Tailwind CSS...按照这个指南，我们安装Tailwind CSS，然后初始化配置文件。...，其中包含以下内容(指令): @tailwind base; @tailwind components; @tailwind utilities; 然后在 /src/assets/main.css 顶部导入它.../tailwind.css"; 由于我们已经在 /src/main.js 中导入了 /src/assets/main.css 文件，所以，现在就可以在项目中使用 Tailwind 的实用类了。
预期效果 所以今天是实操课，我们一起基于基础的HTML和CSS知识，完成一个博客首页的开发。...整体内容结构如下： 最终实现的效果如下： pc端 移动端 布局-盒模型分析 在实现一个网页之前，首先会进行布局设计，我们现在要做一个博客的首页，根据个人的喜好，做个预期的布局规划。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
云直播
