欢迎关注我的公众号：前端侦探大家有使用过offset-path吗？没用过不要紧，相信大家都见过这种酷炫的路径动画，这种就可以用offset-path来实现demo 来源：https://codepen.io/ahmadbassamemran/pen/bXByBv随着CSS的不断发展，最近在Chrome 116中，offset-path也支持基本形状了，也就是常见的inset、circle、polygon等等，有了这些形状的支持，路径动画写起来更加方便了，一起了解一下吧一、过去仅支持 path先简单介绍一下offset-path的用法。offset-path是用来实现路径动画的，所以前提是需要准备好路径。这里的路径可以在支持SVG的设计软件中绘制，比如Figma这是我用钢笔工具随便勾勒的一条路径，先准备好放在一边。现在来一点布局我们用伪元素来作为偏移路径的元素.con{ position: relative; width: 300px; height: 200px; background-color: #FFEFC5; border-radius: 8px; flex-shrink: 0; } .con::before{ position: absolute; content: '😁'; width: 40px; height: 40px; ...继续阅读 (88)

...继续阅读 (45)

欢迎关注我的公众号：前端侦探最近在项目中看到这样一个布局，如下布局本身没什么奇怪的，就是4 * 2的网格，比较特殊的是第二行布局是从右往左的，整体是一个这样的顺序而这个列表是通过一个数组动态渲染的，可能有很多同学会将这个数组分成两份，然后将第二份进行反向，类似于这样let arr1 = list.slice(0, 4) let arr2 = list.slice(4, 8).reverse()然后，由于第二行的第一个其实是原数组的第八个，还需要针对第二行做额外的处理，比如序列// 第一行 第 {{ i }} 个 // 第二行 第 {{ 8 - i }} 个而且，如果有点击事件，传值也需要额外处理，虽然也能实现，但显然是太麻烦，而且还容易出 bug。那么，有没有其他更简单、更稳定的方式来解决呢？也就是如何让第二行子项反向呢？一、flex 布局实现由于这里是动态渲染，所以最理想的结构应该是这样的，直接一层循环搞定12345678通过flex或者grid都很容易实现4 * 2的布局，先用flex实现.list{ display: flex; width: 600px; gap: 20px; flex-wrap: wrap; } .item{ width: calc( (100% - 60px) / 4 ); aspect-ratio: 1/1; backgro ...继续阅读 (72)

我们可以用CSS检查，以了解一组元素的数量是否小于或等于一个数字。例如，一个拥有三个或更多子项的grid。你可能会想，为什么需要这样做呢？在某些情况下，一个组件或一个布局可能会根据子元素的数量而改变。这在CSS中已经存在很多年了，但现在通过CSS:has，它变得更加强大。我们可以把nth-last-child选择器和:has结合起来，以达到神奇的效果！你没听错。在这篇文章中，我将强调几个例子，说明我们可以将一个CSS选择器和:has结合起来，形成一个有条件的组件/布局状态。总览介绍:nth-last-childCSS中的数量查询限制不可能根据元素的数量来设计父元素的样式让它们在不同的视口尺寸上奏效为了控制间距要付出更多使用案例基于子项数量而变化的Grid动态标题布局动态新闻部分模态框操作用户头像时间轴logo网格总结介绍:nth-last-child这篇文章的主要要素之一是:nth-last-child伪类。我们可以使用该选择器来模拟计算子元素。来看看它是如何工作的。我将尽可能用直白的话来解释。请看下图：我们有一个五个卡片的列表。我们将用这个例子来证明我们可以用:nth-last-child做什么。在下列CSS中，n + 3意味着：li:nth-last-child(n + 3) { /* styles */ }从末端选择前三项，从第三项开始计算。让我们仔细看看。首先，我们 ...继续阅读 (38)

说实话，真的不知道是我的第几个 blog 了， 不过之前一直是用第三方平台，自建也是用 WordPress 或者 Hexo 等完整搭好（样式和功能齐全）的项目。 所以这次是第一次从最简单的框架自己添加功能和样式制作的第一个博客，希望这是一个新的开始吧（ 在搭建过程中遇到的问题大概也会记录在这里，现在已经在整理了！（咕咕 之前的翻译的文和一些踩坑经历也会搬过来，创建时间的话还是写搬过来的时... ...继续阅读 (27)

流体排版这一词似乎看上去有点陌生，在英文中常把他称之为Fluid Typography，当然也有很多朋友称之为流体字号（Fluid Size）。大概的意思就是Web排版中的font-size会根据浏览器窗口的大小自动改为。比如下图所示的一个效果：看到上图的效果，大家首先可能会想到的是CSS中的Viewport单位vw或者vh之类，当然也可能会认为是通过媒体查询来改变元素font-size来实现的。事实上，他们都能实现类似的效果，但问题是我们想要精确的实现流体排版（根据视窗大小变化精确改变font-size的值），那并不是件容易的事情。那问题来了，我们有没有方法可以实现所谓的精准流体排版呢？答案是肯定的，接下来我们就要来探讨这方面的实现思路、细节以及使用到的一些数学公式。实现思路精准流体排版最核心的就是浏览器视窗大小改变时，font-size能够根据视窗的大小做到精准的变化。当用户收缩和拉大浏览器窗口时，其大小有一个变化，在CSS中，咱们通过把每一个大小点称为断点，断点也是媒体查询中一个重要的概念。除此之外，如果我们用Viewport单位来描述的话，视窗大小始终是100vw。如果font-size设置为2vw，那么其大小就是浏览器窗口宽度的2%，当窗口拉到1000px时，这个时候font-size对应的是20px。原理是不是很简单，而且其中还涉及到一些数学计算，CSS中动态计算的话， ...继续阅读 (51)

1.1 JavaScript 案例我们为什么要选择 JavaScript 来编程？就是因为它的灵活。如果我们对函数式编程有过了解的话，我们就知道 ECMAScript 5 中 Array 有很多原型方法，例如 map、forEach、filter……，这些都属于函数式编程。也就是说，JavaScript “天生”就支持函数式编程。[1, 2, 3].forEach(n => { console.log(n * n); }); // 1 // 4 // 9再举一个小例子，所有的 JavaScript 函数都有一个 apply 方法，它使得我们可以用一个数组来调用函数，其中，数组的元素作为函数的参数。我们就来使用它，创建一个名为 splat 的函数，它接收一个参数 fn，并返回另一个函数，这样一来，传入函数 splat 的数组的元素就是函数 fn 的参数：function splat(fn) { return function (array) { return fn.apply(null, array); }; } const addArrayElements = splat((x, y) => x + y); addArrayElements([1, 2]); // 3这就是我们函数式编程的初试 —— 一个返回函数的函数。需要注意的是， ...继续阅读 (11)

byzhangxinxufromhttp://www.zhangxinxu.com/wordpress/?p=5963本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。一、什么是“蝉原则”？“蝉原则”，英文称作“cicada principle”，是一种让事物的重复出现符合“自然随机性”的规则，为什么这么说呢？“蝉原则”源自于北美，中国似乎并未有这样的说法，这背后是有有故事的：北美和东亚蝉的种群是不一样的，在东亚蝉的幼虫生活在土中3年5年或7年；但是北美有一种周期蝉（Magicicada），其生命周期为十三年或十七年，也被称为十七年蝉或十三年蝉。东亚的蝉生命周期短，因此，给人感觉好像每年都有很多蝉，而北美的周期蝉的生命周期很长，因此能够让人明显感觉到每隔十几年蝉的数量就会大规模爆发一下，于是就会引发一些科学家的好奇，为什么生命周期是十三年或者十七年呢？蝉的天敌鸟类其繁荣萧条周期是具有规律性的（一般2至6年），然后不断重复。十三年或者十七年中的13和17都是质数，而吃蝉的鸟类一般寿命都不超过13年，因此就不会遇到上一世代所遇到的天敌。东亚蝉的幼虫生活的年限比较短，可能与东亚的主要鸟类种群寿命不长有关，例如麻雀就2年寿命。还有一个很重要的原因，就是一片区域的蝉他不止一个种群，而使用质数作为生命周期年数就可以避免钻出泥土时可以和别种群的蝉类一起钻出，这样竞争压 ...继续阅读 (98)

title: 结构与布局date: 2016-12-11tags: CSS Secrets0x00 min-content 宽度自适应CSS3 新增宽度属性值width:min-content可以将容器的宽度值设置为容器内最大的不可断行的宽度(最宽的单词，图片，或者具有固定宽度的盒元素)figure{ width:min-content; margin: auto; }0x01 根据兄弟元素的数量来设置样式我们知道伪元素选择器:only-child,其实，它可以等效于:first-child:last-child，即是第一项的同时也是最后一项，所以从逻辑上来讲它是唯一的。而:last-child也是:nth-last-child(1)的快捷写法。那么接下来思考一个问题，li:first-chidl:nth-last-child(4)代表什么?结果是 _一个正好有四个列表项的列表中的第一项_,ok,再结合兄弟选择符~来命中它之后的每一项，就可以达到这样一个目标在正好包含四个列表项的时候，命中它的每一项li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li { background: red; }结合 SASS，将其简化复用/*定义混合器*/ @mixin n- ...继续阅读 (15)

【摘要】考察下面的 HTML 代码片段： <! more 单凭 可以让我们选中所有的`` 标签，what if we wanna specific ones? 譬如只选中第一个。 那你可能已经知道 伪类选择器了，所以选中第一个也不是什么麻烦事情。类似地可以用 选中最后一个指定的元素。 here comes阅读全文 ...继续阅读 (19)

Once upon a time, programming interviews would include afizz-buzzproblem to weed out the folks who couldn’t string together a few lines of code. We can debate when and how such things are appropriate interview questions, but one thing that is always appropriate is to use them as inspiration for practising our own skills.1There are various common problems offered in such a vein, including fizz-buzz itself, computing certain prime numbers, and computing Fibonacci number.A few years back, I had a go at writing my own Fibonacci function. When I started researching approaches, I discovered an intri ...继续阅读 (28)

Once upon a time, programming interviews would include afizz-buzzproblem to weed out the folks who couldn’t string together a few lines of code. We can debate when and how such things are appropriate interview questions, but one thing that is always appropriate is to use them as inspiration for practising our own skills.1There are various common problems offered in such a vein, including fizz-buzz itself, computing certain prime numbers, and computing Fibonacci number.A few years back, I had a go at writing my own Fibonacci function. When I started researching approaches, I discovered an intri ...继续阅读 (21)

【摘要】引入 提到伪类，在我的印象中最常用的不过是:hover、:active、:link、:visited，还有css3里的常用伪类选择器:last-child、:first-child、nth-child(n)等等，说实在其他的我发现"然并卵"。 百度一下:after和:before会发现有很多...阅读全文 ...继续阅读 (7)

Sizzle引擎的主体部分已经分析完毕了，今天为这部分划一个句号。a. Sizzle解析流程总结是时候该做一个总结了。Sizzle解析的流程已经一目了然了。1.选择器进入Sizzle( selector, context, results, seed )函数，先对选择器不符合要求的（比如没有选择器、选择器不为字符串、上下文环境context不是节点元素且不是document）排除，直接返回；接着判断如果选择器是简单的选择器（只有一个元选择器，比如“#ID”、“.CLASS”、“TAG”等）直接用浏览器支持的函数获取结果返回。接着判断如果浏览器支持高级搜索querySelectorAll且选择器也符合参数标准则获取结果返回。否则进入select( selector, context, results, seed )函数接着处理。2.进入select( selector, context, results, seed )函数后。select先对选择器selector进行词法解析（tokenize( selector, parseOnly )函数），在没有备选种子seed且选择器并非多个并列选择器（“div >p,input”等用逗号分隔的是并列选择器）的情况下缩小选择范围，包括对原子选 ...继续阅读 (41)

伪类选择符:nth-child()实现彩色标签云(显示效果，点下面的运行按钮)，源码如下： [runcode]标签云123450607080910011012013014015016017018019020[/runcode] 可以看到上述源码实现了一个由6种颜色组合循环显示的彩色标签云，主要是运用css3新增的伪类选择符:nth-child()实现的，这里该选择符使用的乘法因子(n)的定义包含一技巧在里面：6n+?中的6代表以几种颜色作为一个循环显示，我们用:nth-child()定义了5种颜色，再加上默认的1种颜色（#666）刚才就构成上述的一个颜色循环组合。 要注意的是：E:nth-child(n)中的n 是从1开始计数的，表示匹配父元素的第n个子元素E，这个同jq中的:nth-child(n)也是从1开始计数是一样的，但jq里面的:eq(n)中的n是从0开始计数的，不要混淆；另外乘法因子(n)可以是0, 1, 2, 3, ..., 用代数中的代入法，可验证上述的颜色组合循环显示是否正确无误！ ...继续阅读 (15)

我们知道Sizzle支持的伪类有有很多，为了便于处理被Sizzle分成了两类：单个单词的伪类“PSEUDO”和多个词语使用“-”链接的“CHILD”。我们下面一一分析。 先看"PSEUDO":a. Sizzle的伪类选择器"PSEUDO" 我们先整体看一下有哪些个伪类伪类生成匹配器的源码如下：matcher = Expr.filter[ tokens[i].type ].apply(null, tokens[i].matches );此时tokens[i].type = “PSEUDO”，所以生成伪类匹配器函数是Expr.filter["PSEUDO"]函数"PSEUDO":function( pseudo, argument ) {//伪类名称大小写不敏感//优先Expr.pseudos找到伪类对应的位置伪类函数，不行的话将伪类名称转换成小写形式使用Expr.setFilters//记住setFilters继承至Expr.pseudosvarargs,fn= Expr.pseudos[ pseudo ] || Expr.setFilters[ pseudo.toLowerCase() ] ||Sizzle.error("unsupported pseudo: " + ...继续阅读 (22)

上一篇《论tab切换的几种实现方法》中讲了tab切换的4种不同实现原理，那么，现在到理论联系实际的时候了，下面就写几个实例。一、仿”中国人民大学“官网的tab切换，背景是图片，效果图如下：鼠标移到新闻时的效果鼠标移到公告时的效果鼠标移到交流时的效果学术、交流和文体的内容为空，我没有写。完整代码如下：1<!DOCTYPE html>2<html>3<head>4<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>5<style>6*{7padding:0;8margin:0;9}10body{11font-family:Arial,Verdana,sans-serif,"宋体";12}13li{14list-style:none;15float:left;16}17a{18text-decoration:none;19color:#ffeec6;20}21#tanContainer{22height:210px;23width:470px;24background:url(homeinfo-trans-bg.png);25overflow:hidden;26color:#ffeec6;27}28#tanContainer ...继续阅读 (23)

罗马数字规则简明1. 罗马单个数字共有7个，即I（1）、V（5）、X（10）、L（50）、C（100）、D（500）和M（1000）2.一个罗马数字重复几次，就表示这个数的几倍。但同一数码不能出现三次以上。3.遵循右加左减的规则。左减的数字有限制，仅限于I、X、C。比如45不可以写成VL，只能是XLV但是，左减时不可跨越一个位数。比如，99不可以用IC（100 - 1）表示，而是用XCIX（[100 - 10] + [10 - 1]）表示。（等同于阿拉伯数字每位数字分别表示。）左减数字必须为一位，比如8写成VIII，而非IIX。 Roman to Int基本思路：把输入的罗马数字分段处理，分段相加。从左到右，一个个检测过去。设置 当前位current，上一位pre，分段值temp。如果当前位对应的值和上一位的一样(current == pre)，那么分段值加上当前值{temp += current;}。比如III = 3如果当前位对应的值大于上一位的(current > pre)，说明分段值应该是当前值减去现有的分段值{temp = current - temp;}。比如IIV = 5 – 2如果当前位对应的值小于上一位的(current < pre)，那么可以先将当前分段值加到结果中，重新开始记录分段值{result += temp;temp = ...继续阅读 (19)

移除链表的倒出第n个节点。思路：本题还是考察链表的删除操作，如果要删除节点h：如果h不是最后节点，h.val = h.next.val;h.next = h.next.next;如果h为最后节点，h = null；第一次遍历找到倒数第n个为正数第几，然后找到删除的点直接删除就可以了。实现代码：/** * Definition for singly-linked list. * public class ListNode { * public int val; * public ListNode next; * public ListNode(int x) { val = x; } * } */ public class Solution { public ListNode RemoveNthFromEnd(ListNode head, int n) { if(head == null){ return null; } if(n == 1 && head.next == null){ return null; } var len = 0; ...继续阅读 (52)

上一篇文章介绍了怎样使用compass合并雪碧图，生成的icons.css文件中单位是px，PC端可以直接在html文件中使用，但在移动端，我们需要根据不同分辨率的屏幕，来缩放图片大小，显然使用px单位肯定是不行的。所以需要做一下单位转换的工作。移动端使用rem作为单位是最合适不过了。并不是使用了rem就可以，还需要做一些准备工作。我们都知道rem是基于html标签的font-size的，所以需要使用js动态的计算html的font-size。这里我使用淘宝的lib-flexible。在上一篇文章中，有讲过雪碧地图（Sprite maps），如下面：$icons: sprite-map("icons/*.png", $spacing: 8px, $layout: smart);.icon {width: image-width(sprite-file($icons, card-icon));height: image-height(sprite-file($icons, card-icon));background-image: sprite-url($icons);}生成css:.icon {width: 77px;height: 64px;background-image: url('/images/icons-s37f950be3b.png');}现在，需 ...继续阅读 (199)

大家好，我是小强老师。 今天我们看下CSS3最为简单的两个属性。 css3给我们带来了很多视觉的感受和变化，以前的图片做的事情，很多代码都能实现。 下面给大家简单介绍两种最为常见的圆角边框和盒子阴影，同时附上一个iphone 手机效果，提供大家练习。1.border-radius 圆角矩形 语法格式： border-radius: 水平半径/垂直半径 只不过我们平时都把后面的这个垂直半径给省略了。 圆角也有连写的方法 border-radius: 左上角 右上角 右下角 左下角; 采取的是 顺时针 如下图： 代码如下： 1DOCTYPE html234567div{8width:200px;9height:200px;10border:1px solid red;11margin:10px;12text-align:center;13line-height:200px;14}15div:nth-of-type(1)16{17border:10px solid red;18border-radius:38px/14px;19}20div:nth-of-type(2)21{22border-radius:15px;23}24div:nth-of-type(3)25{26border-radius:15px 15px 0 ...继续阅读 (33)

前言前几天整理了CSS一些技术关键字，但是因为自己的知识过于单薄，觉得考虑的不充分有欠缺，随后便在sf.gg提出了这个问题《关于CSS核心技术关键字都有哪些？》，也是为了让厉害的人一起参与进来，用他们的经验告知我们CSS中哪一块的知识点是重要，或者说是不可欠缺的，也或者说是应该打好基础的。在整理这份CSS技术关键字的开始，首先想到的是选择器，它作为最常用的的一个特性，几乎天天都在使用，但是如果让你说出20种CSS选择器，是不是可以脱口而出呢？ 哎，或许我们被浏览器逼的还停留在CSS2.1那些选择器把？CSS4规范都要问世了，我们还在玩那个？带着这些疑问，决定梳理一下之前用到的知识点，最终以系列文章的方式说一说我对选择器的理解，具体包含的内容如下：选择器的基础使用，主要是CSS3，也会介绍新增CSS4选择器，包括各浏览器对选择器的支持情况选择器的使用技巧，使用时常出现的一些问题，扒一扒解决方案，再说一说效率和优化的部分选择器的优先级，理一理比较头疼的权重问题，如何更轻松的理解它导图与源码我在写这篇文章的时候会梳理一份思维导图，用于更加直观的查阅所有的CSS选择器，并且也有编写示例代码，更方便理解文章中的示例。关于思维导图和示例代码，会上传至Github，当然也会随着时间的允许，不定义补充和更新仓库地址：https://github.com/Alsiso/everyday思维导图：ht ...继续阅读 (18)

接css3选择器（一）八、结构性伪类选择器【:nth-child(n)】:nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素，和jquery中一样。其中"n"是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式（2n+1,-n+5）和关键字(odd【奇数】、even【偶数】)，但是参数n的值起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。Note:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如下表所示：所以要达到斑马线的效果就非常容易了。偶数行变橙色，ol >li:nth-child(2n|even){background:orange}；奇数行变绿色，ol > li:nth-child(2n+1|2n-1|odd){background: green;}九、 结构性伪类选择器【:nth-last-child(n)】：nth-last-child(n)和:nth-child(n)相似，但是多了个last，这个last代表从后向前，其他地方没差别。举例：设置列表中倒数第五个列表项背景色为橙色。ol > li:nth-last-child(5){background:orange;}item1item2i ...继续阅读 (23)

本文章记录本人在学习 函数式 中理解到的一些东西，加深记忆和并且整理记录下来，方便之后的复习。在近期看到了《JavaScript函数式编程》这本书预售的时候就定了下来。主要目的是个人目前还是不理解什么是函数式编程。在自己学习的过程中一直听到身边的人说面向过程编程和面向对象编程，而函数式就非常少。为了自己不要落后于其他同学的脚步，故想以写笔记的方式去分享和记录自己阅读中所汲取的知识。js 和函数式编程书中用了一句简单的话来回答了什么是函数式编程：函数式编程通过使用函数来将值转换为抽象单元，接着用于构建软件系统。我觉得一定有同学看了这一句还是不怎么动什么是函数式编程，且为什么要使用函数式编程。后面的很多例子都使用到了Underscore。以函数为抽象单元抽象方法是指隐藏了细节的函数。举一个书中的例子，一个检测输出年龄值的函数（主要是关于错误和警告的报告）：function parseAge(age) { if (!_.isString(age)) throw new Error("Expecting a string"); var a; console.log("Attempting to parse an age"); a = parseInt(age, 10); if (_.isNaN(a)) { conso ...继续阅读 (14)

原文：http://margox.me/css3clock.html第一次发文章，比较激动。本码农长期浸淫于Dribbble等设计师网站，看到那些好看的设计作品就非常激动，但是无奈PS不精通，AI也早忘光了，只不过对前端略有研究，偶然间看到几个设计清爽的时钟，觉得用CSS实现起来应该也没什么难度，于是花了个把钟头琢磨了一个出来。效果图技术点box-shadow 表盘的质感什么的全靠它了nth-child(x) 用于表盘刻度的定位什么的transform-origin 这个用来定位三个表针旋转的中心点keyframes 表针动画效果流程先设计好DOM结构，代码如下：结构很简单，从样式名可以看出来每个元素的用处，中间那段空div自然就是表盘刻度了。接下来是CSS代码html,body{ height: 100%; margin: 0; padding: 0; background-image: linear-gradient(#e7e7e7,#d7d7d7); } /*时钟容器*/ .clock-wrapper{ position: absolute; top: 0; right: 0; bottom: 100px; left: 0; width: 250px; height: 250px; ...继续阅读 (30)

一，CSS3 选择器分类二，选择器语法1，基本选择器语法选择器类型功能描述* 通配选择器 选择文档中所以HTML元素E 元素选择器选择指定类型的HTML元素#id ID选择器选择指定ID属性值为“id”的任意类型元素.class 类选择器选择指定class属性值为“class”的任意类型的任意多个元素selector1,selectorN 群组选择器将每一个选择器匹配的元素集合并 2，层次选择器语法选择器类型功能描述E F后代选择器（包含选择器）选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内E>F子选择器选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素E+F相邻兄弟选择器选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面E~F通用选择器选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 3，动态伪类选择器语法选择器类型功能描述E:link链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上E:visited 链接伪类选择器选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上E:active用户行为选择器选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上E:hover用户行为选择器选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏 ...继续阅读 (20)

由于最近在百度IFE看到有2048任务，所以昨天兴趣一来自己也做了一个。大概花了五个小时完成，不过不足之处是操作时没有滑动效果。昨晚新增了手机版本，流畅度还可以，不过由于没有滑动，游戏过程显得很突兀啊，且容我下次再加上吧。下面先讲讲这个游戏怎么实现，这是个人想的方法。不足之处，多多指教啊。首先我在做这个小游戏的时候我想到了两种方法：第一种方法就是本例用到的方法，利用方向键操作，只改变相应DIV块的背景以及更改文字，其特点是16个DIV的位置是固定不变的;第二种方法就是通过定位来实现，操作方向键/滑动屏幕时改变left/top值，这种方法的好处是更容易做滑动效果，不过需要多建一个DIV层或者加背景。时间关系，目前我只用了第一种。1、界面与样式PC端：HTML内容很简单，直接使用两个DIV包裹16个DIV即可；而CSS的话wrap及其它DIV都可以使用固定值，放数字的DIV先写统一的样式，每个数字DIV都预写一种特定class的样式。最后再加一个动画，就是2出来后的放大效果。为了不影响布局，我采用的是CSS3的transform：scale3d动画，而不是通过改变大小来实现动画。移动端：跟PC端的相比，这个的HTML页面只是比上面的增加了一张img背景图；而CSS方面则有较大差异，全部采用百分比布局，高度由背景图1:1撑开，由于高度不确定，加载完页面后需要使用js获取小DIV的宽度，并 ...继续阅读 (23)

早就有把皮肤换了的打算，直到上周五才开始动手。本身没做过设计的工作，处理起颜色来还是比较蛋疼的。公司某页面推荐了hailpixel （http://color.hailpixel.com/）配色就靠这个了，虽说我不懂配色，拾取的颜色也有细微区别，取几个颜色看着舒服就这么定下来了。作为一个做前端的，自然是不画PSD直接上来写。之前总是想先把设计搞出来再开始写页面，这也是一直没有动手的原因。周五在等设计图的空闲突然想写了，直接来写倒是挺好。写了一个头部样式之后，感觉之后的必须得那样写才行。也就是传说中的风格定下来了吧。写界面的过程中用了不少CSS3动画。在这里总结一下吧。1.导航条。首先导航条的颜色不同是用CSS选择器做的。用到了nth-child()。括号里是几就选择第几个。设为nth-child(2n)的话选择的就是第偶数个。先将所有li元素都定义了一个:hover{height:100px;margin-top: -50px}，然后发现这样第一个太丑，于是定义了一个li:nth-child(1):hover{width: 20%;height: 50px;margin-top:0;} 2.首页的文章标题。文章标题用到了2D变换。transform:rotate(10deg):顺时针旋转10度其他的2D变换还有transform: translate(50px,100px) ：向左 ...继续阅读 (31)

@Heydon Pickering在三月份写过一篇《Quantity Queries for CSS》文章，文章主要介绍如何使用CSS的伪类选择器来找章鱼。前几天@Drew Minns的《Quantity Ordering With CSS》也介绍的是相关内容。觉得这两篇文章非常的有意思，今天也试试来解释这两篇文章运用到的相关知识。使用场景不知道大家在平时制作页面的时候是否碰到这样的场景。在不同的断点实现不同的布局效果，如下图所示：当屏幕到达断点28.75em时，布局变成：当断点到达43.125em时，布局变成：咱们先不思考这个效果怎么实现，先来了解实现这个效果的相关知识，也就是我们今天要介绍的CSS数量查询。为了能更好的阐述这方面的技术，咱们直接使用@Heydon Pickering的《Quantity Queries for CSS》文章示例图。把章鱼当作HTML元素，其中绿色的章鱼表示与CSS选择器匹配的元素（也就是选中的元素），红色的表示是未选中的元素，而灰色的表示不存在的元素。CSS中的计数在CSS中至今为止都没有提供一个明确的计数API，但我们可以通过CSS3的伪类选择器解决同样的问题。数一个在CSS3中的:only-child和:only-of-type都可以选择只有一个子元素。来看一个简单的示例：li:only-child{ background-positio ...继续阅读 (38)

CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行;~:p ~ p{color:red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth-of-type(1)),但是权重要低于后者*/}[attribute^=value]:选择该属性以特定值开头的元素[attribute$=value]:选择该属性以特定值结尾的元素[attribute*=value]:选择该属性中出现了特定值的元素上边三个是可以组合使用的,方法如 ↓ :实际中可以应用在区分本地链接与外部链接,通过判断是否有http\.com什么的(等到CSS4选择器问世就不用这么麻烦了[:local-link]):first-of-type与:last-of-type:从字面大概能看出来是干嘛使得,第一个这个类型的/最后一个这个类型的...如上图所示,每个元素内的第一个p与最后一个p都应用了该样式;:only-of-type:选择仅仅仅有一个此类型的子元素,不包含子元素的子元素;可以利用:not来实现反选:only-child:选择仅有一个子元素的元素;如果去掉:only-child前边的p,那个孤独的span也会应用该样式;同样可以使用:not反选,简单来说,就是有兄弟节点的p所应用该样式;:nth-child(n):选择第n个子元素,可以结合选择器来限制结合变量n ...继续阅读 (16)