Epile · 奇雅 » css http://epile.org/blog 混迹于互联网的传媒人士，喜欢折腾各种解决方案。 Mon, 07 Jun 2010 02:59:52 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 CSS/Javascript压缩工具taobao jsminifier http://epile.org/blog/html/jsminifier.html http://epile.org/blog/html/jsminifier.html#comments Thu, 16 Jul 2009 02:53:47 +0000 Epile http://epile.cn/blog/?p=959 Epile在网上找Javascript和CSS压缩软件的时候搜索到这款由淘宝在雅虎YUICompressed基础上开发的压缩工具，用起来还挺不错的。
软件自带的安装说明说得不清楚，在这里Epile写了一个安装说明，并上传到Google Code分享给大家。

本软件安装完毕可以直接在要压缩的文件点击右键使用，非常方便。

安装说明

  1. 下载jsMinifier
  2. 安装Java SE Development Kit (JDK)
  3. 打开“控制面板”，在其中打开“系统”，其下“高级”选项卡下的环境变量中的系统变量里添加变量名JAVA_HOME，变量值为Java SE Development Kit的安装目录，如“C:\Program Files\Java\jdk1.6.0_12”；
  4. 解压缩jsMinifier.rar，把jsMinifier的目录添加到环境变量中的Path变量里，用“;”与其它值分隔；
  5. 执行jsMinifier目录下的jsMinifier.reg和cssMinifier.reg，进行安装；
  6. 直接在css或js文件使用右键，执行菜单里的压缩JavaScript或压缩CSS，系统将会在该目录下生成“文件名-min.js”或“文件名-min.css”，这就是压缩后的文件。

注：压缩包中的test.source.js和test.source.css供测试用。

您可能还对以下内容感兴趣

]]> http://epile.org/blog/html/jsminifier.html/feed/ 16 CSS图像地图技巧和教程 http://epile.org/blog/html/css-image-map-techniques-and-tutorials.html http://epile.org/blog/html/css-image-map-techniques-and-tutorials.html#comments Wed, 08 Jul 2009 06:03:10 +0000 Epile http://epile.cn/blog/?p=926 CSS图像地图是指在一张图片上定义多个点击的热点链接，显示信息或导航。它有很多的解决方案，以下我们列出的是迄今为止最好和最有用的技巧和教程。

标题所指的图像地图 ，并不意味着简单的图像替换，它指的是采用纯粹的CSS ，而不是CSS与JavaScript或Ajax混合（虽说也有很多解决方案采用了javascript）。我们只用唯一CSS，来完美实现这个效果。

CSS图像地图， Redux （教程）

CSS图像地图， Redux （教程）

网址 ： CSS图像地图， Redux

这个教程采用a:hover效果结合定义列表，利用CSS属性中背景位置进行“定位”。

带有Pop-UP工具提示效果的CSS图像地图 （教程）

带有Pop-UP工具提示效果的CSS图像地图 （教程）

网址 ： 带有Pop-UP提示效果的CSS图像地图

使用无序列表，两张图片，和少量的CSS代码 ，你就可以创造一个无障碍“图像地图”的弹出式工具提示，通过地图上的链接为您的读者提供更多信息。与其它图像地图不同的是它支持较旧版本的Internet Explorer 。

网址 ： 带有Pop-UP提示效果的CSS图像地图 。
使用无序列表，两张图片，和少量的CSS代码 ，你就可以创造一个无障碍“图像地图”的弹出式工具提示，通过地图上的链接为您的读者提供更多信息。与其它图像地图不同的是它支持较旧版本的Internet Explorer 。

如何在自己的网站上使用CSS创建图像地图？（教程）

如何在自己的网站上使用CSS创建图像地图？（教程）

网址 ： 如何在自己的网站上使用CSS创建图像地图？

依旧是一个使用无序列表+CSS创建图像地图的教程。

只使用CSS创建图像地图 （教程）

只使用CSS创建图像地图 （教程）

网址 ： 只使用CSS创建图像地图

本教程展示如何让一个普通的定义列表变成一个影像地图，使用的无非就是CSS，所有在大部分浏览器上兼容。教程将带你一步步走，充分说明了使用每个风格的原因以及每一步的后果。

图像地图 （教程）

图像地图 （教程）

网址 ： 图像地图

作者深入和详细的教程，将有助于使任何人学习，了解和整理CSS 。本教程中将使用CSS创建不可见的链接并使它们浮动在背景图像上面。

CSS图像翻转地图 （教程）

CSS图像翻转地图 （教程）

网址 ： CSS图像翻转地图

这个地图包含鼠标落在国旗之上，是使用一个图片文件和定位悬停控制的CSS文件。

利用CSS图像翻转地图 （技术）

利用CSS图像翻转地图 （技术）

网址 ： 利用CSS图像翻转地图

欧洲图片地图，当你悬停在每一个国家的板块时国旗将显示出来。

利用CSS图像翻转地图 （技术）

利用CSS图像翻转地图 （技术）

网址 ： 实验利用CSS图像翻转地图

将鼠标悬停在图片显示的三个感兴趣的区域。当悬停在一个区域时，右边将显示一个更大的图片以及说明文字。

卷动图像地图 （技术）

卷动图像地图

网址 ： 卷动图像地图

这是一个横向滚动图片，有10个白色矩形的热点。只要点击任何一个热点就看到右边显示的更大的图像和左下角一小区域的信息。

原文：CSS Image Map Techniques and Tutorials
翻译：Epile

您可能还对以下内容感兴趣

]]> http://epile.org/blog/html/css-image-map-techniques-and-tutorials.html/feed/ 4 说说我和CSS http://epile.org/blog/html/something-about-me-and-css.html http://epile.org/blog/html/something-about-me-and-css.html#comments Wed, 17 Jun 2009 00:52:47 +0000 Epile http://epile.cn/blog/?p=894 CSS（层叠样式表），英文全称Cascading Style Sheets，是一种网页的外观语言，简单来说就是CSS语言是用来定义网页上文字、图片等的外观（字体、大小、颜色等）。

自己也记不起什么时候开始使用的CSS，以前用Dreamweaver做网页的时候会自动产生CSS代码，也许这不算是使用CSS吧。第一次真正重视起CSS是从08年的寒假开始的。那时候做学院网站的界面，刚开始用表格布局糊弄了许久，始终切不好图，效果一直不能让人满意。就在当当上买了《CSS禅意花园》、《别具光芒：DIV+CSS网页布局与美化》这两本经典的CSS书。看完后对CSS有了一个全局的认识。对于计算机类的书，Epile建议先快速读完全书一遍，才开始细致读，这样效果是最好的。技术以及一些方法的东西，有一定全局认识下读起来会轻松很多。之后用了四天的时间写了网站的CSS和Html代码。那时候对浏览器兼容性的了解甚少，所以网站在非IE浏览器下有点小问题。

用CSS写的第二个网站是媒介汇报的网站，因为一直比较懒和网站策划上的一些问题，这个由四个子站加一个首页的门户网站我总共用了1年的时间才写完。虽然每个子站实际花费的时间只需要1-3天的时间。都是因为太懒了，太久没写CSS就一点感觉都没有，没感觉就不想写，就这样恶性循环下去了。

暑假实习的职位是一个小型门户网站的前端设计，也该把兴趣转变为专业技能了，决定暑假深入学习CSS。主要有：雅虎的YUI，CSS3，CSS Hacks，制定自己的CSS书写规范，写一个自己的CSS Framkwork。

CSS资源推荐

书：

  1. 《别具光芒：DIV+CSS网页布局与美化》| 经典CSS书目，内容有点简单，适合初学者。
  2. 《CSS商业网站布局之道》| 很赞的一本书，内容很全很详细，建议全书略读后再精读。
  3. 《CSS网站布局实录：基于Web标准的网站设计指南（第二版）》 | 业界推荐的书，内容与第二本相似，只在书店略看了一遍。
  4. 《CSS禅意花园》| 不建议买，翻译一般，内容很简单，主要就是禅意花园上作品的介绍。

工具：

  1. IETester | 多IE版本共存解决方案
  2. CSS Sprites 样式生成工具(bg2css) | CSS Sprites（图片合并）技术样式生成工具

CSS框架：

  1. CSS框架收集

您可能还对以下内容感兴趣

]]> http://epile.org/blog/html/something-about-me-and-css.html/feed/ 9