web前端经典教程之伪类妙用

    今天我想说一下伪类当中的:before和:after, 这两位仁兄一前一后的作用，真是不容小觑哈，除了常见的清除浮动，还可以做一些边角动画，后面还发现配合display还可以非常神奇的布局，尤其是解决分辨率多样的移动端定位问题，非常有效，用得好就不用JavaScript来控制了。不过在谈伪类妙用之前，我们先来说说电商专题的主题板块图片的一些设计和重构方式。用css的伪类巧妙布局电商专题的主题文字，对文案包容性特别强，适合拓展，非常经典的冷门技法！

 

《一》

      

1. 像上面两种设计方式，文案和装饰元素都有一定的变化，其中文案的字体还尤为艺术。重构这类设计的时候，基本要把各个板块都切出来，如下图所示。这种方式有一个不好的地方就是增加了http请求，电商的一个专题页商品那么多，这都还没有放商品图片，就有7～8张图片需要加载了，这样会导致网页打开较慢。

2. 对于这种多图片的，重构页面一般用img图片标签还原设计，方式如下所示，当然用背景的方式也可以，只不过那样需要写具体的高度，就会麻烦一点。

 

《二》

1. 下面这种设计是装饰元素不变，变的是文案，如果这里文案用常规字体，那就是最优的设计了，用艺术字体就有点画蛇添足了。文字用写出来的方式的话，则需要引入这种字体，而字体体积一般也不小，为了不到十几处的文字，引入字体库显然有点浪费流量，更主要的是影响加载速度，所以切图时文字基本当图片来切了。跟第一种重构方式不一样的是，切图时把所有主题图片都整合到一张图片上了。

 

2. 就是下面这张图片，因为文字是白色的，为了方便阅读，我加了一个绿色背景，事实上是一张透明的png图片，透明的图片适应性往往更好，遇到主题板块颜色不同时不会冲突。重构这种页面如果不用实现文案的艺术字体效果，用我后面讲到的伪类方式重构就更好，当然这个设计本身问题是不大的，这种设计结构很贴合实际。

 

3. 重构代码如下所示，相对来说减少了http请求，但是这张整合的图片体积往往会大一点，然后各个板块显示的部分，用调节背景位置的方式控制。

   

《三》

1. 下面这种是理想状态的设计，但是理想状态就像陶渊明笔下与世无争的世外桃源，往往不那么容易成真，一旦文字不那么对称，用整张背景图重构的方式要想保证文字不会覆盖在装饰元素上，势必要把装饰元素移远一点，这样的话就会显得不够紧凑，而且万一有的文字少好几个，有的文字多几个，那就会特别的别扭。

 

2. 那种情况就像下面这种感觉，虽然设计师巧妙的用疏散装饰性元素的方式去协调美观，但是并没有解决本身相对位置不一致的根本问题。

 

3. 不过相对前面两种重构来说，只要切一张背景图就好，而且体积会小一点。

 

4. 既然背景图都一样，变化的文字又可以直接写出来，代码比前两种就更简单了，如下所示。

 

《四》

1. 最优的设计和重构方式应该像下面这样，既考虑美感，又考虑前端性能，重复而又不呆板，文案又可以直接写出来，并且对文案字数的包容能力也更强，也更容易被搜索引擎识别和有利于seo优化。为了便于理解，我做了下面一个动画，从中我们可以看到不管文案字数多少，装饰元素和文案两边的距离是没变的。

 

2. 更直观的就是，重构只需要下面这张尺寸更小、体积更小的图片。不过麻雀虽小，五脏俱全，图片虽小，用它来还原整个主题部分的设计，已经绰绰有余了。

 

3. 对比上面所有的代码，我们会发现这里多了一个叫做“zhuti”的盒子，妙就妙在这里，加这个块级元素是为了给“tit”设置display属性后不至于并列在一排，而设置了display:inline-block属性后的“tit”作为父级给伪类定位时，能够保证伪类左、右两边位置为零时，刚好就在撑开“tit”最宽文字的两端。这种巧妙的方式平常很少见，包括比较注重页面交互的京东页面，也不曾出现，我是在研究移动端flex布局时无意中看到的，别提当时有多兴奋。

 

附本次实操的高清视频……^ - ^

https://v.qq.com/x/page/b0765rccnyz.html

      另外，css中的伪类除了:before和:after以外，还有诸如:hover、:checked、:focus、:nth-child(n), 其实伪类数量比其他标签选择器（div、p、h1)的总和还多，但是在css中出现的次数却是最少的，不是因为不实用，而是功能性的东西出现在正确的时间和地点就好，而不是靠出现次数和低级勤奋刷存在感的，就好像梅西一样，他踢球像是在散步，但是他不疯跑也不会被否定价值。同样，css伪类也是扮演着这样的角色，各司其职并于关键处，一招棋活。:hover多用于css中处理滑过时的交互，:checked多用于css中选择选中的表单，:focus多用于js中激活输入框后执行某个行为，:nth-child(n)多用于css中选择同类元素中特定的单个或多个元素。喜欢并觉得实用的朋友，可以多多关注我哦，后续会推出更多贴合设计的前端教程……！