2017年07月_front_end_fan

12月 11月 10月 09月 08月 07月 06月

原创文本溢出省略号

最近开发过程中，经常遇到文本溢出的显示问题。现归纳一下几种方法。早在2012年，所有浏览器都已经支持text-overflow:ellipsis; 一、单行文本溢出 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title>

2017-07-19 11:30:04 544

转载秒懂Vuejs、Angular、React原理和前端发展历史

今天来说说 “前端发展历史和框架” 「前端程序发展的历史」「不学自知，不问自晓，古今行事，未之有也」我们都知道现在流行的框架：Vue.js、AngularJs、ReactJs，已经逐渐应用到各个项目和实际应用中，它们都是MVVM数据驱动框架系列的一种。在了解MVVM之前，我们先回顾一下前端发展的历史阶段，做到心中有数，才会更好理解。这段回顾历史，由于网上就可查不少资料，但都篇幅很长，晦涩难懂。所

2017-07-17 11:05:25 664

转载榜样

这也是MVVM的核心思想：关注Model的变化，让MVVM框架利用自己的机制去自动更新DOM，从而把开发者从操作DOM的繁琐中解脱出来！也就是所谓的数据 - 视图分离，数据驱动视图，视图不影响数据，再也不用管繁琐的DOM结构操作了，世界顿时清净，完美！常见的MVVM框架：Vue.JS、AngularJS、reactJs 等。

2017-07-31 16:21:49 341

原创 table表头固定表体滚动

实际的项目中需要用到弹出框包含表格时，万一表格很长不方便显示，这时就需要滚动表格，那么怎么才能实现呢？如下，是用纯css实现的滚动表格（但是firefox和360极速模式下存在兼容性问题，有待提高）原理：外面一个大的div，包裹两个div>tabel,上面一个div原来模拟固定的表头，下面的div设置overflow-y:auto; 其中用到 colgroup 标签，点我了解colgrou

2017-07-31 15:06:04 1456

原创 jsp学习总结

注：个人觉得作为一名合格的前端，我们即使不会写后台，也必须要对后端语言有所了解，本文简述的是后端常用的jsp和js语句。一、tomcat的使用和jsp的基础语法tomcat目录介绍如下：bin：二进制执行文件。里面最常用的文件是startup.bat，如果是 Linux 或 Mac 系统启动文件为 startup.sh。conf:配置目录。里面最核心的文件是server.xml。可以在里面改端

2017-07-31 10:18:53 338

转载直接双击启动tomcat中的startup.bat闪退

免安装的tomcat双击startup.bat后，启动窗口一闪而过，而且tomcat服务未启动。原因是：在启动tomcat是，需要读取环境变量和配置信息，缺少了这些信息，就不能登记环境变量，导致了tomcat的闪退。解决办法：1.在已解压的tomcat的bin文件夹下找到startup.bat，右击->编辑。在文件头加入下面两行： SET JAVA_HOME=D:\Java\jdk1.

2017-07-28 15:50:01 306

转载 ECMAScript6新特性（一）

新特性概览参考文章： http://www.cnblogs.com/Wayou/p/es6_new_features.html ————————————————————————————————————————————————————————— ES6测试引入文件 <<bootstrap.js>><<traceur.js>>————————————————————————————————

2017-07-28 13:51:17 393

原创 div实现高度自适应并限制输入字数

div模拟textarea实现高度随着内容自适应，并用js限制输入字数一、jQuery版<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>collap

2017-07-28 12:07:05 3217 1

原创 bootstrap 和 jQuery mobile学习总结

一、bootstrap 组件Bootstrap 插件部分总结：1、下拉菜单（dropdown）触发源 data-toggle="dropdown"被出发 <ul class="dropdown-menu"> (次要属性: .dropdown-toggle/.caret/.divider)-----------------------------------------

2017-07-28 11:04:06 2035

原创 textarea 高度自适应

提出问题：作为多行文本域功能来讲，textarea满足了我们大部分的需求。然而，textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应。textarea总是很自信地显摆它的滚动条，高度固执地岿然不动。所以，有时候，为了增加交互体验想让文本域高度自适应的时候，就会遇到麻烦。解决方法：利用div模拟textarea （contenteditable=”true” + word-

2017-07-27 14:29:02 415

原创 jquery mobile (自定义css、js需要刷新才有效果)

解决办法：初学php和jquery mobile，请求php页面返回后遇到js不生效，需要刷新才行，而且返回到前一个页面也变了，需要刷新，哎，各种无厘头，几番搜索下才找到了以下页面，谢谢写下此文的作者。在要链接的地址加上data-ajax=”false”。如 <a class=”ui-link-inherit” href=”http://wap.ablanxue.com/mobileone_15

2017-07-27 12:49:29 1661

转载 HTML5终极备忘大全（图片版+文字版）

评论：不久的将来html5必将统一前端标记性网页编程语言，这些新标签和新属性以后还要多记多用！仅在此处收藏之！一、前言兼图片备忘下图是我从testking网站上的Ultimate HTML5 Cheatsheat这篇文章中备忘图片（已大小优化，因为图片较高，故滚动显示）。但是，上面毕竟是图片格式（原图上兆），而且还是英文的，所以自己觉得有必要将上面的内容文字化，同时做下简单的中文翻译。整理一番，

2017-07-25 10:48:32 503

原创 js获取页面元素距离浏览器工作区顶端的距离

先介绍几个属性：（暂时只测了IE和firefox，实际上我工作中用到的最多的是chrome）网页被卷起来的高度/宽度（即浏览器滚动条滚动后隐藏的页面内容高度）(javascript) document.documentElement.scrollTop //firefox(javascript) document.documentElement.scrollLeft

2017-07-25 10:11:11 5674

转载 css代码实时预览（脑洞大开的操作）

提问：一些网站上面是如何实现，css代码既可以显示又可以编辑，而且编辑完了可以实时预览（即网页上改了css立马显示效果）？答：（功能一）显示：style 标签默认显示方式 display:none 要改成 display:block （功能二）可编辑：<style contenteditable> .test_image{…}< /style> 一、单刀直入，效果抢先如果您

2017-07-25 10:02:41 7894

转载 CSS特殊样式（七）CSS3下的纸张效果实现展示

总结：1、border-radius可以给某一个拐角设置两个值，实现纸张卷边效果（如：border-bottom-right-radius: 500px 30px;）2、本文使用价值不大，主要用于学习和熟悉CSS3属性一、中规中矩的效果所谓“中规中矩的效果”就是加个投影，贴个胶带什么的。效果如下：您可以狠狠地点击这里：中规中矩纸张效果demo这里纸张本身的效果没有什么说头的，就是个CSS3

2017-07-24 17:14:55 5675 1

转载 CSS特殊样式（六） box-shadow实现纸张的曲线投影效果

总结：1、box-shadow属性，存在兼容性问题使用时需： -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0,

2017-07-24 17:01:09 3388

转载 HTML5 drag & drop 拖拽与拖放简介

总结：1、此方法不支持移动设备，ios/andriod需要使用touch事件或者zeptoJs2、ondragover执行preventDefault()，是因为默认情况下是无法将数据、元素放到其他元素中的，如果需要允许，就要阻止默认处理3、此为浏览器默认拖放样式，比较机器生硬，拖拽的图片不能跟随水熬移动；但是代码清晰简单一、前面的话HTML5提供专门的拖拽与拖放的API，以后实现这类效果就不

2017-07-24 16:35:03 565

转载我是如何对网站CSS进行架构的

总结：对网站各个部分样式进行分类（css reset，公共样式，通用样式，单页面的精细样式。。。）；“雪碧图”如何排版和命名，才能更加简单实用（“小图标矩阵命名法”）一、写在前面的都是自己积累形成的一些东西，可能带有明显的个人印记。不是专业内容，不是权威指南，只是展示一点自己的观点，借此希望能与各位优秀的同行交流看法，见解。以得到进步与提高。本文原地址：http://www.zhangxinx

2017-07-21 11:35:52 548

转载 CSS特殊样式（五）CSS3 text-fill-color简介及应用展示

本文转自 http://www.zhangxinxu.com/wordpress/2010/06/css3-text-fill-color%E7%AE%80%E4%BB%8B%E5%8F%8A%E5%BA%94%E7%94%A8%E5%B1%95%E7%A4%BA/ <!DOCTYPE html> <html> <head lang="en"> <me

2017-07-21 10:00:45 899

转载页面可用性之浏览器默认字体与CSS中文字体

一、浏览器默认字体众所周知，浏览器字体默认的设置为“宋体/simsun字体 16像素”，例如Chrome浏览器下：二、CSS中设置的字体考虑到兼容性，我们总会在CSS中队字体进行一些设置，这类设置往往设置在body标签上，无论是人人网，腾讯网，淘宝网，开心，新浪，网易等都是如此。以下为各个大型网站的body的字体设置：人人网：body{font-family:Tahoma,Verdana,ST

2017-07-21 09:17:23 7624

转载 CSS特殊样式（四）使用border制作三角、圆角图形

一、前言利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了，裹脚布的话就不说了，直接进入正题。本文作者

2017-07-20 16:31:48 1717

转载 CSS特殊样式（三）纯CSS实现各类气球泡泡对话框效果

一、关于纯CSS实现气泡对话框首先，来张大图：上边这张黄黄的，大大的，圆圆的，有个小尾巴，文字内容有些YY的图片，就是使用纯CSS实现的气泡对话框效果，一点图片都没有哦。看到这里，你是不是跟我一样，有些惊叹CSS的潜力呢。关于这张图片，暂时先放到一边，下面我要讲一些与主旨相关的比较重要的，同时又很实用的一些技术。我们首先看下面这一张图片（截自人人网）：可能颜色有点淡，在左上角有个90度的尖角，于

2017-07-20 10:55:20 2623

今年大四，距离7月来阿里实习也已经两个月了，经过三轮面试，实习转正终于算是尘埃落定下来了。其实每一次面试都是一个很好的促进自己成长的机会，能够带给自己一些启发和发现自己的问题。这里把转正面试中的一些收获进行总结，纪念这个我人生中非常重要的节点。部门主管面试第一轮面试是由部门主管师兄A面的，主要是讲自己在实习期间做的事情，自己的成长，收获，变化等，形式是PPT展示+提问答辩。我的PPT大概准备了两天多

2017-07-19 18:23:25 7772

原创 CSS特殊样式（二）三种css方法实现三角效果

遇到对话框、信息提示框就必须要用图片吗？强大的css就不能实现吗？“仅用css就能解决一切复杂样式；不用hack就能解决各浏览器的兼容性问题，是为css大神” —–赞哥<!doctype html><html><head><meta charset="utf-8"><title>三种css方法实现三角效果</title><scrip

2017-07-19 18:07:13 524

原创论js的段位级别

我在达内培训期间写的代码JS 0段（逻辑不清晰，废话也多，可以优化的地方太多，复杂一点的代码就写不出来）我现在自己写的js应该算得上2段，（虽然比较简单，但逻辑清晰没有废话，绝大部分的网站效果都能熟练写出了,比如说淡入淡出轮播，左右滑动轮播，滚动楼层，滚动新闻，各式各样的标签页切换效果，弹出框效果，各种鼠标移入图片、按钮效果，跳转，刷新，单选，多选，下拉菜单，搜索，动画。。。。。。能够熟练的增删改查

2017-07-19 15:47:38 657

原创 HTML5基础

一 html5标签大全html4原有的元素(此处只列出常用元素，全部元素列表（包括h5）见http://www.runoob.com/tags/ref-byfunc.html) 和 HTML 元素速查列表：http://www.runoob.com/html/html-quicklist.html：元素用途 <h1> - <h6> 标题，<h1>最大，<h6>最小(浏览器会自动地在

2017-07-19 13:52:11 328

原创 js 获取前一个月的日期

js 获取前一个月的日期，加详细注解<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><input type="text" class="getLastMonthYestdy"/><script src="http://libs.baidu.co

2017-07-18 10:47:17 4979

原创 js获取当前日期的前一天、一月、一年的日期明天、后天

function getYestoday(date){ var yesterday_milliseconds=date.getTime()-1000*60*60*24; var yesterday = new Date(); yesterday.setTime(yesterday_milliseconds);

2017-07-18 09:42:59 15845

转载 css margin的相关属性，问题及应用

这篇文章发布于 2009年08月25日，星期二，03:22，归类于 css相关。阅读 87956 次, 今日 33 次 by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhang

2017-07-17 17:49:09 399

转载刷新页面所有方法

手动刷新Javascript 刷新页面window.location.reload();使用window.open()弹出的弹出窗口，刷新父窗口非模态刷新父页面：window.opener.location.reload()使用window.showDialog弹出的模式窗口模态刷新父页面：window.dialogArguments.location.reload();先来看一个简单的例

2017-07-17 15:44:17 1452

转载知识普及：彻底弄懂css中单位px和em,rem的区别

国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？PX特点1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分

2017-07-17 14:21:50 357

转载哪种公司能干哪种不能

公司选择问题好多朋友在后台给我留言说：怎么最近一周没见你装逼发文了，出啥事儿了？谢谢各位关心，其实事儿到没出大事就是身体偶感小恙，虽不是大事但耽误了很多私人时间，也没更文，所以大家工作至于一定要注意身体，身体是咱挣钱的本钱，更是咱享受生活的本钱啊！今天我们话题是：我们到底该选择一个什么性质的公司，对我们职业生涯有帮助这个话题说起来不容易，而且得在工作一段之后才能得出最中肯的结论，那么今天我们就来针

2017-07-17 11:02:55 234

原创 TabIndex 属性 Tabindex="-1" 与Tabindex="0"、任意数字

html中的tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序。把控件的tabIndex属性设成1到32767的一个值，就可以把这个控件加入到TAB键的序列中。这样，当浏览者使用TAB键在网页控件中移动时，将首先移动到具有最小tabIndex属性值的控件上，最后在具有最大tabIndex属性值的控件上结束移动。如果有两个控件的tabIndex属性相同，则以

2017-07-13 09:10:08 604

原创 BootStrap 模态框禁用ESC关闭、禁用点击空白处关闭

[csharp] view plain copy print?<!–Edit Model–> <div id=”AddProjectModel” class=“modal inmodal” tabindex=“-1” role=“dialog” aria-hidden=“true” data-keyboard=“false”> </div> <!--Edit Model--

2017-07-13 09:06:54 1366

原创常见的web性能优化方法

前言：关于优化问题，随着项目经验不断累积，多方查找资料进行拼接合并，形成如下文章，之后遇到类似好的方法，会不断补充完善。前端是庞大的，包括 HTML、 CSS、 JavaScript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ?1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提

2017-07-13 08:12:04 326

原创一劳永逸的搞定 flex 布局

jQuery Ajax 实例 (.ajax、.ajax、.post、$.get)

2017-07-13 08:09:50 640

转载 jQuery Ajax 实例 ($.ajax、$.post、$.get)

jQuery在异步提交方面封装的很好，直接用AJAX非常麻烦，jquery大大简化了我们的操作，不用考虑浏览器的诧异了。推荐一篇不错的jQuery Ajax 实例文章，忘记了可以去看看，地址为：http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html 和 http://www.w3school.com.cn/jquery/ .post、.

2017-07-12 08:27:59 455

转载移动web开发框架研究

纯粹的总结一下移动web开发框架，移动web开发框架有jQuery Mobile 、Sencha Touch等等,他们都来源于web开发，是成熟的框架，jQuery Mobile出自于jquery家族，Sencha Touch来自于ExtJS。jQuery Mobile 和Sencha Touch都是比较成熟老牌的框架，项目中也有应用。国内也有公司，像BAT巨头也在探索和实现了适合自己的移动web

2017-07-12 08:25:52 295

转载 bootstrap-table数据循环以及分页

[html] view plain copy print?<!DOCTYPE html> <html> <head lang=“en”> <meta charset=“UTF-8”> <title>bootstrap-table</title> <link rel=“stylesheet” href=“css/bootstrap.min.css”/> <l

2017-07-12 08:23:38 2112

转载前端面试问题三

1. 常用那几种浏览器测试？有哪些内核(Layout Engine)?(Q1) 浏览器：IE(Trident)，Chrome，Safari(webkit),FireFox(gecko)，Opera(presto最好)。(Q2) 内核：Trident，Gecko，Presto，Webkit。2. 说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）(Q1) 行内元素：会在水平方向排

2017-07-12 08:19:11 687