我就是要用CSS实现_html/css_WEB-ITnose
写在最前
我们都是前端工程师,无论你现在是页面仔,还是Node服务开发者,抑或是全端大神,毋庸置疑的是,我们都是前端工程师,我们生来就对追求页面的极致拥有敏锐的触觉,无论是页面实现方式的高大上、页面的极致的性能还是页面完美的展现,都是我们孜孜不倦的追求目标。即使这些在别人眼里,只是跟其他的页面一样没什么不同,但我们却能为其中那只有我们才知道的一抹别致而窃喜。
而今天我要讲的,就是我们最熟悉的老朋友,CSS。不讲枯燥的语法,抛开js,让我们一起来看业务中那别致的纯CSS实现,让我们一起来追求那更好的页面实现,希望我带着你走完这段旅程后,你能收获一些惊喜甚至灵感。
WHY,为什么
“我有很多事要做诶,忙都忙不过来,难道我要在这CSS上面浪费很多时间?”
不,不,不,我们要做的事情,当然不会只是满足技术的追求,而是会有实质的好处的!
我的观点如下:
- CSS跟UI结合更加紧密;
- 用CSS来实现,能减少JS计算,减少样式修改,减少重绘,提升渲染效率;
- 用CSS实现的,是一种模块化,更符合Web Components组件化思想,shadow DOM不就是致力于这么做么;
- 咱最爱的,逼格更高~
WHEN,何时
“我懂了,看起来是有那么点意思,可是我什么时候能用CSS来做大事啊?”
在我看来:
- 实现的对象是非交互性UI;
- 这么做不会给你带来过量的DOM。要知道最不能忍受的,就是臃肿的页面;
- 这么做能完美实现UI、能覆盖所有场景,否则设计跟产品不服。
什么是非交互性UI,就是不会在用户触发了某种行为时,哗啦啦来个闪瞎眼的交互,吓得用户直接高潮,而是从页面渲染后,就一直在那里,那么安静,那么美的女子,哦不,UI。
HOW,该怎么做
“可是我还是不懂该如何做才能这么有逼格”
我个人的见解:
- 布局之美,理解透盒子模型,熟悉各种布局,不要忘了这是咱的根本;
- 自适应之美,放心交给浏览器去做,我们要做的,是思考规则;
- Magic,新技术及小技巧,总能在某一刹那给你最需要的援助;
- 前人之鉴,坑王之王,你已经身经百战了,还怕什么。
这些就是我总结出你要用CSS来实现一个别人想不到的东西时,应该具有素质。最重要的还是思考,因为没有一个东西是绝对最好的,我们总在前进。
下面就以两个手机QQ实际业务的例子,带领大家感受一下CSS的魅力。
一、手Q吃喝玩乐 好友去哪儿九宫格图
下图是手Q吃喝玩乐 好友去哪儿九宫格图的图示:
从上图我们可以分析出如下需求:
- 图片大小自适应;
- 图片个数不同时,图片按照指定方式排列;
- 图片相邻处有1px空白间隙。
我们以最复杂的6图布局为例,一步一步来看如何以纯CSS实现。
float布局
最容易想到的,也是最简单的方案,就是 float 布局:
- 图片大小自适应 :宽度百分比,高度使用 padding-top 百分比
- 图片个数不同时,图片按照指定方式排列 :使用 nth-child 伪类指定不同情况下的元素大小
- 图片相邻处有1px空白间隙 :使用 border-box + border模拟边框
这里父元素的高度未知,height使用百分比行不通,而padding的百分比值是依据父元素的宽度来计算的,我们可以使用padding-top撑开高度。
让我们一瞅伪码, 猛击我看demo
1
推荐阅读
-
求一个简单的纯CSS3的实现_html/css_WEB-ITnose
-
使用CSS3伸缩盒实现图片垂直居中_html/css_WEB-ITnose
-
纯DIV+CSS实现圆角!_html/css_WEB-ITnose
-
html+css实现手机缩放,频幕转换_html/css_WEB-ITnose
-
简单实现"回车!=提交"(去除表单的回车即提交)_html/css_WEB-ITnose
-
jQuery实现放大镜效果_html/css_WEB-ITnose
-
一款纯css3实现的超炫动画背画特效_html/css_WEB-ITnose
-
求网页设计高手帮我看看,要实现图中框里面的那个样子,该怎么弄,代码如下。_html/css_WEB-ITnose
-
css+html实现自适应宽度的菜单学习_html/css_WEB-ITnose
-
CSS3实现32种基本图形_html/css_WEB-ITnose