ShiningDan的博客

发表于 | 分类于 | | 阅读次数

Bootstrap 笔记

本系列的是参考慕课网 大漠老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。

在 Bootstrap 的发展中，有一些样式发生了改变，在本文中分析的是较新的 Bootstrap 样式。

使用 Bootstrap

使用 Bootstrap，可以将文件下载到本地使用，或者使用 Bootstrap 提供的 CDN。

下面是 Bootstrap 的 CDN，最新的 CDN 可以在 Bootstrap 官网 上下载。：

1
2
3
4
5
6
7
8
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

下载的 Bootstrap 的内容格式如下，包括一些 CSS 样式和 js 文件，和一些字体文件。：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Bootstrap所有的 JS 插件都依赖于 jQuery，因此 jQuery 要在 Bootstrap 之前使用，下面为使用 Bootstrap 的一个模板：

阅读全文 »
ShiningDan的博客

发表于 | 分类于 | | 阅读次数

在该笔记中将学到列表展示中新浪微博主页的制作方法与展示效果

本系列的是参考慕课网 Busy老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。

显示效果为：

其中需要注意的要点有：

如果有 logo 和文字出现在同一行的情况下，如何设定对齐方式来使得文字和图片对齐：

解决方案为：将图片和文字分别放在两个相同高度的 div 中，同时设定两个 Div 为 display:inline-block。此时因为默认的纵轴对齐方式是vertical-align:baseline，导致图片的最下部和文字的底部对齐，可能会造成文字的下沉，所以要对包裹文字的 Div 设置 vertical-align:top，使得文字和图片的容器以 top 形式进行纵轴对齐。vertical-align必须在display:inline/inline-block的时候才生效。

阅读全文 »
ShiningDan的博客

发表于 | 分类于 | | 阅读次数

前言

在原来的电脑中，我的 hexo 备份在 GitHub上，除了一个 User Page 用来发布文章以外，还有一个 hexo-backup 的仓库，用来保存 hexo 的源代码。

在我换电脑以后，需要在新的电脑上重新部署 hexo 的环境，由于原来 hexo 的源代码及文稿与发布的仓库位于两个不同的仓库中，导致我需要下载一个仓库，但是要 hexo deploy 到另一个仓库中，这是一个很不合理的项目规划方案。所以，在网上搜索了一些教程以后，我重新规划了 GitHub 上面的代码仓库，用一个仓库同时存放 hexo 项目的发布版和源文件，但是这两个部分位于一个仓库的不同分支中。在以后需要重新部署 hexo 环境的时候，只用从一个仓库中下载代码，就可以获得源代码和发布版。

感谢CrazyMilk的文章，为我提供了使用一个仓库同时管理发布版和源代码的解决方案！

阅读全文 »
ShiningDan的博客

发表于 | | 阅读次数

float 和 display:inline-block 的使用

float 和 display:inline-block 不能同时使用，在有的浏览器(chrome)中，浏览器对 css 代码解释的过程中，有时候按照 float 来布局，有时候按照 inline-block 来布局，会使得布局产生变化。

设了float:left的元素允许它的右边存在任何元素同行显示，不论是内联元素还是块元素。但它的左边还是不允许存在任何元素与之同行显示，哪怕其它的元素的代码在前，除非也给前面的元素加上float:left后，才允许同行显示。

设了display:inline的元素，允许它的前后存在其它的内联元素同行显示。关于代码在其前面的块元素之同行显示，则要让前面的元素浮动（不管是左还是右浮动）或设为display:inline，还有代码在后面的是块元素（管它有没有浮动，是左浮动还是右浮动），均不能与之同行，除非设为display:inline。

使用 overflow:hidden 清除浮动

出现情况：父块没有设置指定的高宽，当子块设置为浮动后，原本包裹子块的父块的高度塌陷消失，这时给父块设置overflow:hidden就能清楚浮动造成的影响，使父块重新包裹子块。

阅读全文 »
ShiningDan的博客

发表于 | | 阅读次数

JavaScript 笔记

DOM

DOM 级别

DOM0是不存在的，DOM0 只是 DOM 历史中一个参照点而已，一般是指最初支持的 DHTML。

DOM1是 1998 年被推荐称为 W3C 的推荐标准，DOM1 被分为两个模块组成的：DOM Core 和 DOM HTML。

  1. DOM Core：如何映射基于 XML 的文档结构，以便简化为文档中任意部分的访问和操作。DOM Core 有几个相关的方法，如：getElementById、getElementsByTagName、getAttribute、setAttribute，它们并不属于 JavaScript。
  2. DOM HTML：在 DOM Core 的基础上加以扩展，增加了针对 HTML 的对象和方法。比如 onclick 属性，比如 src 属性等。

DOM2在 DOM1 的基础上扩展了鼠标和用户界面事件、范围、遍历迭代 DOM 文档的方法，也增加了对 CSS 的支持。DOM2 引入下列新模块：

  1. DOM 视图(DOM View)：定义了跟踪不同文档(例如：应用了 CSS 之前和之后的文档)视图的接口
  2. DOM 事件(DOM Event)：定义了事件和事件处理的接口
  3. DOM 样式(DOM Style)：定义了基于 CSS 为元素应用样式的接口
  4. DOM 遍历和范围(DOM Traversal and Range)：定义了遍历和操作文档树的接口

DOM3进一步扩展了 DOM，引入了以统一方式加载和保存文档的方法，也对 DOM Core 进行了扩展，开始支持 XML 1.0，设计 XPath 和 XML Base：

  1. DOM 加载和保存(DOM Load and Save)
  2. DOM 验证(DOM Validation)：DOM 验证
阅读全文 »
ShiningDan的博客

发表于 | 分类于 | | 阅读次数

Sass 笔记

本系列的是参考慕课网 大漠老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。

Sass 简介

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性

Sass 和 SCSS 的区别

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

  1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
  2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

Sass 是基于 Ruby 环境运行的，如要要运行 Sass，首先要安装 Ruby。

阅读全文 »
ShiningDan的博客

发表于 | 分类于 | | 阅读次数

网页组件制作之购物车效果

在该笔记中将学到列表展示中购物车效果的方法与展示效果

本系列的是参考慕课网 阿安老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。

实现效果

注意事项：

在进行 float 计算结果输出的时候，因为 float 的精度很高，所以输出的结果会有很高的精度，如 “73.23” 会输出成 “73.2300000000001”。所以，在使用 innerText 修改计算结果的时候，可以使用 toFixed(num) 对float 数值进行处理，修改显示精度。

阅读全文 »
ShiningDan的博客

发表于 | 分类于 | | 阅读次数

网页组件制作之固定边栏滚动特效

在该笔记中将学到列表展示中固定边栏滚动特效的方法与展示效果

本系列的是参考慕课网 远人老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。

实现的效果

如果页面是多栏布局，并且多个栏的高度不一致，在滚动的时候，高度高的栏可以继续滚动，高度低的栏在完成滚动后只能显示空白页面。我们要实现的效果是，如果滚动的范围超出高度低的边栏，则高度低的边栏就停在页面的两侧，而不是滚动到空白页面。

没有设置固定边栏的效果：

设置了固定边栏的效果：

阅读全文 »