随笔分类 - Html+css技术

收集或整理的html+css的相关技巧和经验。

全兼容可高亮二级缓冲折叠菜单

摘要: 在后台或OA系统中最常用到的布局往往是一个全屏布局，一般都是上中下三行两列布局，页头、页脚、左侧菜单加一个右侧ifame框架页。所以那种带折叠的二级菜单是会经常使用到的，本例便是实现这样一种比较通用的全兼容可高亮二级缓冲折叠菜单。

阅读全文

posted @ 2010-05-28 02:59 Biny 阅读(14027) | 编辑

CSS圆角框组件 V1.0

摘要: 本来前三篇文章已经将CSS圆角框讲解完毕，但从网友反馈中，都说到不好使用，因此有了这篇文章，本文主要是将前面的结果总结修订后进行JS封装，方便调用。

阅读全文

posted @ 2009-12-11 08:31 Biny 阅读(17643) | 编辑

纯CSS圆角框3－圆角化图片

摘要: 在前面一篇文章中，我们将一张上下渐变的的图片作为标题的背景，并将它应用了圆角效果。是不是这种圆角框只能用于比较单调的图片呢？我们还能将一些颜色比较丰富的图片也进行透明圆角化吗？

阅读全文

posted @ 2009-12-02 08:28 Biny 阅读(11644) | 编辑

纯CSS圆角框2－透明圆角化背景图片

摘要: 第一章中我介绍了最基本的纯CSS圆角框的实现原理，并给出Demo，在本章中会对上一个模型作一些新的创新，实现将背景图片透明圆角化。并给出一些漂亮的通用演示效果。

阅读全文

posted @ 2009-12-01 08:35 Biny 阅读(18837) | 编辑

纯CSS圆角框

摘要: 在我的文章《超圆滑圆角框的半完美解决方案》中已经总结了七种不同的圆角框解决方案，基本上总结完了目前网络上比较流行的圆角框实现方案。而在我的另一篇文章《无图片山顶角》中又是一个另类的实现方法。而在这篇文章会对纯CSS圆角框做出一些创新。

阅读全文

posted @ 2009-11-30 11:25 Biny 阅读(82133) | 编辑

【冰极峰教程系列之五】：无hack并支持透明圆角框的全兼容九宫格布局

摘要: 前言：在前面四篇文章中，我介绍了九宫格的原理及一个应用案例，本来已经告一段落了，但是那个布局还是有一定的局限性的。其最大的局限是不能应用四角圆角外面是透明的图片，而作为一个界面布局方式，如果不能应用透明的外圆角，那么这种布局的可扩展性就会大受影响，不能最大化限度地得以推广。本文就是要从根本上解决这个问题。

阅读全文

posted @ 2009-07-19 23:34 Biny 阅读(4598) | 编辑

【冰极峰教程系列之四】：九宫格应用案例--极酷网页播放器

摘要: 在前面的三篇系列文章中，我对九宫格布局作了详细的介绍。先从一个基本布局入手，将在制作过程中遇到的问题逐一进行了讲解。这三篇文章都是基本原理的讲解，没有一个有力的应用案例来证明这种原理是否正确，可能有些朋友已经有点急不可烦，也有网友要求我能提供案例。因此，在这一篇文章中，我将介绍一个九宫格案例—极酷的播放器。

阅读全文

posted @ 2009-06-29 08:44 Biny 阅读(5905) | 编辑

【冰极峰教程系列之三】：三层分离的完美九宫格

摘要: 在我的前一篇教程《牢不可破的九宫格布局》中，我介绍了一种比较完美的九宫格布局方法，它能完全弹性地调整自己的宽高，从而实现比较灵活的布局风格。 然而为了弹性功能完美地体现出来，所付出的代价还是很沉重的，从结构上看，其结构是比较臃肿的，但是每个节点又是必不可少的，无法精简，否则会导致其灵活性不够。 在实战运用中，可能好多设计师并不喜欢这种布局结构，嫌其结构冗余。

一个完美的九宫格设计应该是一种三层分离的结构，我想达到的理想的九宫格应该是这样的： 1、 只需要应用一个class样式给想应用九宫格布局的容器，就能自动创建这种布局。结构应该足够精简，只用很少的结构就能实现丰富的颜色风格。 2、 能够将这种布局样式应用于一个页面的多个容器中。 3、 三层分离的设计，能提供丰富的颜色皮肤方案，便阅读全文

posted @ 2009-06-24 08:47 Biny 阅读(5061) | 编辑

【冰极峰教程系列之二】：牢不可破的九宫格布局

摘要: 在我的前一篇教程《九宫格基本布局》中，我介绍了用相对定位加绝对定位的方法来制作九宫格的基本布局。这是一种比较符合人们惯性思维的方法，好像制作过程中一切都是顺理成章的事情，然而因为IE6让人恶心的奇偶性BUG，使得这种布局方法要想通用变得有点遥不可及，因为国内大多数用户还是用着IE6，我们不能因此而丢掉这部分用户。 这个BUG目前是无药可治，也没有什么Hack技巧能运用，唯一能用的方式就是绕开它。也就是说我要定位这九宫格的四个角容器的位置，绝对定位的方法是不能采用的了，这不吝是一个重大的打击，这将完全推翻我前一篇文章中用到的方法，我们只好另起炉灶了。

阅读全文

posted @ 2009-06-22 08:41 Biny 阅读(5319) | 编辑

［冰极峰教程系列之一］：九宫格基本布局

摘要: 九宫格是一种比较古老的设计，它最基本的表现其实就像是一个三行三列的表格。其实它最初是在window的c/s结构中用得比较多，比如我们经常看到软件中的一个窗体，其实就是一个九宫格的典型应用，因为窗体需要在八个方向拉伸，所以在C/S软件中大量采用这种技术来布局设计。在B/S系统大行其道的当今社会，这种布局逐渐被一些网页设计师运用在网页中去，用得最多的就是在圆角框布局中应用。

阅读全文

posted @ 2009-06-18 12:07 Biny 阅读(7479) | 编辑

弹性流体布局