css的一些基础（一）
定位
定位相关属性用于设置目标组件的位置，常用的定位相关属性如下。
属性说明值
position
设置定位方法
static、relative、absolute、fixed
left
right
为定位元素设置偏移量
长度、百分比、...[2018/10/23]
使用rem编写自适应屏幕网页造成div被span撑高的解决办法
原始代码：
<html>
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<meta name=...[2018/10/23]
实现花瓣登陆静态页面
思路： 花瓣网 1、对页面进行分析 · 2、下载素材 3、对页面尺寸进行分析 4、实现 下载素材 将页面素材保存到本地，方法如下图 页面尺寸进行分析 只做了大概得尺寸，尺寸获取方法，使用截图得方法获...[2018/10/23]
Vue创建头部组件示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
...[2018/10/23]
小程序分包加载
开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。
在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必须包含
一个主包，所谓的主包，即放置默认启动页/TabBar 页面，以及一些所有分包需要用到
整个小程序所有...[2018/10/22]
webpack4 系列教程(十四)：Clean Plugin and Watch Mode
作者按：因为教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步《webpack4 系列教程(十四)：Clean Plugin and Watch Mode》原文地址。更欢迎来我的小站看更多原创内容：godbmw.com，进行“姿势”交流 ?(^?^*)
0. 课程介绍和资料
...[2018/10/22]
JavaScript day1（注释）JavaScript day1（注释）
JavaScript中的注释方式有两种：
单行注释，使用 。
This is an in-line comment.
多行注释，以/*开始，用*/来结束。
/* This is a
multi-line comment.*/
[2018/10/22]
webpack4 系列教程(十五)：开发模式与webpack-dev-server
作者按：因为教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步《webpack4 系列教程(十五)：开发模式与 webpack-dev-server》原文地址。更欢迎来我的小站看更多原创内容：godbmw.com，进行“姿势”交流 ?(^?^*)
0. 课程介绍和资料
>...[2018/10/22]
更改Visual Studio Code为中文字体最有效的方法
更改Visual Studio Code为中文字体最有效的方法。
网址：https: marketplace.visualstudio.com/
根据提示就可以更改。[2018/10/22]
Vue父子组件之间的传值Vue父子组件之间的传值
1.vue是如何进行父子组件之间的传值的
a.父子组件之间通过props
b.子父组件之间通过$emit
2.简单demo描述
父组件包含一个点击按钮，用于改变子组件的显示与隐藏；
子...[2018/10/22]
js简单时分秒倒计时
效果：
javascript：
<script type="text/javascript">
function countTime() {
获取当前时间
var date = new Date();
...[2018/10/22]
select下拉框选择字体大小
效果：
结合Bootstrap、jQuery和ES6字符串模板与箭头函数使用JavaScript DOM操作动态添加option，随着option:selected选中的字号而改变相应的字体大小
代码:
<!DOCTYPE html>
<html>...[2018/10/22]
jQuery中判断input的disabled属性
<input type="text" id="ipt1" disabled> <input type="text" id="ipt2" disabled="disabled">
<input type="text" id="ipt3">
var va...[2018/10/22]
自定义loading效果
结合Font Awesome字体图标自定义loading效果
Font Awesome字体图标地址：http: www.fontawesome.com.cn/faicon
使用javascript DOM操作动态添加loading HTML结构，通过JavaScript方法控制loading...[2018/10/22]
HTML5学习笔记
新特性:
HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar...[2018/10/22]
CSS3学习笔记
CSS3 被划分为模块
其中最重要的 CSS3 新增实用模块包括：
背景和边框
文本效果
2D/3D 转换
动画
多列布局
用户界面
CSS3 边框:
用于创建圆角
border-radius: 倒角(px);
用于向方框添加阴影
...[2018/10/22]
CSS实现三列布局CSS实现三列布局
三列布局指的是两边两列定宽，中间的宽度自适应。 常用三种方法： 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法，左右两栏选择绝对定位，固定于页面的两侧，中间的主体选择用margin确定位置 1 <!DOCTYPE html>&...[2018/10/22]
整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效果好整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效果好
效果图：
我的代码示例：
<!--提示模态框-->
<div cla ="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
...[2018/10/22]
自定义checkbox样式
通过选中时添加背景图片自定义CheckBox样式
效果：
CSS样式：
<style type="text/c >
label {
width: 10%;
display: ...[2018/10/22]
Javascript 流程控制
流程控制
JavaScript通过流程语句来执行程序流，程序流有若干语句组成。在正常情况下，程序中 的语句时按照书写顺序执行的，这种结构称为顺序结构。除了顺序结构之外还有选择结构和循环结构。
1.选择结构
（1）if-else语句
语法：
if（condition）{
...[2018/10/21]
【webpack插件使用】在开发中快速掌握并使用Webpack构建web应用程序【webpack插件使用】在开发中快速掌握并使用Webpack构建web应用程序
1.webpack-dev-server插件的基本使用
入门程序
const path = require(''path'');
导出一个Webpack的配置对象（通过node中的模块操作，向外暴露了一个配置对象）
module.exports = {
需要在这里手动指定...[2018/10/21]
攻破javascript面试的完美指南【译】
攻破javascript面试的完美指南(开发者视角)
0. 前言
本文适合有一定js基础的前端开发人员阅读。原文是我google时无意发现的， 被一些知识点清晰的解析所打动， 决定翻译并记录下来。这个过程断续进行了两个月， 期间工作遇到的部分疑问也在文中找到了答案。这篇好的文章值得被推荐。
...[2018/10/21]
【源码】防抖和节流源码分析【源码】防抖和节流源码分析
前言
防抖、节流主要用于频繁事件触发，例如鼠标移动、改变窗口大小等。lodash等函数库具备相对应的api， _.debounce 、_.throttle。
核心技术：闭包。
区别：
防抖， 连续触发， 第一次和最后一次触发有效
节流， 一段时间内仅触发一次（第一次）
本文以防抖函数为例...[2018/10/21]
dorado 7 使用总结
最近项目上需要，使用了dorado 7 ，总体感觉还可以，快速开发很方便，然而在方便的同时，难免有些太过繁琐，很多东西都封装了起来，会造成很多不便。因此快速开发的项目可以使用，其它的不推荐。现在打算将过去使用dorado7时遇到的，一些有趣的地方记录下来，方便以后参考。
1.DataSet数据...[2018/10/21]
JavaScript常用函数
JavaScript常用函数
常规函数
数组函数
日期函数
数学函数
字符串函数
常规函数
(1)alert函数：显示一个警告对话框，包括一个OK按钮。（alert("输入错误");）
(2)confirm...[2018/10/21]
echarts 实现数据(tooltip)自动轮播插件
前言
最近, 工作中要做类似这种的项目. 用到了百度的 echarts 这个开源的数据可视化的框架.
因为投屏项目不像PC端的WEB, 它不允许用户用鼠标键盘等交互. 有些图表只能看到各部分的占比情况, 不能显示具体的数值.
比如:
得让页面的数据(即tootips)自动轮播数据,效...[2018/10/21]
ES6 开发规范-最佳实践
ES6 开发规范（最佳实践）
本文为开发规范，收集方便日后查看。
【开发规范】https: blog.csdn.net/zzzkk2009/article/detail 53171058?utm_source=blogxgwz0
【最佳实践】https: blog.csdn.net/vbdff...[2018/10/21]
纯JS实现轮播图特效——详解纯JS实现轮播图特效——详解
<div id="slider">
<div id="sliderImgs">
<img src="img/mi04.jpg" width="1000px"/>
...[2018/10/21]
基于Webpack, KnockoutJs,esyui,koeasyui实现类vue-cli生成的模板框架
前后端分离的开发机制，基本上是开发现代业务系统的标配。可在国内某些特殊领域还是存在大量的以JQuery走天涯的现象，但其中也不泛有追求技术者，如不才的鄙人。不才的本人曾以JQuery走天涯；后又接受了Knockoutjs，被他MVVM思...[2018/10/21]
js实现字体和容器宽高随窗口改变
用于字体大小和容器的宽高字体和宽高设为rem就可以了
var html = document.documentElement; function fonts(){ var hW = html.offsetWidth;&...[2018/10/21]
原来 JS 是这样的 - 关于 this
引子
习惯了别的语言的思维习惯而不专门了解 JavaScript 的语言特性的话，难免踩到一些坑。 上一篇文章 中简单总结了关于 提升, 严格模式, 作用域 和 闭包 的几个常见问题，当然这仅仅是了解 JavaScript 的一个开始，这次则依然从另一个大多人都见过但很容易搞错的概念开始了解 Ja...[2018/10/21]
jQuery中判断input是否被选中jQuery中判断input是否被选中
<input type="checkbox" id="ipt1" checked>
<input type="checkbox" id="ipt2" checked="checked">
<input type="checkbox" id="ipt3">...[2018/10/21]
自定义jquery插件
开发自定义Jquery插件
这几年随着各种前端框架的出现，操作DOM被更多的封装起来，有些项目你甚至可以完全抛开jquery进行开发，但不可否认的是，jquery多年来作为前端工程师的必备基本功夫有其不可替代的作用，即使你不用jquery，你也应该掌握他:
大多数项目依然在采用jquery，虽然...[2018/10/21]
HTML新手推荐
对于前端的学习要先了解一下浏览器和html的发展史 其次看看这篇文章：https: kb.cnblogs.com/page/129756/#chapter1 我读到这句话时候感觉到了科技这个东西有很多时候并不是一家独大的。 而现实生活中是需要互相学习的 奇怪的是，并没有哪个正式公布的规范对用户界面...[2018/10/21]
设计中的设计PDF下载高清完整扫描原版
最近在读《设计中的设计》一书，读到很多地方，我都感到很激动，内心充满很多美好的感悟，要将书合起来，慢慢想想，日后打开再读。需要学习的朋友可以通过网盘下载pdf版
http: putpan.com/f 2yei3b1e0n3s3h0u9/
在豆瓣上看到一些书评，大家都抱怨这书贵，另外有好几篇书评...[2018/10/21]
html学习
什么是HTML？
HTML:超文本标记语言。
所谓超文本也就是超链接,可以让我们从一个网页跳转到另一个网页。
HTML基本格式
<html>
<head> ...[2018/10/21]
sessionStorage 基本使用sessionStorage 基本使用
se ionStorage 是浏览器数据存储的方法之一，用于临时保存同一窗口的数据，关闭窗口后se ionStorage 的数据将会不存在，它是以 key value 键值对的形式储存。
基本用法
存值
se ionStorage.test="1212";
取值
var...[2018/10/21]
css实现修改默认滚动条样式
<!DOCTYPE HTML PUBLIC "- W3C DTD HTML 4.0 Transitional EN"> <html> <head> <title>scroll </title> ...[2018/10/21]
标签设置为inline-block后，如何消除标签之间的间隔。
标签设置为inline-block后，如何消除标签之间的间隔。
例如：
<div>
<ul> <li><a href="#">学习</a></li> <l...[2018/10/21]
vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目，不得不提打开微信浏览器内置地图导航的功能确实有点恶心。下次想起来了的话，进行总结分享一下如何处理。在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有死个方法可以适用。
方法一：引入淘宝开源的可伸缩布局方案
引入淘宝开源的可伸缩布局方...[2018/10/20]
爬取今日头条Ajax请求爬取今日头条Ajax请求
网址：https: www.toutiao.com/
搜索头条
可以得到这个网址：
https: www.toutiao.com earch/?keyword=%E8%A1%97%E6%8B%8D
开发者工具查看：
我们在搜索中并没有发现上面的文字，那么我们可...[2018/10/20]
了解CSS3的all属性的使用_CSS教程_CSS
一、兼容性
如下图：
兼容性还行， 除了IE不支持，其他浏览器基本上都绿油油，目前自娱自乐，内网项目什么的都是可以用用的。
二、all是干嘛用的
all属性实际上是所有CSS属性的缩写，表示，所有的CSS属性都怎样怎样，但是，不包括unicode-bidi和direction...[2018/10/20]
CSS实现元素居中原理解析_CSS教程_CSS
在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了。但就是这样一个从理论上来看似乎实现起来极其简单的，在实践中，它往往难住了很多人。
让元素水平居中相对比较简单：如果它是一个行内元素，就对它的父元素应用 text-align: center；如果它是一个块级元素，就对它自身应用 mar...[2018/10/20]
值得收藏的CSS命名规范(规则)常用的CSS命名规则 _CSS教程_CSS
CSS命名规范(规则)常用的CSS命名规则
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局...[2018/10/20]
html5 http的轮询和Websocket原理
一、HTTP的轮询
Web客户端与服务器之间基于Ajax（http）的常用通信方式，分为 短连接 与 长轮询 。
短连接：客户端和服务器每进行一次HTTP操作，就建立一次连接，任务结束就中断连接。
长轮询：客户端像传统轮询一样从服务器请求数据。然而，如果服务器没有可以立即返回给客户端的...[2018/10/20]
使用微信小程序开发弹出框应用实例详解
view cla ="container" cla ="zn-uploadimg">
<button type="primary"bindtap="showok">消息提示框</button>
<button type="primary"...[2018/10/20]
深入理解移动前端开发之viewport
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。
一、viewport的概念
通俗的讲，移动设备上的view...[2018/10/20]
值得收藏的八个常用的js正则表达式值得收藏的八个常用的js正则表达式
开发中如果有input输入框，难免就要写正则表达式，因此在这里总结了一些常见常用的正则表达式的书写方法，希望会大家有所帮助；
附图：
一.手机号码
$(document).ready(function(){
判断输入手机号码...[2018/10/20]
js中自定义react数据验证组件实例详解
我们在做前端表单提交时，经常会遇到要对表单中的数据进行校验的问题。如果用户提交的数据不合法，例如格式不正确、非数字类型、超过最大长度、是否必填项、最大值和最小值等等，我们需要在相应的地方给出提示信息。如果用户修正了数据，我们还要将提示信息隐藏起来。
有一些现成的插件可以让你非常方便地实现这...[2018/10/20]
ES6 系列之 Generator 的自动执行的方法示例
单个异步任务
var fetch = require(''node-fetch'');
function* gen(){
var url = ''https: api.github.com/user github'';
var result = yield fet...[2018/10/20]
经验首页