编程语言
分享接触过的编程语言知识,能够帮助一些朋友
程序代码和UI设计共同需要的几种状态
产品开发完成之后,在产品进行测试时,我们很难去发现一些问题.因为这时候的测试人员最初是团队编代码的人或者是团队测试人员.他们往往是在考虑产品数据填充之后的状态.所以很多微小的问题,往往是发现不了的.发现的时候,可能是在产品发布之后用户的反馈或者是通过一些不熟悉你产品的人进行测试.但是这时候,可能就会造成用户的流失率会提高,耗费的成本也会提高. 如何解决这个问题,就需要参与项目团队的人,明确产品的功能不同的状态,编码的人在编代码时,就会写出几种状态的代码,UI设计的人,就会设计出几种状态的界面,测试的人当
css伪类中的:target的使用
之前:target伪类,我们已经接触过了. :target是css中伪类,主要是应用在url中的#链接,以及匹配对应的id名称.例如下面的例子:代码名称http://www.wutongwei.com/#home对应的home 的结构为代码名称<section id="home"> this is target</section> 这种状态,我们可以通过CSS来体现他的效果.代码名称:target{ color:#ff6600;} 这时候,当浏览这个链接的时候,就会将对
就目前环境,如何成为能工作的前端开发者!
今天这篇文章主要对现在我接触到的工作环境,做了一个前端工程师基本的总结.如何能够在工作中很好的进行开发. 最后也加入了一些新手需要练习的作业.a) 基础学习:1) WWW服务的基本概念工作原理2)了解路径问题,绝对路径和相对路径 (http://blog.csdn.net/hgd613/article/details/8041662)3) html,css,javascript的详细学习.熟悉或者精通.(当然这只是一个概念,没有任何一个人说自己精通某个编程语言,就算他是某个语言的缔造者.技术都是在快速更新的.)3) javascript谷歌编码规范http://docs.kissyui.com
Javascript实现苹果设备里的计算器
今天我们使用JAVASCRIPT来实现一个计算器.整个计算器,是为了教一些同学和实现的.我们直接看下效果.(代码长的,请横屏查看!)首先我们先把界面做好,界面选哪个号呢? 我就直接模仿苹果里的计算器样子.代码名称<div id="calc">
<div id="result">0</div>
<div id="key">
&n
CSS3实现苹果电脑的DOCK菜单栏
使用苹果电脑的朋友,都知道,在桌面的下方有个DOCK,就是一个存放应用程序的一栏.使用起来非常方便.这一栏的一些效果也是挺好看的.那我们今天就用CSS3来实现这个原理.首先我们需要设计好DOCK栏结构,代码如下代码名称<ul>
<li id="menu1">
<a href="#menu1">
CSS3实例: 实现 swap 动画
CSS3动画的出现,让我的真的非常喜欢,因为他够简单.今天我们来实现一个交换动画,一个笑脸慢慢从远处,回到自己的原来位置的一种效果.这种动画在JS里面也是很多见的.首先得将HTML结构设计好,一个固定的窗口,然后一个带有黑色背景的笑脸代码名称<div><span>?</span></div>笑脸居中我们用最新的布局flex来实现,这个也是很好用的属性.之前文章中已经有flex的相关教程,大家不懂的可以看看.代码名称div{ width: 200px; height: 200px; color: #fff;
谷歌浏览器开发者工具 Timeline,谈性能优化
DevTools工具Timeline panel一直是最好的性能优化的第一站.集中说明你的应用程序活动,在加载,脚本,渲染,和重绘花费的时间.最近,我们升级了Timeline,可以更深入的了解APP的性能.我们添加了以下特点:1) 整合了 Javascript profiler. (包含Flame chart)2)frame viewer 帮助你可视化复合层.3)paint profiler 详细的查看浏览器的绘画活动.注意本文中描述使用Paint捕获选项确实导致一些性能开销,所以选择自己想要的选项.如果你以前使用过 Profiles面板,你可能知道Javascript CPU profile
HTML5标签元素下的下划线动画
最近我看到一些博客网站又这么一个效果: 当鼠标放到博客头部的标题时,这个链接的下划线就会以动画的方式从无到有,我觉得挺有意思的,好像京东的首页就有这个效果,大家可以看看.创建这个效果非常的简单,不需要加入额外的DOM元素到页面中,但是低版本的浏览器可能不支持CSS动画(常规下可能只显示一条下划线)首先第一件事就是需要将a标签的text-decoration去掉,设置position为相对定位.然后确保这a标签在hover状态下颜色一致性.我们这里设置这个效果只在h2标签里:代码名称h2 > a {
position: re
CSS中content中的counter值分析
有些CSS的特性,不经常使用.我认为CSS counters 也是其中之一,主要有两个原因:1. 他们没有很多的例子2. 代码可能稍微复杂一些.CSS counters 允许动态的设置列表数字,类似一个排序列表.但是CSS counters是不一样的. 特色就是使用一个伪元素结合一些具体的counterCSS ,追加/前置一个动态的"count"到一个指定的元素集合.这里一个代码例子代码名称.container {
counter-reset: issues 0;
}
.issue:before {
&
CSS中的另外一种需要知道的选择器.
CSS还有着一些非常好的选择器,可能有些人还不知道,学习这些,可以帮助你在实际项目中很简单的控制你的网页.例如,你可以选择偶数和奇数元素,第一个和最后一个,下一个等等. 在本文中,我们将通过不同的场景使用不同的选择器. 我们不适用已知的一些CSS选择器,比如ID和class.我们准备学习这些选择器. 我们会解释他们的运作.甚至更多的高级的东西.1. First Line 和 First Letterp:first-letter给段落中的第一个字母样式p:first-line选择段落中的第一行2. Before 和 After:beforeCSS中使用content属性添加一个元素到当前元素之前