CSS3实现苹果电脑的DOCK菜单栏

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-15 09:38:28.0
使用苹果电脑的朋友,都知道,在桌面的下方有个DOCK,就是一个存放应用程序的一栏.使用起来非常方便.这一栏的一些效果也是挺好看的.那我们今天就用CSS3来实现这个原理.首先我们需要设计好DOCK栏结构,代码如下代码名称<ul>     <li id="menu1">         <a href="#menu1">      

CSS3实例: 实现 swap 动画

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-15 09:24:32.0
CSS3动画的出现,让我的真的非常喜欢,因为他够简单.今天我们来实现一个交换动画,一个笑脸慢慢从远处,回到自己的原来位置的一种效果.这种动画在JS里面也是很多见的.首先得将HTML结构设计好,一个固定的窗口,然后一个带有黑色背景的笑脸代码名称<div><span>?</span></div>笑脸居中我们用最新的布局flex来实现,这个也是很好用的属性.之前文章中已经有flex的相关教程,大家不懂的可以看看.代码名称div{ width: 200px; height: 200px; color: #fff; 

谷歌浏览器开发者工具 Timeline,谈性能优化

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-15 09:20:30.0
DevTools工具Timeline panel一直是最好的性能优化的第一站.集中说明你的应用程序活动,在加载,脚本,渲染,和重绘花费的时间.最近,我们升级了Timeline,可以更深入的了解APP的性能.我们添加了以下特点:1) 整合了 Javascript profiler. (包含Flame chart)2)frame viewer 帮助你可视化复合层.3)paint profiler 详细的查看浏览器的绘画活动.注意本文中描述使用Paint捕获选项确实导致一些性能开销,所以选择自己想要的选项.如果你以前使用过 Profiles面板,你可能知道Javascript CPU profile

HTML5标签元素下的下划线动画

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-12 09:41:34.0
最近我看到一些博客网站又这么一个效果: 当鼠标放到博客头部的标题时,这个链接的下划线就会以动画的方式从无到有,我觉得挺有意思的,好像京东的首页就有这个效果,大家可以看看.创建这个效果非常的简单,不需要加入额外的DOM元素到页面中,但是低版本的浏览器可能不支持CSS动画(常规下可能只显示一条下划线)首先第一件事就是需要将a标签的text-decoration去掉,设置position为相对定位.然后确保这a标签在hover状态下颜色一致性.我们这里设置这个效果只在h2标签里:代码名称h2 > a {   position: re

CSS中content中的counter值分析

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-11 11:02:50.0
有些CSS的特性,不经常使用.我认为CSS counters 也是其中之一,主要有两个原因:1. 他们没有很多的例子2. 代码可能稍微复杂一些.CSS counters 允许动态的设置列表数字,类似一个排序列表.但是CSS counters是不一样的. 特色就是使用一个伪元素结合一些具体的counterCSS ,追加/前置一个动态的"count"到一个指定的元素集合.这里一个代码例子代码名称.container {   counter-reset: issues 0; } .issue:before { &

CSS中的另外一种需要知道的选择器.

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-09 16:37:56.0
CSS还有着一些非常好的选择器,可能有些人还不知道,学习这些,可以帮助你在实际项目中很简单的控制你的网页.例如,你可以选择偶数和奇数元素,第一个和最后一个,下一个等等. 在本文中,我们将通过不同的场景使用不同的选择器. 我们不适用已知的一些CSS选择器,比如ID和class.我们准备学习这些选择器. 我们会解释他们的运作.甚至更多的高级的东西.1. First Line 和 First Letterp:first-letter给段落中的第一个字母样式p:first-line选择段落中的第一行2. Before 和 After:beforeCSS中使用content属性添加一个元素到当前元素之前

CSS中需要明白的 content 属性

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-09 11:59:13.0
如果你是一个前端开发者,可能知道有一些很好的伪类的改变,比如CSS content属性.如果不熟悉这些概念的,可能需要去复习一篇了.在这篇文章中.我们主要是看 content属性. CSS的 content 属性需要在 ::before和::after 伪类元素中使用. 属性会在页面上生成content中的内容,当然需要您的浏览器支持这个属性.content 属性的基本语法.content 属性的表现形式就如下所写,这里列出了每一个属性的值.p::before {   content: normal|counter|attr|string|open-q

如何成为一名合格的前端开发者

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-06 12:11:07.0
Web开发是一直比较热门的话题.它不像传统的应用程序,不仅要知道网页是怎么工作的,还得学习更多的编程,网络技术.成为一个初学者,英文好的可以看看这个教程:http://code.tutsplus.com/courses/how-to-become-a-web-developer?ec_promo=short_course,英文不好的,就看以看看国内的一些讲师的视频教程或者书籍.我们可能还得学习浏览器的调式工具比如火狐的Firebug,谷歌浏览器的开发者工具等等.我们要学习什么学习的内容,可能需要先了解一些术语,然后购买教科书或者通过老师来讲解知道要学习的内容. 我们需要学习如何通过HTML,

CSS3实现围绕任何点来旋转-续

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-05 12:05:15.0
前天写过一篇文章 "CSS3实现围绕任何点来旋转",主要是实现围绕点来旋转.今天我们继续用另外一种方式实现.我们先来看代码Html <div class="smile">?</div>Css.smile{   margin:100px auto;   width: 80px;   height: 80px;   font-size: 80px;   animation: action 10s linear inf

Javascript Prototype 方法 vs Object 方法

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-04 11:59:41.0
在JavaScript中,定义一个对象,可以使用两种方式给他加入方法.1. 在对象结构函数里面使用 this.func = function(){...}2. 使用prototype 例如 obj.prototype.func = function(){...}这两种处理方式,在创建对象后,都可以访问函数 func().但是,我们选择哪种方式最好呢?简短来说: 使用 prototype ,大多数都是使用这种方式.对象实例化后共享公共函数,使用prototype.1. 使用 Prototype 改变公共方法,是一个好的选择使用prototype给对象添加公共方法,修改公共逻辑非常简单,甚至在实例