分类目录归档:CSS教程

纯CSS自适应响应式Table数据表格

今天给大家分享一个用纯HTML和CSS实现的table表格,非常实用。首先,表格的头部采用了隔列换色的形式,表格的行也采用斑马式的交替颜色,这些都是通过CSS定义的,因此表格的外观看起来还不错。其次表格是自适应响应式的,当页面缩小到一定范围时,表头将以行的形式固定,数据可以水平拖动。整体来说,这个自定义表格用起来还是很不错的,你也可以定义自己喜欢的颜色风格。

css-responsive-table

在线演示源码下载

使用uncss去除无用的CSS

从代码的角度讲,你知道什么是比往网站或应用里添加功能更好的事情吗?删除那些没用的东西。也许是一些代码、图片、或相关依赖等,就像扔掉家中储存柜里没用的产生异味的存货。我经常用ImageOptim来优化我的图片的体积,这既能提供页面加载速度,又能减少带宽流量。然而,你知道有什么工具能找到页面中样式文件里无用的CSS吗?之前我介绍过一个用JavaScript找到无用CSS的方法,但事实上,我们并不想知道哪些CSS规则是无用的,我们想要的是一个没有多余CSS的干净的样式文件。所以,这个叫做uncss的NodeJS工具就是我们要找的了。下面我们来看看uncss是如何使用的!

一个基本的用法是直接在命令行窗口里输入uncss命令:

uncss http://www.webhek.com > styles.css

执行输出的结果就是一个你想要的、剔除了所有无用的CSS规则的完整的样式表文件。那uncss究竟是如何做到这些的呢?让我来一步步告诉你:

  1. 首先PhantomJS会加载整个HTML页面,然后执行JavaScript。
  2. 接着从HTML页面里提取页面中所有的CSS样[......]

阅读全文>>