前端白豆-优快云博客

原创 css选择器控制中间多个li

给下标大于2并且小于8的li（即第3个li到第7个li加样式），用过滤函数选择 $('li').filter(function (index) {return index>2&&index<8 }).css('color','#f00')

2018-03-12 16:14:18 1434

转载 HTML编码规范

（一）命名规则：头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar

2018-03-12 16:04:16 276

转载 new Vue() 和 export default {}

Vue 是什么？ po 主的理解是 Vue 就是一个构造函数，生成的实例是一个巨大的对象，可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。所以渲染的时候，可以使用构造 Vue 实例的方式来渲染相应的 html 页面：new Vue({ el: '#app' ...})那么 export default {} 又是来干嘛的？这是在复用组件的时候用到的。假设我们写了一个单页面组

2018-03-09 20:48:47 5015

1.event.stopPropagation()方法这是阻止事件的冒泡方法，不让事件向document上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，2.event.preventDefault()方法这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；3.return false ；这个方法比较暴力，

2018-03-09 01:38:51 15138

原创字蛛 font-spider 压缩字体使用方法

1、 npm install font-spider -g 安装字蛛 2、 css样式表中引入 @font-face 例如： /* 汉仪力量黑字体 */ @charset “UTF-8”; @font-face { font-family: “HYLiLiangHeiJ”; src: url(“../fonts/HYLiLiangHeiJ.woff”) format(“woff

2018-03-04 12:52:54 5837

原创 node.js的安装和本地服务器手机可查看自己写的网页

node.js的安装和本地服务器手机可查看自己写的网页1 官网下载node.js文件，下一步直到安装完成； 2 运行cmd（win10要以管理员身份运行cmd，否则会报错）； 3 node -v 和 npm -v查询是否安装成功； 4 然后输入npm install anywhere -g来安装anywhere，全局安装 4 win10 要配置变量环境我的电脑高级系统设置环境变量打

2018-02-26 22:18:33 1404

原创 css 六边形

.introduce-content .con-icon::before { content: ""; border-left: .45rem solid transparent; border-right: .45rem solid transparent; border-bottom-width: .23rem; border-bottom-style: solid; ...

2018-02-25 15:00:13 256

原创 transform

水平垂直移动，以及同时旋转，必须要写一起，旋转和移动分开写竟然会覆盖不生效。 position: absolute;left: 50%;transform: rotate(45deg) translate(-50%,0);

2018-02-25 13:52:05 396

转载 css布局异常查找神器 GhostPage扩展插件

使用Chrome浏览器，那么可以试试这个GhostPage扩展。写页面的时候右边时不时会出现空白每次都找好久才知道是那个盒子出现内容超出宽度这个插件安装好后打开页面点击这个插件页可以了方便好用是在知乎上找到的解决办法https://www.zhihu.com/question/34833105

2018-02-08 00:24:48 607

原创项目中遇到的问题笔记

css部分：让input中的数字和文本对齐 vertical-align: text-top;让图片和文本对齐 vertical-align:middle;让a转为行内块元素display-inlineblock；————————————————————————重置input按钮的样式：（找了很多都很麻烦，这个实践有效）： 1：将默认样式透明隐藏；

2018-02-05 16:26:34 186

原创 jquery和zepto冲突

移动web项目中有其他插件用到jq，因为是移动项目起初就用的zepto，结果两个一起竟然报错了。又学习到了一点：虽然一般不推荐jq和zepto同时使用，如要同时引入这两个文件时，加一句代码就可以避免冲突， jQuery.noConflict() 123加的这句script>jQuery.noConflict()script>

2018-01-29 21:15:39 3002

原创 zepto.js 安装使用

zepto.js 使用移动端web开发的类似jq的库最开始引用zepto就开始用结果没有效果zepto模块化初始只有5个模块不包含需要用到的touch方法（专门针对移动段却不包含这块0 0!)安装下面这个链接将其他需要的模块重新构建https://www.cnblogs.com/yangmengsheng/p/6293443.html备份

2018-01-29 15:06:50 1649

转载 js 的闭包和构造函数

学习——觉得这段话说得很清楚，能够理解。面向对象的特点：封装、继承、多态js闭包：只实现了代码封装，如同面向对象里面的单例类，不需要实例化，不会存在多个副本。构造函数：实现了封装和继承，每次实例化都会形成一个新的对象。综上所诉：只需要操作一个对象时用闭包，例如工具类；需要对多个对象进行操作时用构造函数，例如功能性插件。常见用法：闭包实现命名空间，构造函数实现具体功能。

2017-12-19 23:26:30 1288

转载前端了解的协作流程

淘宝设计师分享的他们的工作流程：·解释一下就是：·第一步，视觉设计阶段，设计师按宽度750px（iphone 6）做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。第二步，输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽

2017-12-19 13:49:25 425

转载 Font-Awesome 强大的字体图标

可伸缩的图标(矢量化),高度自定义(大小,颜色,阴影等)；优势不依赖Javascript 矢量图形,无限缩放免费,可用于商业CSS控制样式,自定义图标颜色,大小,阴影,一切可能实现的效果支持retina显示(苹果retina 屏幕)源于BS框架(最初的目标设计使用方向),现在基本支持主流的框架图标用到的animation适用于I

2017-12-11 22:05:35 852

转载 Sublime text 3如何编辑less并转(编译)成css文件

学习收藏1、在sublime里Ctrl+Shift+p打开命令面板，输入install package安装好less（less语法高亮功能插件）和Less2Css（编译功能插件）这两个插件。2、安装好插件后还不能编译，必须还要安装好node.js才行。一般安装好之后就已经自动添加到系统环境变量Path里，不过最好打开确认一下，打开方法：右键计算机->属性->环境变量->在系统变量里找到

2017-12-08 17:48:06 393

转载 Animate.css 一款强大的预设动画库

Animate.css是一个有趣的，跨浏览器的css3动画库。很值得我们在项目中引用。用法1、首先引入animate css文件123head> link rel="stylesheet" href="animate.min.css">head>2、给指定的

2017-12-05 11:08:49 730

原创 <meta name="" content=">

一、语法：二、参数解析：a、name项：常用的选项有keywords(关键字) ，description(网站内容描述)，author(作者)，robots(机器人向导)等。b、http-equiv项：可用于代替name项，常用的选项有Expires(期限)，Pragma(cache模式)，Refresh(刷新)，Set-Cookie(cookie设定)，Window-ta

2017-12-05 10:12:06 262

转载遍历 jquery $().each和$.each()

原文：http://www.frontopen.com/1394.html在jquery中，遍历对象和数组，经常会用到$().each和$.each()，两个方法。$().each 在dom处理上面用的较多。如果页面有多个input标签类型为checkbox，对于这时用$().each来处理多个checkbook，例如：$(“input[name=’ch’]”).eac

2017-12-02 17:01:56 328

原创自适应响应式流式的区别

流式是根据宽度设定大于多少宽度是什么样式小于多少宽度是什么样式响应式和自适应相同点：都是基于设备的大小而变不同点：响应式会根据设备的变化 css样式作出对应的样式改变在各设备上看到的布局是不一样的自适应只是根据设备的变化更改

2017-12-01 15:44:20 413

原创自定义字体图标

/*自定义字体图标*/@font-face{font-family: wjs_font_icon;src: url(../fonts/icomoon.eot) format('embedded-opentype'), url(../fonts/icomoon.svg) format('svg'), url(../fonts/icomoon.ttf) format('

2017-12-01 12:43:37 409

转载 swipe.js插件相关用法

官方网站http://swipejs.com/https://github.com/bradbirdsall/Swipe简介swipe.js是一个轻量级的移动滑动组件，支持触摸移动，支持响应式页面。下面是从GitHub上翻译的用法和文档用法 Swipe只需添加很简单的一段代码即可，如下div id='slider' class='

2017-11-29 23:54:31 1066

原创响应式双飞翼雪碧图居中方法

自己学习记录：background-origin：content box；用于雪碧图平铺定位时，从内容开始显示，再配合padding值；background-clip:conten box; 从内容开始将多出的内容剪切掉；

2017-11-29 23:22:51 288

转载 input外面为啥包裹form？

把表单中的数据提交到服务器就需要，form有action="数据提交到哪里(index.php)"，method="提交方法(get/post)"不需要提交的数据可以不用form

2017-11-29 23:20:45 886

转载 a href=#与 a href=javascript:void(0) 的区别

a href="#"> 点击链接后，页面会向上滚到页首，# 默认锚点为 #TOP 点击链接后，页面不动，只打开链接作用同上，不同浏览器会有差异。点击链接后，不想使页面滚到页首，就用href="javascript:void(0)"，不要用href="#"，return false也有类似作用详解href="#"与href="javascript:void(0)"的

2017-11-29 23:18:57 278

白豆的微博