前端设计

在前端设计里遇到一些比较常用的问题和技巧，觉得应该积累起来记下，不必等再用到的时候再到网上到处找了。

1. 解决Flash挡住弹出层的问题：

在flash代码里加上这两句：

2. 文本两端对齐

今天翻了翻收藏的一些前端效果，看到有个文本框字数输入提示效果，看了下它的代码，完全不晓得它怎么搞的，只觉得代码好乱...可能是设计师的规范、写法风格不一样的缘故吧。

仔细思考了以下这种东西，觉得不会太难，于是自己动手，丰衣足食...

首先设计了下体验的界面和细节，觉得除了像jquery ui那样的背景进度提示之外，还应该加上数字提示，所以使用界面应该如下图：

代码使用很简单，只要知道要应用的 textarea 的 id 即可。

详情请看附件示例。

一开始同事给我介绍这个玩意的时候，我的确认为它很疯狂！

我当时一度坚持认为它不能兼容，但是今天我整理了下，发现它是如此“神奇”！

Tab效果，我曾经因为不想花时间去了解类似jquery ui的tab代码原理，而宁愿自己去研究写一个

http://www.incollege.cn/content/%3Fge-jian-dan-de-jsshi-xian-tabqie-huan...

但是今天我发现我败了！败给CSS了...

我仔细研究了下它的原理，发现只是锚点而已，但是这个想法真的是奇思，真的是很疯狂，我很佩服这位大师！

写了一个Tab切换的效果。自以为比用jquery ui的tab要更简单。

HTML结构：

CSS样式：

这个设计没有太多高深的css技巧，值得提下的是相对-绝对定位的使用技巧，详情查看源码。

demo演示 http://www.incollege.cn/css_tu_xiang_ying_she/exm.html

HTML代码：

HTML图像映射，指的是利用<map>和<area>标签配合，在图像上面定义一些可链接区域。

范例代码如下(从w3cshool直接拷贝得来)：

Nice menu可以生成各种菜单的多级下拉结构，非常的nice！不过默认的样式不是很nice，需要我们根据自己的需求定制样式。在此总结出了比较全面的css定制代码给大家参考使用，当然，重点还是你的菜单设计效果如何！

1.横向下拉三级菜单（本代码只控制到三级，这对用户来说也是极限啦！）

其实说方法也好，原理也好，是简单的不能再简单的。
也许是因为没接触过，不了解，之前一直以为loading效果是个很高级的东西。其实没多少技术含量，是个小技巧而已。
下面是我在项目中用到的ajax使用代码：


$("#category a").click(function () {
var cate_para = $(this).attr("href");

$("#main-content").html('

');

一. 过滤单独的样式表
具体用法参见：IE有条件注释用法详解 http://www.incollege.cn/node/143
二. 过滤单独的规则和声明

1. 子选择器招数
最安全的过滤器依赖于未实现的CSS，而不是浏览器bug。因为这些过滤器使用有效的CSS选择器来应
用有效的声明，所以严格的说，它们根本不是过滤器。它们仅仅是某些浏览器所不能理解的有效CSS规
则。这些过滤器中的第一个称为子选择器招数。
IE6和更低版本不支持子选择器，所以可以使用它对这些浏览器隐藏规则。为了让这种过滤器起作用，必
须确保在子选择器前后没有空格。
例如：
html>body {
backgroud-color:red;
}

2. 属性选择器招数
IE6和更低版本不支持属性选择器，所以可以使用它对这些浏览器隐藏规则。
例如：

效果：

说明：为了实现现在的效果，结构稍显复杂，css和js也是。当然你可以完全使用纯css实现，可以使整个代码简洁许多。