精品国产亚洲第一区二区三区,中文字幕亚洲激情,春暖花开亚洲性无区一区二区

高性能�|�站��-�C�Z��

Eric.Zhou — Thu, 31 Mar 2011 05:29:00 GMT

Eric.Zhou 2011-03-31 13:29 发表评论

Top 10 CSS Snippets

Eric.Zhou — Mon, 04 Jan 2010 00:46:00 GMT

原文地址�Q�http://webdevmania.com/archive/top_10_css_snippets/

I have noticed myself to use a few different code snippets on a daily basis so I thought some of you might find them useful. So here we go.

Centering a website (or other elements)
The HTML
view plain copy to clipboard print ?
1. <DIV class=wrap>
2. DIV>
```
    
    
    
    
```
The CSS
view plain copy to clipboard print ?
1. .wrap { width:960px; margin:0 auto;}
```
  .wrap { width:960px; margin:0 auto;}
    
```
This is an oldie, but apperantly it is not as obvious as you would think.

Sticky Footer (make footer always be on bottom without absolute positioning)

The HTML
view plain copy to clipboard print ?
1. <DIV id=wrap>
3. <DIV id=main class=clearfix>
5. DIV>
7. DIV>
9. <DIV id=footer>
11. DIV>
```
    
    
    
    
    
    
    
```
The CSS
view plain copy to clipboard print ?
1. * { margin:0; padding:0; }
3. html, body, #wrap { height: 100%; }
5. body > #wrap {height: auto; min-height: 100%;}
7. #main { padding-bottom: 150px; } /* must be same height as the footer */
9. #footer {
10. position: relative;
11. margin-top: -150px; /* negative value of footer height */
12. height: 150px;
13. clear:both;}
15. /* CLEAR FIX*/
16. .clearfix:after {content: ".";
17. display: block;
18. height: 0;
19. clear: both;
20. visibility: hidden;}
21. .clearfix {display: inline-block;}
22. /* Hides from IE-mac */
23. * html .clearfix { height: 1%;}
24. .clearfix {display: block;}
25. /* End hide from IE-mac */
```
  * { margin:0; padding:0; }
    html, body, #wrap { height: 100%; }
    body > #wrap {height: auto; min-height: 100%;}
    #main { padding-bottom: 150px; }  /* must be same height as the footer */
    #footer {
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;}
    /* CLEAR FIX*/
    .clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
    .clearfix {display: inline-block;}
    /* Hides from IE-mac */
    * html .clearfix { height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    
```
As of recently i have had to use this over 50 times… i think this is one of the most important tricks you will learn today.

Cross-Browser Min Height

The CSS
view plain copy to clipboard print ?
1. .element { min-height:600px; height:auto !important; height:600px; }
```
  .element { min-height:600px; height:auto !important; height:600px; }
    
```
You can replace the min-height and heigth with 12em or another value that works for you.

Box Shadow (CSS3)

The CSS
view plain copy to clipboard print ?
1. .box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; }
```
  .box { box-shadow: 5px 5px 5px #666;  -moz-box-shadow: 5px 5px 5px #666;  -webkit-box-shadow: 5px 5px 5px #666; }
    
```
As you can see since this is a CSS3 property you will need all the three commands to make it cross browser(except for ie of course). The first 2 measurements are for horizontal offset and the vertical offset. The third number is for the blur radius. And the last is the color of the shadow.

Text Shadow (CSS3) with IE hack

The CSS
view plain copy to clipboard print ?
1. .text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }
```
  .text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }
    
```
This technique is great for all modern browsers, the IE fix works but it is not amazing quality.

Cross Browser CSS Opacity

The CSS
view plain copy to clipboard print ?
1. .transparent {
3. /* Modern Browsers */ opacity: 0.7;
5. /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
7. /* IE 5-7 */ filter: alpha(opacity=70);
9. /* Netscape */ -moz-opacity: 0.7;
11. /* Safari 1 */ -khtml-opacity: 0.7;
13. }
```
  .transparent {
    /* Modern Browsers */ opacity: 0.7;
    /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    /* IE 5-7 */ filter: alpha(opacity=70);
    /* Netscape */ -moz-opacity: 0.7;
    /* Safari 1 */ -khtml-opacity: 0.7;
    }
    
```
Opacity can be used for plenty of elements, it adds a certain new age style we all strive for. Notice that in some browsers transperancy is inherited by all child elements!

The Famous Meyer Reset

The CSS

view plain copy to clipboard print ?

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

  html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    }
    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }
    body {
    line-height: 1;
    color: black;
    background: white;
    }
    ol, ul {
    list-style: none;
    }
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    border-collapse: separate;
    border-spacing: 0;
    }
    caption, th, td {
    text-align: left;
    font-weight: normal;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: "";
    }
    blockquote, q {
    quotes: "" "";
    }

This is the most useful css reset out there, i use it for almost everything I work on (even the 52framework, coming soon).

Removing the dotted outlines

The CSS
view plain copy to clipboard print ?
1. a, a:active { outline: none; }
```
  a, a:active { outline: none; }
    
```
I find myself getting very annoyed with the dotted outline (especially for text-indented elements that are off the page).

Rounded Corners (non ie)

The CSS
view plain copy to clipboard print ?
1. .element {
2. -moz-border-radius: 5px;
3. -webkit-border-radius: 5px;
4. border-radius: 5px; /* future proofing */
5. }
6. .element-top-left-corner {
7. -moz-border-radius-topleft: 5px;
8. -webkit-border-top-left-radius: 5px;
9. }
```
  .element {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /* future proofing */
    }
    .element-top-left-corner {
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    }
    
```
Love rounded corners? Don’t want to slave over images and elements to get the effect? This is your solution, and elements still look fine in ie.

Override Inline Styles

The CSS
view plain copy to clipboard print ?
1. .override {
2. font-size: 14px !important;
3. }
```
  .override {
    font-size: 14px !important;
    }
    
```
This comes in handy plenty of times, I personally use it way too much everytime something doesn’t work I test if its just not being applied because of some other style.

Eric.Zhou 2010-01-04 08:46 发表评论

半透明效果文字不透明[转蝲]

Eric.Zhou — Wed, 10 Jun 2009 13:47:00 GMT

我们在��用半透明的过�E�中�Q�会发现半透明层内的文字也被加上了透明效果�Q�有的时候和我们的设计相背离�Q�如以下效果�Q?br />
代码:
1.
4.

�q�里的字也变了颜�?lt;/div>

效果1

�q�里的字也变了颜�?/div> 实际上这是css的��承机�Ӟ��内部的文字��承了外部的div的半透明�Q�如果你的网��只需要兼容IE,那么你的代码可以�q�样来写�Q�在文字的外部再加一个div�Q�设�|�此div的position属性�ؓrelative�Q�这样IE认�ؓ包含文字的div��q��了标准流�Q�样式就不再�l�承
代码2
1.

�q�里的字在IE下没有变颜色

效果2

�q�里的字在IE下没有变颜色

如果你的�|�页只打��兼容ie,那么没问题，父框�l�他个relative��p��了可�Q�但是在其他��览器里的效果�ƈ不随你所愿，只能构造两个div来模拟效果了,原理是��同��的透明的容器和不透明的容器显�C�重叠，如下代码
代码3
1.

�q�里的字体颜色是不是能兼�Ҏ��有的��览器呢

效果3

�q�里的字体颜色是不是能兼�Ҏ��有的��览器呢�Q�我在测试的�q�程中发玎ͼ�使用
margin-top:-150px惌��他重叠，却发现还是有问题�Q�只能通过absolute来设�|?/div>

�q�里的字体颜色是不是能兼�Ҏ��有的��览器呢�Q�我在测试的�q�程中发玎ͼ�使用
margin-top:-150px惌��他重叠，却发现还是有问题�Q�只能通过absolute来设�|��ȝ��:�ȝ��来说使用半透明�q�是比较�ȝ��的，如果是非必须我们�q�是换成其他�Ҏ��Q�比如做半透明的图片做容器背景�Q?img src ="http://m.tkk7.com/rain1102/aggbug/281294.html" width = "1" height = "1" />

Eric.Zhou 2009-06-10 21:47 发表评论

tab实现

Eric.Zhou — Sun, 31 May 2009 01:01:00 GMT

tab实现

�z�d��资讯

业态分�?lt;/a>

商家推荐

�z�d��资讯内容信息

Eric.Zhou 2009-05-31 09:01 发表评论

无图片圆角实现CSS

Eric.Zhou — Sun, 31 May 2009 00:55:00 GMT

无图片圆角实�?

圆角��试

内容信息

- 详细信息 -

Eric.Zhou 2009-05-31 08:55 发表评论

Eric.Zhou — Mon, 27 Apr 2009 07:44:00 GMT

COMSHARP CMS 写道�Q�在�U�编辑内容的时候，那些��Z�� JavaScript 的编辑器帮了我们大忙�Q�这些所见即所得（WYSIWYG�Q�编辑器�Q�给我们提供了类�?Office 的操作体验。如今，��M��|�站内容��理�pȝ��Q�CMS�Q�和博客�pȝ��都需要一个这��L��~�辑器。本文精选了10个基�?JavaScript 的编辑器�Q�它们有的是��Z�� jQuery 框架�Q�有点则不是�?/p>

MarkitUp - jQuery

Official Website | Demo

功能不是很多�Q�但很轻量，很灵�z�R��打包后只有6.5K大小�?/p>

jWYSIWYG - jQuery

Official Website | Demo

非常基本的编辑器�Q�简单�ؓ本。打包后只有7K�?/p>

Lightweight RTE- jQuery

Official Website | Demo

��单到不能再简单，很容易自�׃��攏V�?/p>

HTMLBox - jQuery

Official Website | Demo

跨浏览器�Q�开源，��Z�� jQuery。可以很�Ҏ��同各�U?CMS�Q�论坛，留言本，博客�{�系�l�集成�?/p>

D Small Rich Text Editor - jQuery

Official Website | Demo

��Z�� iframe 对象�?/p>

WYMEditor - jQuery

Official Website | Demo

TinyMCE - non-jQuery

Official Website | Demo

最�l�典的基�?JavaScript 的编辑器�Q�COMSHARP CMS 默认的编辑器��是�q�个�?/p>

fckeditor - Non-jQuery

Official Website | Demo

功能非常强大�?/p>

Yahoo YUI Rich Text Editor - Non-jQuery

Official Website | Demo

��Z�� Yahoo YUI�Q�简单，但很可靠�?/p>

Xinha - Non-jQuery

Official Website | Demo

自由的基�?nbsp; BSD 许可�~�辑器，功能完善�Q�很适合同各�U�系�l�集成�?/p>

本文原文来源�Q?a >http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors

来自: comsharp

Eric.Zhou 2009-04-27 15:44 发表评论

为jmesa表格的date�c�d��数据加filter

Eric.Zhou — Fri, 20 Jun 2008 06:59:00 GMT

<jmesa:htmlColumn 

    property="born"

    pattern="MM/yyyy" 

    cellEditor="org.jmesa.view.editor.DateCellEditor"/>

package com.founder.web.ext;

import Java.util.Date;
import Java.util.HashMap;
import Java.util.Map;

import org.jmesa.core.filter.DateFilterMatcher;
import org.jmesa.core.filter.FilterMatcher;
import org.jmesa.core.filter.FilterMatcherMap;
import org.jmesa.core.filter.MatcherKey;

public class DateFilterMatcherMap implements FilterMatcherMap {

public Map getFilterMatchers() {
  Map filterMatcherMap = new HashMap();
  filterMatcherMap.put(new MatcherKey(Date.class, "born"), new DateFilterMatcher("MM/dd/yyyy"));
  return filterMatcherMap;
}

}

现在需要修�?span class="pln">tableFacade标签�?/p>

<jmesa:tableFacade

    id="tag" 

    filterMatcherMap="com.founder.web.ext.DateFilterMatcherMap"

Eric.Zhou 2008-06-20 14:59 发表评论

Eric.Zhou — Thu, 19 Jun 2008 10:07:00 GMT

input高度固定�Q�自动增�?lt;br>

textarea宽度固定�Q�自动增�?lt;br>

Eric.Zhou 2008-06-19 18:07 发表评论

FireFox innerHTML无效

Eric.Zhou — Thu, 19 Jun 2008 09:42:00 GMT

今天在做��面的时候遇��C��个问�? 在��用YUI的弹出页面的时�?innerHTML在FireFox下面�W�一�ơ可�?然后再重新弹出页面的时候就无效�?但在IE下面是好�?代码如下:
function disciplineChanged(value) {
  if (value == 'Audit') {
   dueDateLabel.innerHTML="";
  }else if (value == 'Additional CEU') {
   dueDateLabel.innerHTML="";
  } else if(value == 'Due Date') {
   dueDateLabel.innerHTML="";
  }

}

后来改�ؓ使用标准写法��可以了.document.getElementById("dueDateLabel")
function disciplineChanged(value) {
  if (value == 'Audit') {
   document.getElementById("dueDateLabel").innerHTML="";
  }else if (value == 'Additional CEU') {
   document.getElementById("dueDateLabel").innerHTML="";
  } else if(value == 'Due Date') {
   document.getElementById("dueDateLabel").innerHTML="";
  }

}
��费了我半小时的旉��!

Eric.Zhou 2008-06-19 17:42 发表评论

Eric.Zhou — Wed, 23 Jan 2008 08:38:00 GMT

Tip

Move your mouser over the red square.

Eric.Zhou — Wed, 23 Jan 2008 08:20:00 GMT

Toggle

Click Here

This is some content to show and hide.

Click Here

This is some content to show and hide.

Eric.Zhou 2008-01-23 16:20 发表评论

snap�l�文章中的链接加上羃略图(��教�E?�Q��{载）

Eric.Zhou — Thu, 20 Dec 2007 02:36:00 GMT

标放到链接上��可以看到羃略图�?br /> 效果演示�?a target="_blank">本站首页

具体使用办法�Q?br /> �?a target="_blank" rel="nofollow">snap�|�站可以甌��C��D늱��g��下�Ş式的代码�Q?br />

��代码置于页面代码的前面��可以了。（�l�测试，��Z��拖慢速度�Q�放�?lt;/body>前也可以�Q�）

下面说说代码的修改：

1、��用默认的代码�Q�鼠标移动到链接上时昄��的效果是带搜索框的，但是可以通过修改代码来去掉搜索框�Q�先看效果对比：

修改�Ҏ��是，��获得代码中�?strong>sb=1�Ҏ��sb=0

2、默认代码效果是��面中的所有链接都有鼠标划�q�时昄��~�略图效果�?/strong>如果你想�Ҏ��个特定链接禁用羃略图效果�Q�可以对该链接加上一个分�c�L��标识�Q?br /> 例如链接

xxx
�Q�禁用羃略图的方法是写成
xxx

通常�Q�一个页面里大部分链接我们都不想加入�~�略囄��Q�所以上�q�办法有点烦琐了�?br /> 其实可以通过修改代码中的ap=1�?strong>ap=0来�ə�面的所有链接在默认情况下不昄��~�略图，�q�时只有链接写成以下格式的情况下才会有羃略图昄��Q?br />

XXX

对于上述各种情况�Q�如果链接本�w�已�l�有了某个class分类�Q�比如已�l�分�c�Mؓclass="123",可以�?strong>�I�格来分隔，�q�赋予多个class分类�Q�比�?br /> class="123 snap_nopreview"或者class="123 snap_preview"

以上为本人的一点小��心得，希望对各位看官有点帮助�?br /> --------------------------------------------------------------------------------------------------------

对于我��用的MT�Q�可以对模版中的评论者网站链接�Ş式加入一个class="snap_preview"来实现对评论者网站界面的初步预览�Q�我觉得是个不错的小工具�?br /> 当然其他�E�序�Q�也可以做相应的修改实现该效果。我��׃��再多说了�?/p>

Eric.Zhou 2007-12-20 10:36 发表评论

Eric.Zhou — Mon, 17 Dec 2007 08:57:00 GMT

�W�合web标准插入Flash的方�?/a>

Eric.Zhou 2007-12-17 16:57 发表评论

使用CSS控制囄��寚w��方式

Eric.Zhou — Sat, 15 Dec 2007 15:04:00 GMT

在以前做囄��和文字对齐的时候，使用的是img的属性，比如align="left" �Q�而在使用CSS控制囄��的时候，则需要��用float来替代align�Q�而不是text-align�Q?img src ="http://m.tkk7.com/rain1102/aggbug/168013.html" width = "1" height = "1" />

Eric.Zhou 2007-12-15 23:04 发表评论

CSS样式切换技�?- 动态更换网��色彩皮�?�?

Eric.Zhou — Wed, 28 Nov 2007 12:58:00 GMT

样式与数据分��L��带来的不只是�W�合标准�q�样的简单，样式既然与数据分��那么样式的切换则变得理所当然的了�Q�但是网上这��L��中文教程实在是太��了�Q�所以我攉��了一部分中外�|�站已经实现的技术资料整理出来供�|�友参考�?/span>

首先要具备不同内容的CSS文�g�Q�最好每个文件代表一�U�样式，或是代表需要作出变动的部分�Q�。这里以三个��Z��Q?/span>

�W�一个是背景为红色的CSS文�g�Q?/span>red.css�Q?/span>CSS中的内容为：

Copy code

body {background-color:red;}

�W�二个是背景为绿色的CSS文�g�Q?/span>green.css�Q?/span>CSS中的内容为：

Copy code

body {background-color:green;}

�W�三个是背景为黄色的CSS文�g�Q?/span>yellow.css�Q?/span>CSS中的内容为：

Copy code

body {background-color:yellow;}

然后�?/span>xthml文�g中加入这三个CSS的链�?/span>

Copy code

�q�三个中除了title不一样外�q�有一个地�Ҏ��所不同�Q�那��是REL。第一个与�W�三个都�?/span>alternate stylesheet只有�W�二个是stylesheet。这�W�二个就是当然样式�?/span>

在链接下面再导入一�?/span>JS文�g�Q�用来控制这个样式切�?/span>

Copy code

在合适的地方加入三个切换按钮

Copy code

�U�色样式">
�l�色样式">
黄色样式">
没有样式">

好了发布试试炚w��三个切换链接�Q�是不是已经切换了样式？

补遗�Q�带有记忆功能的JS文档

Copy code

Eric.Zhou 2007-11-28 20:58 发表评论

对li元素�q�行样式�?实现水��^攄��

Eric.Zhou — Thu, 22 Nov 2007 13:37:00 GMT

li {
display: inline; //让所有的在一�?br /> list-style-type: none;
}

list-style-type的值可以�ؓ:

disc	Default. Solid circles.
circle	Outlined circles.
square	Solid squares.
decimal	1, 2, 3, 4, and so on.
lower-roman	i, ii, iii, iv, and so on.
upper-roman	I, II, III, IV, and so on.
lower-alpha	a, b, c, d, and so on.
upper-alpha	A, B, C, D, and so on.
none	No marker is shown

Eric.Zhou 2007-11-22 21:37 发表评论

Display与Visibility的不�?

Eric.Zhou — Mon, 16 Oct 2006 04:58:00 GMT

css中的display与visibility——大多数人很�Ҏ��css属性display和visibility��h��Q�它们看似没有什么不同，其实它们的差别却是很大的�?visibility属性用来确定元素是昄��q�是隐藏�Q�这用visibility="visible|hidden"来表�C�，visible表示昄��Q�hidden表示隐藏。当visibility被设�|��ؓ"hidden"的时候，元素虽然被隐藏了�Q�但它仍然占据它原来所在的位置�?/div>

Eric.Zhou 2006-10-16 12:58 发表评论

精品国产亚洲第一区二区三区,中文字幕亚洲激情,春暖花开亚洲性无区一区二区

高性能�|�站�����-�C�Z��

Top 10 CSS Snippets

半透明效果文字不透明[转蝲]

tab实现

无图片圆角实现CSS

MarkitUp - jQuery

jWYSIWYG - jQuery

Lightweight RTE- jQuery

HTMLBox - jQuery

D Small Rich Text Editor - jQuery

WYMEditor - jQuery

TinyMCE - non-jQuery

fckeditor - Non-jQuery

Yahoo YUI Rich Text Editor - Non-jQuery

Xinha - Non-jQuery

为jmesa表格的date�c�d��数据加filter

FireFox innerHTML无效

snap�l�文章中的链接加上羃略图(���教�E?�Q��{载）

使用CSS控制囄���寚w��方式

CSS样式切换技�?- 动态更换网��色彩皮�?�?

对li元素�q�行样式�?实现水��^攄���

Display与Visibility的不�?

高性能�|�站��-�C�Z��

snap�l�文章中的链接加上羃略图(��教�E?�Q��{载）

使用CSS控制囄��寚w��方式

对li元素�q�行样式�?实现水��^攄��