2017年10月_destinytaoer

原创浅谈响应式

前言由于移动设备的增多，携带便利，人们在移动设备上浏览网页的时间不断增加，甚至要超过PC端。但是PC端的网页放到移动端，就会出现各种问题，如字体太小、图片不清晰等。浏览体验变得很差。于是，就有了响应式网页的诞生。在多种设备的不同尺寸的屏幕上，精巧设计和制作出最佳视觉体验的网页。下面，就跟大家分享一下如何做一个响应式的网页。我学习响应式时做的网页：理财网站一、如何做响应式网页元

2017-10-31 09:52:40 427

原创像素与viewport概念

一、像素的概念px ：逻辑像素，浏览器使用的抽象单位dp、pt：物理像素dpr：设备像素缩放比ppi：屏幕每英寸的像素数量，即单位英寸内的像素密度ppi120160240320dpr0.751.01.52.0ppi 越高，像素数越高，图像越清晰。Retina屏即高清屏，dpr 大于等于 2。二、viewportweb初期，

2017-10-31 09:52:37 246

原创 sass的使用

前言在介绍之前，请大家先弄清楚下面的问题：什么是 sasssass 是 css 的预处理器（css preprocessor）为什么使用 sass1、它能够帮我们更快更高效的编写更好维护的 css 。2、它自带很多原生 css 没有的功能，如变量（现在 css 中已经实现）、条件语句等如何使用sass1、安装 sass ：ruby环境、sass编译2、 sass的语法

2017-10-31 09:52:34 1337

转载说说CSS学习中的瓶颈

前言本文是在自己重新开始学习CSS的过程中看到的，与其说它是讲如何深入学习CSS，更多的是警醒的作用，看了文章之后，才真正认清自己的浮躁，也庆幸自己回头恶补。本文不涉及技术，但是希望大家都能看一看。本文转载自说说CSS学习中的瓶颈 " 张鑫旭-鑫空间-鑫生活**。0 写在前面虽已数年，但未就学习专门写过文章，这回破处了。苍蝇不叮没有缝隙的鸡蛋，领导不做没有跟拍的表演，同样，想到写CSS

2017-10-31 09:52:31 541

原创 CSS实现元素的居中显示

前言元素的水平及垂直居中是在写CSS样式中最常遇到的问题之一。相信会CSS的同学肯定都有自己的解决方法，但是并不一定都能熟练运用，并且知道其中原理。下面，我就将自己总结的实现方法分享给大家。ps：重点是第四，疑惑在第三，第一、第二也较常用为本文制作的demo：元素居中显示一、单行文本这里的单行文本不仅是指单行显示的文本以及行内元素（设置了display: inline;的也是行内元

2017-10-31 09:52:28 291

原创给不了解前端的同学讲前端

前言这篇文章，是在前几天逛知乎的时候看到的文章，觉得很棒，正好也有这个需求，想向不了解前端的人介绍何为“前端”。不然，自己所在的群体中好像很少人能明白我一天到晚钻研的东西是什么。下面与大家分享。ps：本文为PPT演讲的形式所作的图文介绍，图片较多。本文转自知乎：前端 101：给不了解前端的同学讲前端本演讲原作者css魔法，文末有作者简介简介本文改编自魔法哥为 “百姓网暑期实习生训

2017-10-31 09:52:25 1032

原创关于Flex布局

前言本文引自阮一峰的网络日志：Flex 布局教程：语法篇阮一峰老师的文章确实很棒，在他的博客学到了很多的知识，通俗易懂。讲讲布局，传统的布局，是基于盒子模型，依赖 display + position + float属性。它对于特殊的布局非常不方便，如：垂直居中。Flex布局是W3C在2009年提出的新方案，可以简便、完整、响应式地实现各种页面布局。已经得到所有浏览器的支持。是未

2017-10-31 09:52:22 222

原创层叠上下文和层叠顺序

引自：张鑫旭的博客本文地址：http://www.zhangxinxu.com/wordpress/?p=5115前言原文是在前面对transform引起的z-index“失效”探究过程中找到的，非常棒，所以转载分享。本文大多摘自原文，进行了压缩，也加入了我自己的理解，希望对大家有帮助。默认情况下，网页内容是没有偏移角的垂直视觉呈现，当内容发生层叠的时候，一定会有一个前后的层叠顺序产生。

2017-10-31 09:52:20 769

原创 Transform 引起的 z-index "失效"

前言重新学习CSS后的第三天，学习制作阴影的过程中，发现的问题：设置了box-shadow后展现的阴影：添加transform:rotate(10deg);后的效果：查看CodePen例子：阴影效果一脸懵逼！再修改z-index完全没有效果。百度之后，找到了问题的答案，也自己摸索着找到了这个问题的解决办法。下面与大家分享。一、原因给元素设置transform属性会

2017-10-31 09:52:17 828

原创关于inline-block问题

前言在重新学习css，做自己的学习demo时，设置一堆div在一行显示，呈现对比。结果如图，设置了display:inline-block之后，出现了部分下沉现象。改为float之后，又恢复正常对齐。不过，很快就得到了解决。于是，就写了这篇关于inline-block问题的文章，包含了以前分享过的间距问题，在这里与大家分享。一、下沉问题原因1. 行内元素有一个基线，所有在这一

2017-10-31 09:52:11 473

原创 CSS渐变的简单使用

前言重拾css后的文章，在观看了慕课网上的视频《重拾CSS的乐趣》中，看到了一些有意思的css效果。想起当初自己初学CSS3时画的哆啦A梦，总结了一番css制作的各种图形。渐变效果是在实现弧边三角的时候学习的。分享一下CodePen中的代码效果：弧形demo三角形demo多重边框demo一、渐变简介渐变是两种或多种颜色之间的平滑过渡。在创建渐变的过程中，可以指定多个中间颜色值，这

2017-10-31 09:52:08 4360 1

原创 gulp 自动化构建工具

前言gulp简介gulp是一款常用的自动化构建工具，用于压缩、打包你的项目代码与文件。其他的类似的工具有grunt、webpack等。gulp的优点易于使用通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。构建快速利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。插件高质Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

2017-10-31 09:52:05 268

原创 Sublime Text 使用插件介绍

前言这是一款个人特别喜欢的编辑器，用来写前端代码。特别棒的是最新版本的文件栏中，中文不再出现乱码。本文主要是为自己做笔记以及备份的，介绍自己使用的sublime text插件。希望对大家也有所帮助。官网地址：Sublime Text插件官网：packageControl大神文章：详细插件介绍packageControl最新版本的sublimetext不再需要复制代码到控制台

2017-10-31 09:52:02 209

原创 hexo + next主题高级配置

前言配置完yilia后，发现缺少一些东西，百度之下，找到了特别喜欢的主题——next。跟大家分享配置经验。首先，本文是根据我自己的博客配置而写的，并不全面，其他美化配置在文末提供了相应的参考链接。欢迎浏览我的博客：destiny'Note其次，本文中有部分自己的改进方案，并非全部摘自他文我的博客原文链接：hexo + next主题高级配置一、主题下载git clone htt

2017-10-31 09:52:00 1981 1

原创 Hexo + yilia 主题 +githubpages博客添加友言评论功能

前言Hexo博客的Yilia主题中评论系统只提供了畅言、网易云跟帖、多说和Disqus。由于多说评论、网易云跟帖已经关闭系统，畅言需要域名备案，而github是国外的，没有备案，所以尝试了其他第三方评论系统——友言。友言使用极其简单，本地成功实现，但是上传上github后发现无法出现评论。在多次查找与尝试下，终于成功，下面与大家分享我的方法。欢迎关注我的博客：destiny'Note

2017-10-31 09:51:57 4016 1

原创 hexo+gitHubPages 快速搭建个人博客

前言本文仅仅是使用hexo以及gitHubPages 快速搭建个人博客，后续还会分享详细的内容官方中文文档：https://hexo.io/zh-cn/docs/index.html欢迎关注我的博客：destiny'Note本文引自：hexo+gitHubPages 快速搭建个人博客一、准备Node.js作用：node.js用来创建hexo博客框架Git客户端作用：把本地

2017-10-31 09:51:54 1047

原创 javascript 面向对象编程

引自：阮一峰的博客Javascript面向对象编程（一）：封装Javascript面向对象编程（二）：构造函数的继承Javascript面向对象编程（三）：非构造函数的继承JavaScript 对象封装一、构造函数 function Cat(name,color){ this.name = name; this.color = color;

2017-10-31 09:51:52 259

原创前端学习资源收集

前言本文是在现阶段自学过程用到过的优秀资源的总结，并与大家分享。希望可以对大家，尤其是像我一样的初学者有所帮助，少走弯路。主要包括：视频网站、文本网站、书籍、博客以及优化工具等等一、视频学习网站就自学而言，我感觉还是看视频教学来得轻松些，也容易理解。下面就介绍几个视频网站慕课网——程序员的梦工厂我个人极力推荐的一个学习网站，前端的启蒙网站，主要针对互联网的开发。课程有前端开发、

2017-10-31 09:51:49 258

原创去除inline-block元素间间距的N种方法

原文转自：张鑫旭-鑫空间-鑫生活本文地址：去除inline-block元素间间距的N种方法一、现象描述真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：间距就来了~我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题：.space a { display: inline-

2017-10-31 09:51:46 197

原创 mardown学习总结

一、 markdown简介Markdown 是一种用来写作的轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）优点纯文本，所以兼容性极强，可以用所有文本编辑器打开它用简洁的语法代替排版，使我们专心于码字格式转换方便，Markdown 的文本你可以轻松转换为 html、PDF等Markdown 的标记语法有极好的可读性对于从事写作、文字编辑以及想写博客的人来说，非常有

2017-10-31 09:51:43 316

原创对文字和行高的理解

文字与行高对照上图 1. 文字大小是顶线与底线之间的距离 2. 行高大小是基线与基线之间的距离 3. 行高=文字大小+上下两个间距浏览器默认浏览器默认的文字大小为16px，其中chrome浏览器有最小文字限制，最小为12px 默认的行高大小为18px行高的单位技巧：文本的垂直居中当文本的父容器设置行高与高度一致、或者父容器不设置高度，只设置行高时，能够使父容

2017-10-31 09:51:40 992

原创 html语义化

HTML是超文本标记（Hyper Text Markup Language）的缩写，在网页设计中又把它称为网页的结构层。它的学习很简单，只要多利用业余时间去记忆、练习，一到两天时间就能掌握，并写出一个简单页面。这里推荐一个快速入门的网址：http://www.w3school.com.cn/ 一、对于html的学习 1、首先是对html的整体结构的认识，即的声明、html标签、hea

2017-10-31 09:51:37 210

原创 Canvas 画布

一、简介 HTML5 中的定义：“它是依赖分辨率的位图画布，你可以在 canvas 上面绘制任何图形，甚至加载照片。”矩形空白区域通过 javascript 绘制图形可以加载图片 canvas 坐标系二、HTML 部分<canvas id="a" width="300" height="300">您的浏览器不支持 canvas</canvas>简单的在 HTML 页面添加一个 canva

2017-10-31 09:49:24 386

转载编码规范（二）CSS

前言统一的编码规范，有助于编写高质量、可读性强、易于维护的代码。CSS 代码的编写，应该尽量简洁、高性能、高可维护性，达到三者的一个最佳平衡。不能为了简洁牺牲可维护性。本文引自：编码规范 by @mdo 黄金定律不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。一、语法用两个空格来代替 tab单独的选择器单独放在一行左花括号前添加一个空格声明块

2017-10-31 09:46:15 215

转载编码规范（一）HTML

前言统一的编码规范，有助于编写高质量、稳定、可维护的代码。本文引自：编码规范 by @mdo 黄金定律不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。实用为王尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。一、语法使用两个空格来代替制表符嵌套元素应当缩进一次（即两个

2017-10-31 09:45:16 155

destiny'Note