github pages自定义css样式

2024-11-05

Github上html页面(包括CSS样式和JS效果)如何显示出来

在看Github上项目时,发现有的html页面效果能很好的展现出来,而有的则不能.对这个问题很好奇,因此研究了一下,最终做到了将页面展示出来的目的.下面以我的Github的开源项目bootstrap-tools为例,一步一步来说明怎么做. 首先进入这个项目,然后点击设置: 进入这个页面后,对GitHub Pages项的Theme Chooser进行设置,选择choose a theme: 进入主题模板页面后,选择相应的模板文件.具体怎么选,根据自己的实际情况来就可以!这里我选的是Minimal

GitHub pages+自定义域名(腾讯云域名)+cloudflare加速

本人也是第一次走完整个流程,github pages当然一直有使用,创建也很简单,并且网上教程也比较多:然后是关于自定义域名的问题,自己以前使用过国外的免费域名,然后是直接修改就ok了,然后这次使用了从腾讯云注册的域名,中间会麻烦一些,然后网上也没看到能够特别匹配的教程:最后就是cloudflare的免费CDN加速了,对于github pages的访问来说,CDN加速是非常必要的了. 一.创建GitHub pages 这里网上教程很多,就不过多介绍了现在的GitHub pages和以前有一点不

杨韬的Markdown自定义CSS样式

效果样例杨韬的Python/Jupyter学习笔记 Markdown例子链接页面代码 /*主标题*/ #cb_post_title_url{ font-size: 31px; } /*h1,h2,h3 底纹*/ .blogpost-body h2 { background: #2B6695; text-align: center; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px r

自定义css样式结合js控制audio做音乐播放器

最近工作需求需要播放预览一些音乐资源,所以自己写了个控制audio的音乐播放器. 实现的原理主要是通过js调整audio的对象属性及对象方法来进行控制: 1.通过play().pause()来控制音乐的播放与暂停 2.通过duration.currentTime获取音乐长度及实时播放进度 3.通过volume.muted对音量大小进行调节 4.通过ended.error检测音乐的播放状态首先来看一下实现效果:当播放点击音乐时该音乐展示播放进度.进度条.音乐条本例子实际效果(博客园不允许添加a

为添加了自定义域名的GitHub Pages添加SSL，启用强制HTTPS(小绿锁）

直奔主题为什么要使用https协议? 提高网站访问安全性,网络连接都是加密的 (PS:虽然SSL并不是无懈可击的,但是我们应该尽可能提高窃听成本). 目前越来越多的浏览器会判断当前站点支不支持https协议,提高用户信任度,体验好. 例如:据外媒报道,从2017年1月份正式发布的Chrome 56开始,Google将把某些包含敏感内容的HTTP页面标记为"不安全",比如含有密码或支付表单信息.Google最终目标是将所有打破了https连接的HTTP页面,用特定的红色图标给标记出来-

可能是最详细的 Hexo + GitHub Pages 搭建博客的教程

前言:博主目前大三,Web 前端爱好者.写博客的好处,不是为了写而写,而是一个记录思想的过程.不要考虑它能带给你什么,而是你自己从中收获了什么. 最近刚好有空,于是就参照网上的各种教程,搭建了一个博客.现在把 Hexo + GitHub Pages 搭建博客的完整过程记录下来: 个人博客地址:http://www.lovebxm.com 大概流程: 1. 搭建 Node.js 环境 2. 搭建 Git 环境 3. GitHub 注册和配置 4. 安装配置 Hexo 5. 关联 Hexo 与 Gi

用Jekyll搭建的Github Pages个人博客实践2

依稀记得之前访问喵神的博客很有feel 感谢喵神git上的提供的主题Vno-Jekyll. 创建代码仓库(你的用户名).github.io 将主题Vno-Jekyll下载到本地,解压到刚刚的代码仓库目录下,可以把文件夹里的文件都删了. gem install jekyll 进入到(你的用户名).github.io目录执行bundle install 如果出现提示: -bash: bundle: command not found 就先安装bundle(执行sudo gem install b

用GitHub Pages搭建博客（五）

本篇介绍GitHub Pages自定义域名在用GitHub Pages搭建博客(二)中介绍到,默认的GitHub Pages域名就是仓库地址,即: 账号名.github.io 如果我们要使用自定义域名访问GitHub Pages网站,我们需要进行相应的配置. 域名服务商的配置具体操作可以在域名服务商的网站是查看,以通用方法进行讲解.假设我们的自定义域名为: www.shiyueshuyi.xyz GitHub Pages域名为: dev200709.github.io 在域名服务商网站上,我

FE: CSS固定图片显示大小及GitHub Pages在线演示

CSS固定图片显示大小分析假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; margin: 1em; } 当然简单如下的html是不能限制图片大小的 <div class=“picture-area”> <img src=“…” alt=“…”> </div> 换个思路,将图片作为div的背景图片 <div style=“background-ima

循序渐进BootstrapVue，开发公司门户网站（2）--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果

在我们开发的页面中,让页面有一些动画效果,可以让页面更加有吸引力,只要不是处理太过,一般人还是希望有一些动态效果,如滚动动画加载,悬停处理变化等效果,本篇随笔介绍使用wow.js动画组件以及自定义的CSS样式处理动态效果,增加公司门户网站页面的动画效果. 1.使用wow.js动画组件 WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件. WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,你可以改变动画设置喜欢的风格.延迟.

GitHub Pages和每个项目绑定自定义域名（支持多个和顶级域名）

假设我购买的域名为www.easonjim.com,想把www.easonjim.com和easonjim.com的域名跳转到下面的网址easonjim.github.io. 而我在github上的账号为easonjim,并且新建了easonjim.github.io的目录. 那么在这个目录上新建一个名为CNAME的文件,里面的内容: easonjim.com www.easonjim.com 下一步是设置域名的解析地址,如下设置: 只要把@和www解析到github的ip即可. 参考: htt

CSS使用自定义光标样式-遁地龙卷风

测试环境是chrome浏览器 Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.132 Safari/537.36 css样式 div { cursor:url('1.jpg'),pointer; } HTML <body> <div style="width:100px;height:100px;background-color:red;">

如何自定义CSS滚动条的样式？

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的滚动条. 0.需求有的时候我们不想使用浏览器默认的滚动条样式,因为不够定制化和美观.那么如何自定义滚动条的样式呢?下面一起来看看吧. 1 基础知识 1.1 Webkit内核的css滚动条选择器 ::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式属性: ::-we

CSS自定义滚动条样式

原文地址:http://www.qianduan.net/css-custom-scroll-bar-style/ 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但是这样只能规避还是解决不了问题,最近在项目中遇到了,正好来总结一下.当然,兼容所有浏览器的滚动条样式目前是不存在的. IE下的滚动条样式 IE是最早提供滚动条的样式支持,嗯,好多年了,但是其它浏览器一直没有支持,IE独孤求败了. 这些样式规则很简单: scrollbar-arro

放在github pages上的静态网站怎么取消绑定自定义域名？

使用GitHub Pages搭建的静态网站绑定了自定义域名操作,但是想反悔怎么办? 删除CNAME文件,重新删除仓库,新建后均不行~ 解决办法:清除一下浏览器缓存,或者用别的浏览器打开就好了,因为之前的浏览器记录了重定向的位置.

sencha touch 扩展篇之使用sass自定义主题样式（下）通过css修改官方组件样式以及自定义图标

上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sass文件来引入他们并进行编译,下图是官方sdk中自带的主题样式包: 我们如何在sass文件中导入这些样式呢,我们接着上一讲创建的项目,打开项目下resources/sass文件夹下的app.scss文件,去掉上一讲修改的样式,如图: 如果你要引入对应的样式,只需修改@import的路径就可以了,这里我

FCKeditor自定义编辑区CSS样式

在网站后台使用FCKeditor编辑器的时候,见到的效果可能并不完全是”所见即所得”的,因为如果在FCKeditor编辑区中使用了前台样式表中的样式,在编辑区中并不能把这些样式显示出来.解决这个问题的办法就是,在FCKeditor初始化的时候导入自定义的CSS样式. 具体的代码如下(相关解释见注释): window.onload = function(){var sBasePath = ‘/fckeditor/’;//fckeditor的绝对路径var SitePath = ‘/mysite/’

假装前端工程师（一）Icework + GitHub pages 快速构建可自定义迭代开发的 react 网站

icework + gh-pages 超快部署超多模版页面项目地址:https://github.com/yhyddr/landingpage效果地址:https://yhyddr.github.io/landingpage 前言 GitHub 账号与它的 pages 服务不需要任何准备的东西,服务器?域名?前端工程师? 都不需要!只需要你有就能够享受到建立自己网站的乐趣. 飞冰现在搭配飞冰,还能让你一键生成你喜欢的页面:最最主要的是,你的这个项目是一个 React App,你可以边学前

vue项目引入自定义.css的样式文件

ES6的引入方式: .vue文件中 css文件引入 <template></template> <style scoped> @import "../assets/common/common.css";//自定义.css的样式路径 </style> js文件的引入在main.js中: import API from './assets/api/api.config.js' Vue.prototype.$API = API; P.S.:传

css中渐变的分割线和自定义滚动条样式

css中渐变的分隔线: <div style="background:linear-gradient(to left,#efefef,#b6b6b6,#efefef);height:1px;"></div> 自定义滚动条样式: <div id='scroll'> <div > <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ex quia

github pages自定义css样式

热门专题