在看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效果)如何显示出来的更多相关文章

  1. 动态为页面添加CSS样式文件引用

    动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...

  2. wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件

    场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...

  3. 在github上实现页面托管预览功能

    1.建立个人github pages 仓库 创建新仓库,命名规则为----"你的github账号.github.io", 如图所示: 我的账号是zxpsuper,所以我的个人域名仓 ...

  4. Github上最全的APICloud开源前端框架效果盘点(转)

    1.微信网站几分钟变身“原生 App” 微信推出了微信JS-SDK,使微信公共号可以直接调用微信原生的接口,具备部分原生应用的能力.微信JS-SDK的推出,将大大提高微信公共号的 用户体验,但是如果存 ...

  5. 为什么我获取不到这个css样式?js原生获取css样式总结

    还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求 简单就是获取一个css的height (好吧 就是一个这么简单的需求) 实践 好吧 长时间的JQ 我已经对原生无能了 ...

  6. iOS 加载本地 HTML 文件 CSS 样式图片无效果

    在开发的过程中,有时候需要加载一些 HTML 页面,对于不太复杂的界面,基本上都可以放到本地用 UIWebview 来加载,但是在开发过程中会碰到 UIWebview 加载出来的 HTML 页面没有图 ...

  7. js操作css样式、js的兼容问题

    一.js操作css样式 div . style . width="200px" 在div标签内我们添加了一个style属性,并设定width值.这种写法会给标签带来大量的style ...

  8. 用手机自带uc浏览器查看静态页面,css样式不显示

    问题描述: 这个问题是一个同事在写手机页面用UC浏览器测试以后遇到的,其他浏览器静态页面显示正常,唯独UC浏览器不显示页面样式. 我测试过代码是没有问题的,因为临时没有找到安卓手机,就猜想PC端的应该 ...

  9. 史上最全的CSS样式整理

    一 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: o ...

随机推荐

  1. C# 多线程学习笔记 - 1

    本文主要针对 GKarch 相关文章留作笔记,仅在原文基础上记录了自己的理解与摘抄部分片段. 遵循原作者的 CC 3.0 协议. 如果想要了解更加详细的文章信息内容,请访问下列地址进行学习. 原文章地 ...

  2. How does the vuejs add the query and walk the object?

    让这个老实返回的页面添加特殊路由,这个页面常常都是登录注册.这次我们根据登录举例. 省略 { path:'/login?url=:url', name:'loginfirst', component: ...

  3. 微信小程序使用nginx方向代理实现内嵌非业务域名

    通过上一篇文章简单介绍了一下微信小程序的新组件<web-view>,实现了在小程序中内嵌业务域名的功能.但是boss要的小程序中不仅想内嵌业务域名,还想要打开一些非业务域名(无法操作web ...

  4. phpStrom映射代码

  5. NMF学习练习:做电影推荐

    NMF是很久以前学的,基本快忘没了,昨天YX提出来一个关于NMF(同音同字不同义)的问题,才又想起来. 自己的学习笔记写的比较乱,好在网上资料多,摘了一篇,补充上自己笔记的内容,留此助记. NMF概念 ...

  6. macOS webview编程

    好像是macOS10.10之后,以及iOS8之后,新出现的WKWebview组件就迅速的替代了Webview及UIWebView.后者的确存在一些无法解决的bug,诸如架构导致的速度缓慢和内存泄漏. ...

  7. 以实例说明微服务拆分(以SpringCloud+Gradle)

    前言 之前,我都是说了很多的关于微服务的概念,说到底,很多人看了之后会认为没有什么意思,因为没有实际的东西说明,即使每个概念都明白了,也很难赋之实践.所以这次,我来用一个实际的例子去说明,在实际的项目 ...

  8. 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 ...

  9. shell从入门到精通进阶之一:Shell基础知识

    1.1 简介 Shell是一个C语言编写的脚本语言,它是用户与Linux的桥梁,用户输入命令交给Shell处理,Shell将相应的操作传递给内核(Kernel),内核把处理的结果输出给用户. 下面是处 ...

  10. Linux 项目上线管理 MAVEN + expect 一台机器管理所有机器的应用程序

    一.目的 在一台服务器上面管理所有机器的应用程序. 设想是通过一条命令能够知道所有应用程序是否running 如果not running 查看具体项目的log 跟踪具体原因,程序问题汇报相关负责人 二 ...