网站前端

SVG、JavaScript、CSS、HTML、各种框架。Web前端开发是从美工演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，Web 1.0时代，网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。

各种各样的框架让人目不暇接，新技术层出不穷。让我们这些前端狗情何以堪。

目前web前端工程师的年薪待遇平均在10万以上，高级HTML前端工程师年薪达30—50万，很多企业对于与web前端相关的技术职位更是求贤若渴。

界面设计参考：迪士尼动画12原则与界面动效的关联

2016年12月31日

迪士尼出品的《疯狂动物城》可谓逗乐了全民，作为迪士尼动画的杰出代表，大人和孩子都爱看的缘由是什么？除了精彩的剧本，拟人和夸张的动画效果可谓是最具吸引力的地方。同样作为体验良好的界面，流畅的动效赋予了其生动和活泼。动画和动效的共通特征大概就是画面“动”的漂亮了。迪士尼动画成立于上世纪20-30年代，虽不足百年，但行成了一套动画创作的黄金原则。详细分析下，这12原则与界面动效设计的原则有很多相通的地...

CSS伪类

2016年12月29日

1. 链接伪类针对链接的伪类一共有4 个，因为链接始终会处于如下4 种状态之一。 Link。此时，链接就在那儿等着用户点击。 Visited。用户此前点击过这个链接。 Hover。鼠标指针正悬停在链接上。 Active。链接正在被点击（鼠标在元素上按下，还没有释放）。以下就是这些状态对应的4 个伪类选择符（使用了a 选择符和一些示例声明）：a:link {color:black;}a:vi...

CSS的几种选择符

2016年12月29日

1、子选择符>标签1 > 标签2标签2 必须是标签1 的子元素，或者反过来说，标签1 必须是标签2 的父元素。与常规的上下文选择符不同，这个选择符中的标签1 不能是标签2 的父元素之外的其他祖先元素。section > h2 {font-style:italic;}2、一般同胞选择符~标签1 ~ 标签2标签2 必须跟（不一定紧跟）在其同胞标签1 后面。用Shift+1 键左侧的键输入字符～（波浪号...

CSS3文字阴影

2016年12月29日

文本阴影与本章前头讲过的盒阴影很相似，它的语法如下：text-shadow:4px 4px 5px #aaa;text-shadow 这几值的含义按顺序分别是：水平偏移量、垂直偏移量、模糊量和颜色。与盒阴影不同的是，文本阴影没有扩展量。最低限度，你得提供水平偏移量、垂直偏移量和颜色值。如果水平和垂直偏移量是负值，阴影就会出现在文本左上方。另外，text-shadow 还支持多个阴影声明。图7-11...

CSS 实现水平和垂直居中

2016年12月29日

用CSS 实现垂直居中也不简单。如果你想在一个固定高度的元素内垂直居中一行文本，可以把这一行文本的line-height 设定为该元素的高度。假设元素高度为300 像素，可以这样写：text-align:center; /*水平居中*/line-height:300px; /*垂直居中：行高=容器高度*/如果想垂直居中其他元素，比如图片，可以将容器的display 属性设定为table-row，再...

CSS3盒阴影

2016年12月29日

HTML 元素的阴影，同样是CSS3 被广泛实现之前很难做出来的一个效果。当时，要给元素添加阴影效果，必须用图片和DIV 配合，还要耐心地调整，而现在则只要一行CSS 声明即可。最简单语法形式如下。box-shadow:4px 4px 5px 8px #aaa inset;box-shadow 属性的这几值分别代表：水平偏移量、垂直偏移量、模糊量、扩展量、颜色、阴影位于边框内部（默认位于边框外部，...

CSS3圆角效果

2016年12月29日

圆角效果可是几年前Web 2.0 网页的招牌式设计。当时，实现简单的圆角要用复杂的JavaScript，或者得用嵌套的DIV 和丝毫不差的图片定位。而现在，则只要一行CSS 就能搞定了。最简单语法形式如下。border-radius:10px;这样，盒子的四角都会变成半径为10 像素的圆角。如果要单独设定每个角的半径，也可以在上面的简写属性中按顺序依次指定。只不过，现在指定的是角而不是边，所以“上...