2016年12月_小太阳sunshine

原创 jQuery实现编辑修改表格table

html：<table> <caption>标题</caption> <thead> <tr> <th scope="col">糖果</th> <th scope="col">蔬菜</th>

2016-12-28 15:36:16 7626

无论是在工作或者面试中，总会遇到关于浏览器兼容性的问题，往往会感到一头雾水不知从何说起，于是我结合一些工作经验及从网上搜集的一些资料对此做了一些汇总，希望对从事前端工作的朋友们起到一些帮助。css：1.初始化样式：由于浏览器对标签的默认支持不同，所以我们要统一，就要进行CSS reset。如YaHoo的CSS reset。2.IE6双边距bug: 块属性标签添加了浮动float之后，若在浮动方向上也

2016-12-28 14:09:11 10784

原创常用浏览器内核简说

浏览器最重要或者说最核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，我们一般习惯将之称为“浏览器内核”，负责对网页语法的解释并渲染网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。 1、Trident内核：IE最先开发或使用的，也称IE内核，360浏览器使用的也是IE内核； 2、Webkit内核：谷

2016-12-28 10:56:54 433

原创 --save-dev 和 --save的区别

–save-dev 是你开发时候依赖的东西（比如gulp就是开发环境下依赖的一个前端工具），–save 是你发布之后还依赖的东西（比如JQuery等）。

2016-12-26 17:04:51 608

原创在mac终端启动sublime编辑器

sudo ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/bin/subl成功以后就可以直接在 Terminal 中输入 subl xxx 来用 Sublime Text 打开文件了，十分的方便哦。

2016-12-26 14:49:57 2490

原创 JQuery2.2.3版本中toggle被淘汰后的替代方法

项目中解决方法：var $choices = $('.z-ser .col:gt(3)'); $choices.hide(); var $toggleBtn = $('.btns .more'); var flag=true; $toggleBtn.click(function() { if(flag){ $choices.sl

2016-12-22 19:19:38 2268

原创 git入门常用命令

1. 从远端程序克隆到本地：git clone 服务器地址2. 在本地创建新的分支：git branch 分支名称git branch 查看本地所有分支 git branch -a 查看所有的分支 git branch -r 查看本地所有分支3.切换分支；切换分支：git checkout 分支名；4. 查看当前项目中代码状态：git status5. 将需要提交的文件添加进来：git add

2016-12-20 12:37:57 352

原创 webstorm如何添加vue支持

本人使用的是webstorm2016 2.3版本，结果竟然不支持vue文件，于是经过查找找到了一个方法，亲测可用，非常简单哦。

2016-12-14 11:27:08 15101 5

原创 css3制作帧动画

demo：出票 html部分：<div class="animate"></div>css部分：.animate{ width:56px; height:46px; position: absolute; top:50%; left:50%; margin:-23px 0 0 -28px;

2016-12-05 17:05:43 479

原创 css制作上下左右箭头

html部分：<div style="position: relative"> <span class="arrow arrow-down"></span> <span class="arrow arrow-up"></span> <span class="arrow arrow-left"></span> <span class="arrow arrow-r

2016-12-05 16:11:19 3255

原创 css多行文本溢出显示省略号...

overflow: hidden;text-overflow: ellipsis;white-space: nowrap;移动端页面：overflow : hidden;text-overflow: ellipsis;display: -webkit-box;//必须结合的属性，将对象作为弹性伸缩盒子模型显示。-webkit-line-clamp: 2;//用来限制在一个块元素显示

2016-12-05 16:04:53 436

原创工作常用正则表达式

校验E-Mail 地址：[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w]校验身份证号码：15位:^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$18位：^[1-9]\\d{5}[1-9]\\d{

2016-12-05 15:34:55 361

原创实现侧栏固定宽度，内容栏宽度自适应

常用侧栏固定宽度，内容栏的宽度自适应，在不同的分辨率下实现宽度自适应。下面是我根据工作实践总结的一些实现方法的demo。方法一：固定宽度区浮动 float，自适应区宽度自适应设置 marginhtml结构：<div class="content"> <div class="slider"> <ul> <li><a href="#">导航1</a></li>

2016-12-03 17:15:39 655

原创小标题两侧加横线或背景图片自适应布局实现技巧

方法一：使用背景图html结构：<div class="tit-bar"> <div class="deg">满意度调查</div></div>css结构：.tit-bar{ background:url(../img/line-bg.png) repeat-x center; margin:0 auto; padding:5px 0;}.tit-bar .deg

2016-12-03 13:26:48 1973

原创初始化移动端样式

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0; padding:0;}a { text-decoration: none;}ul,ol { margin: 0; paddin

2016-12-01 09:30:36 4121

原创移动端meta几个值的设置以及含义

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 说明： width - viewport的宽度 height – viewport的高度 initi

2016-12-01 09:22:13 5357

sunshine的博客