header_v1.7.40

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

88天前发布

原创文章 / 网页 / 教程
鬼谷魂 原创,如需商业用途或转载请与鬼谷魂联系,谢谢配合。

用css的伪类巧妙布局电商专题的主题文字,对文案包容性特别强,适合拓展,非常经典的冷门技法!

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


《一》


      

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布局时无意中看到的,别提当时有多兴奋。


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



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


        



0

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功