Github上html页面(包括CSS样式和JS效果)如何显示出来
在看Github上项目时,发现有的html页面效果能很好的展现出来,而有的则不能。对这个问题很好奇,因此研究了一下,最终做到了将页面展示出来的目的。下面以我的Github的开源项目bootstrap-tools为例,一步一步来说明怎么做。
首先进入这个项目,然后点击设置:
进入这个页面后,对GitHub Pages项的Theme Chooser进行设置,选择choose a theme:
进入主题模板页面后,选择相应的模板文件。具体怎么选,根据自己的实际情况来就可以!这里我选的是Minimal theme主题模板文件:
返回原有页面后,会发现在Github Pages下显示一行信息:Your site is ready to be published at https://cmderq.github.io/bootstrap-tools/
这就说明你的设置成功了。
下面就是如何访问对应的页面了。点击生成的链接,进入这个新生成的页面:
这个页面中,是展示bootstrap-tools项目的topic和README文件内容。如果我们要访问某个html文件(如果 有多个的话),比如我这里要访问互文档.html这个页面,只需要在https://cmderq.github.io/bootstrap-tools/ 链接后加入对应的html文件名即可,链接为https://cmderq.github.io/bootstrap-tools/交互文档.html 最终的效果展示如下:
这个页面,能够显示css样式和展示我所做的一些js效果,达到了我最初研究的目的!如果你想显示其他页面,输入相应的名字即可!这样做,是不是很不错?
Github上html页面(包括CSS样式和JS效果)如何显示出来的更多相关文章
- 动态为页面添加CSS样式文件引用
动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...
- wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件
场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...
- 在github上实现页面托管预览功能
1.建立个人github pages 仓库 创建新仓库,命名规则为----"你的github账号.github.io", 如图所示: 我的账号是zxpsuper,所以我的个人域名仓 ...
- Github上最全的APICloud开源前端框架效果盘点(转)
1.微信网站几分钟变身“原生 App” 微信推出了微信JS-SDK,使微信公共号可以直接调用微信原生的接口,具备部分原生应用的能力.微信JS-SDK的推出,将大大提高微信公共号的 用户体验,但是如果存 ...
- 为什么我获取不到这个css样式?js原生获取css样式总结
还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求 简单就是获取一个css的height (好吧 就是一个这么简单的需求) 实践 好吧 长时间的JQ 我已经对原生无能了 ...
- iOS 加载本地 HTML 文件 CSS 样式图片无效果
在开发的过程中,有时候需要加载一些 HTML 页面,对于不太复杂的界面,基本上都可以放到本地用 UIWebview 来加载,但是在开发过程中会碰到 UIWebview 加载出来的 HTML 页面没有图 ...
- js操作css样式、js的兼容问题
一.js操作css样式 div . style . width="200px" 在div标签内我们添加了一个style属性,并设定width值.这种写法会给标签带来大量的style ...
- 用手机自带uc浏览器查看静态页面,css样式不显示
问题描述: 这个问题是一个同事在写手机页面用UC浏览器测试以后遇到的,其他浏览器静态页面显示正常,唯独UC浏览器不显示页面样式. 我测试过代码是没有问题的,因为临时没有找到安卓手机,就猜想PC端的应该 ...
- 史上最全的CSS样式整理
一 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: o ...
随机推荐
- C# 多线程学习笔记 - 1
本文主要针对 GKarch 相关文章留作笔记,仅在原文基础上记录了自己的理解与摘抄部分片段. 遵循原作者的 CC 3.0 协议. 如果想要了解更加详细的文章信息内容,请访问下列地址进行学习. 原文章地 ...
- How does the vuejs add the query and walk the object?
让这个老实返回的页面添加特殊路由,这个页面常常都是登录注册.这次我们根据登录举例. 省略 { path:'/login?url=:url', name:'loginfirst', component: ...
- 微信小程序使用nginx方向代理实现内嵌非业务域名
通过上一篇文章简单介绍了一下微信小程序的新组件<web-view>,实现了在小程序中内嵌业务域名的功能.但是boss要的小程序中不仅想内嵌业务域名,还想要打开一些非业务域名(无法操作web ...
- phpStrom映射代码
- NMF学习练习:做电影推荐
NMF是很久以前学的,基本快忘没了,昨天YX提出来一个关于NMF(同音同字不同义)的问题,才又想起来. 自己的学习笔记写的比较乱,好在网上资料多,摘了一篇,补充上自己笔记的内容,留此助记. NMF概念 ...
- macOS webview编程
好像是macOS10.10之后,以及iOS8之后,新出现的WKWebview组件就迅速的替代了Webview及UIWebView.后者的确存在一些无法解决的bug,诸如架构导致的速度缓慢和内存泄漏. ...
- 以实例说明微服务拆分(以SpringCloud+Gradle)
前言 之前,我都是说了很多的关于微服务的概念,说到底,很多人看了之后会认为没有什么意思,因为没有实际的东西说明,即使每个概念都明白了,也很难赋之实践.所以这次,我来用一个实际的例子去说明,在实际的项目 ...
- leetcode — best-time-to-buy-and-sell-stock-ii
/** * Source : https://oj.leetcode.com/problems/best-time-to-buy-and-sell-stock-ii/ * * * * Say you ...
- shell从入门到精通进阶之一:Shell基础知识
1.1 简介 Shell是一个C语言编写的脚本语言,它是用户与Linux的桥梁,用户输入命令交给Shell处理,Shell将相应的操作传递给内核(Kernel),内核把处理的结果输出给用户. 下面是处 ...
- Linux 项目上线管理 MAVEN + expect 一台机器管理所有机器的应用程序
一.目的 在一台服务器上面管理所有机器的应用程序. 设想是通过一条命令能够知道所有应用程序是否running 如果not running 查看具体项目的log 跟踪具体原因,程序问题汇报相关负责人 二 ...