如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里 

搜索框有一些提示信息比如“关键字”之类，不写吧用户可能不知道这个搜索框是用来做什么的，写了吧点击搜索之后默认就把这些提示信息提交给数据处理页面处理去了，有点麻烦，而且也没有必要再去数据库查一次这个提示信息。

  可以用jquery 的插件 placeholder来解决这个问题，这个插件使用也很简单，在页面引入这个插件，    <script type="text/javascript" src="<%=basePath %>resources/scripts/jquery/jquery.placeholder.min.js"></script>（本人用的是miniui做的，所以引入的是jquery.placeholder.min.js）。

 在html中的输入框中如此设置

<div class="inputs">
         <input id="u_id" name="u_id" type="text" placeholder="请输入帐号"/>
 </div>
<div class="inputs">
     <input id="u_pass" name="u_pass" type="password" placeholder="请输入密码"/>
</div>

 js代码：

$(function(){
    $("input").placeholder();
    
    $("input").keydown(function(event) {  
        //alert(event.keyCode);
        if(event.keyCode==13){  
            login();  //转到登录的js方法
        }
    });
});

 但是问题来了，firefox，IE下都能实这个效果，chrome和safari点击后不会消失，得输入东西之后才会消失。本人在CSS方面菜鸟一只，后来让公司一位前段的同事去调试这个，最后在CSS里面加了一段：

input:focus::-webkit-input-placeholder,textarea:focus::

-webkit-input-placeholder{color:transparent;} 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

在过去的几年当中，网络上所流传的各种设计和开发资源，在素质上有明显的提升。其中有一些已经几乎成为了设计师和开发者必备的工具，但是其中绝大多数由于其应用范畴的局限，或者传播不够广，导致它们大多并广为人知。将这些素材集中到一起，很大程度上是希望它们的目标用户能够明白，需要这些工具的时候，上哪儿找。

这次的前端干货合集内容也很齐全，仔细看看，总能找到几款你所需要的。

MuzzleApp

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

在过去的几年当中，网络上所流传的各种设计和开发资源，在素质上有明显的提升。其中有一些已经几乎成为了设计师和开发者必备的工具，但是其中绝大多数由于其应用范畴的局限，或者传播不够广，导致它们大多并广为人知。将这些素材集中到一起，很大程度上是希望它们的目标用户能够明白，需要这些工具的时候，上哪儿找。

这次的前端干货合集内容也很齐全，仔细看看，总能找到几款你所需要的。

MuzzleApp

Muzzle 是之前 CodeKit 的开发者的新产品，是一款应用在macOS 平台的应用，当你和别人共享屏幕的时候，它可以帮你关闭通知和其他的私密信息，避免尴尬。无论你共享屏幕时候的平台是Skype、Google Hangouts 还是 Slack，它都能让macOS 进入“免打扰”模式。

Fractures

Fractures 是一个CSS类 合集，可以帮你快速创建网页原型。Fractures 是基于原子设计模式来构建的，样式表被分割为小段。

CSS DB

CSS DB 能为你列举出还在不断开发中的CSS特性列表以及目前的状态，让你可以更好地使用CSS选择器。

Preact

Apache 最近宣布禁止将 BSD+专利许可证分发给 ReactJS 和类似的项目，如果你的产品受到类似的专利许可证的影响，可以考虑 Preact 这样的 ReactJS替代品。

Pell

Pell 是一款用来构建所见即所得编辑器的JavaScript 库，默认情况下，它会带有常见的富文本编辑器的按钮。Pell 是使用ES6来构建，它不会像jQuery 那样需要大量的依赖库，体积小巧，可维护性强，还兼容 IE9。

Markvis

Markdown 在语法和功能上是有限制的，而Markvis 在它的基础上增加了图表的功能。

Moment PHP

Moment 是一款 PHP 库，用来处理日期和时间，类似于 Moment.js 之于 JavaScript。这个库的使用也很简单，可以快速设置时区、时间和显示方式。

Tonik

这是一款使用现代PHP来构建的Wordpress 新手主题，它充分利用了命名空间，自定义模板，自动加载器，WebPack 以及一大堆现代Web开发的优点。

Awesome Guidelines

这是一个包含了许多编程语言标准的列表，其中包含了C语言，JS，PHP，Ruby，甚至包括Visual Basic。这些标准能够帮你的代码保持简洁、干净。

BotUI

聊天机器人已经逐渐成为主流。这款 JS 库能够帮你构建对话式UI，这个库比起传统的“表单”体验更加优秀。

Reaction Commerce

开源的内容管理系统这些年变化并不大，其中绝大多数都是基于PHP来构建的。

TinyReset

这是一款非常小巧的 CSS resetter，它可以作为 Eric Meyer 所创建的reset.css的替代品。

Martinet

Martinet 是一款用来构建静态网站的命令行工具，其中包含了诸如 Webpack、TypeScript、Pug for templating、LESS和 NPM 这样的现代工具。它的存在让设计者不用担心网站配置，只需要正常使用 Martinet 就能对网站进行调整。

Billboard

BillboardJS 是一款基于 D3.js 来构建的交互式数据可视化数据库工具，它可以用来创建可视化的柱状图，饼图，折线图等。

SVGI

SVGI 是一款用来查找SVG元素和文件的命令行工具，安装它之后，你可以采用svgi 命令来检索 SVG 文档的大小、元素、层次结构和节点列表。

TimeStrap

TimeStrap 是另外一个非常实用的开源平台，它可以像 WordPress 一样可以在任何地方运行和访问的发票系统。对于喜欢自己控制而不希望使用外部服务来管理发票的用户而言，这是一个很好的选择。

Slate

Slate 是一款为API 文档创建静态网页的工具，诸如 WooCommerce、Travis-、CoinBase甚至 NASA 都采用了这一工具。

FontJoy

FontJoy 是一款能够生成大量有效字体组合的工具，点击“Generate”按钮就能生成许多新的字体组合。有趣的地方在于，这款工具还有具备深度学习的功能。

CoolHue

毫无疑问渐变色再一次回归主流，而CoolHue 是另外一款非常优秀的渐变色生成工具。

FrontPress

FrontPress 是一款前端框架，可用来控制 WP-API 和 AngularJS。如果你想创建一款用于 WordPress 的内容管理系统，可以从 FrontPress 着手。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

CSS Variable 即CSS变量，聊CSS变量之前，我想先来说说Sass和Less,还有Stylus，它们都是目前使用较为普遍的三款CSS预处理框架，我们为什么要使用它们呢，因为它们都可以让你在CSS中方便的使用变量、简单的程序逻辑、函数等在编程时使用的一些基本技巧，这些框架对于这种CSS预处理的技术已经非常成熟，可以让你的CSS代码变的更加简洁、便于维护、在编写的时候也无需考虑代码的兼容性。

Janilychen：以往做一些H5的运营项目，都是动画设计师使用Animate cc（原来的Flash）先设计好动画原型，然后交给我们UI开发来实现。做过动画开发的童鞋都知道动画开发都是比较耗费时间精力的，而且还要高质量的还原动画设计师设计好的动画，来回沟通成本也非常高。

那有没有一种的方法来改善这种流程，提高开发效率的同时还能完成高品质的动画呢？

经过一段时间的摸索，发现AnimateCC（就是原来的Flash）可以导出canvas动画，而且是基于createjs这个开发轻量级游戏的js库的，非常适合用来做移动端的一些h5动画。不仅缩短制作动画所需要的时间。同时它也是一个可视化的IDE，不需要编写代码就可以完成高品质的动画效果；还可以通过Javascript，为动画效果添加交互性。

用户真的有通过电台App来跑步的需求吗？

这是我们在规划这个产品功能时的第一个问题。即使在音乐类软件都已经上线了跑步相关功能的当下，我们依然发问——真的有人，通过电台App来跑步吗？

如果仅仅是针对现在电台类App，那需求一定是微乎其微，不同于音乐统一的内容属性，电台类内容属性太丰富——音乐时间短，小说时间长；相声很搞笑，新闻很严肃······这些内容决定了他们天然就不能像音乐一样随机重组。

有时候我们需要退一步来思考需求。

2016年末，各路APP也纷纷展开一轮轮的数据厮杀，从不同的视角阐述过去一年的精彩故事。而坐拥庞大用户数据的QQ空间，在这个既难忘又不舍的2016年，用户的故事将会被如何演绎，在寒冬带给用户怎样的温暖回忆呢？

几个星期前，CSS Variables ——CSS 变量草案发布在了W3C官方 ,更准确的应该叫CSS 自定义属性，目前在Chrome Canary 版里面已经支持，开启该功能见附[1]

当Chrome浏览器工程师Addy Osmani第一时间把这消息发布在twitter后，遭到了数万人的否定、敌视和怀疑。于我而言，更多的感到是一个惊喜，因为这个功能实在让人太兴奋了。

快速的扫了一遍之后，发现99%人抱怨的无外乎这两点：

• 语法太丑和不够简洁
• Sass 、Less早就有这些玩意了，不太care

虽然我承认我也对这语法很反感，更重要的是理解语法不只是反复无常的在选择。CSS工作组讨论很久语法的长度，他们提取了一些点，考虑到CSS的语法兼容不会与未来增加的其他语言冲突。

下划线 一般在文档中常被用作增强注意，在过去打字机时代，下划线成为了唯一的一种文字强调方式，具体的操作方法是在已经打出来的文字上面退格，再在同样的地方打出下划线。

而在网页中，可以链接的文字（超链接）下面一般都有下划线。在制作页面的时候，当链接需要下划线的时候，UI开发很自然的会想到使用text-decoration属性来显示，例如这样：

以上显示的是设计稿和浏览器渲染的实际效果，我们会发现浏览器渲染的效果和设计稿有出入，主要表现在下划线的位置，这时候细心的设计师会要求你想办法实现他们本来想要实现的效果。可惜的是，在这几年的网页排版技术发展中，并没有更好的css属性出现来支持下划线的个性化设置，所以这个问题常常会被忽略。

这个一般在UI开发看来，可能觉得并没有什么问题，难道说不应该使用text-decoration这个属性吗？