Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

jQuery:CSSÒõÓ°¶Ô»°¿ò

jQuery²å¼þ: jquery.widget.shadowbox.js
/**
* Ò»¸ö¼òµ¥µÄÉèÖÃDIVÒõÓ°µÄ²å¼þ
*
* ¹¦ÄÜ:
* 1. ¸ù¾ÝÒõÓ°¿í¶È×Ô¶¯µ÷ÕûÍâ²ãÈÝÆ÷¿í¶È,ÒÔ¼°Í¸Ã÷¶È
* 2. ¿É¶¨ÒåShadowBoxµÄ¿í¶ÈºÍ¸ß¶È
* 3. ¿ÉÓÃCSSÑùʽ±í¶¨Òå¿ÉÊÓ»¯Ñùʽ
*
* @author joe.he <developerworks@163.com>
* @copyright irgs.cn
*/
(function(jQuery) {
jQuery.fn.shadowbox = function(settings) {

var self = this;
// ĬÈÏÉèÖÃ
var defaults = {
shodowWidth: 20,
css: {
outer: 'widget-shadowbox-outer',
shadow: 'widget-shadowbox-shadow',
}
};
if (settings)
jQuery.extend(defaults, settings);

// ÉèÖÃÒõÓ°²ãµÄCSSÑùʽ
var shadow = jQuery("<div>")
.addClass(defaults.css.shadow) // ¹ØÁªÒ»¸öCSSÑùʽ¹æÔò,¿ÉÒÔ×Ô¶¨ÒåÒõÓ°Ñùʽ
.width(self.width())
.height(self.height())
.css({
marginTop:defaults.shodowWidth+"px",
marginLeft:defaults.shodowWidth+"px",
zIndex:-100,
position: "absolute"
});
var outer = jQuery("<div>")
.addClass(defaults.css.outer)
.width(self.outerWidth()+defaults.shodowWidth)
.height(self.outerHeight()+defaults.shodowWidth)
.css({
position: "absolute",
zIndex:999
});
this.prepend(shadow).wrap(outer.get());

// ·µ»ØjQuery¶ÔÏóÓû§Á´Ê½µ÷ÓÃ
return this;

};
})(jQuery);

HTMLÒ³Ãæ: jquery.widget.shadowbox.html
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script>
<mce:script type="text/javascript" src="jquery.widgets.shadowbo


Ïà¹ØÎĵµ£º

CSSºÍJS±êÇ©styleÊôÐÔ¶ÔÕÕ±í

CSS ºÍ JavaScript ±êÇ© style ÊôÐÔ¶ÔÕÕ±í£º
ºÐ×Ó±êÇ©ºÍÊôÐÔ¶ÔÕÕ
CSSÓï·¨£¨²»Çø·Ö´óСд£© JavaScriptÓï·¨£¨Çø·Ö´óСд£©
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color bor ......

Íæ×ªCSS£¬´Ó²ËÄñ¿ªÊ¼Ö® CSS×ÖÌåÑÕÉ«µÄÉèÖÃ

½ñÌìдÁËÒ»¸ö¼òµ¥µÄÍøÒ³£¬Çë¿´´úÂ룺
´íÎóµÄ£º
HTML´úÂ룺
½ñÌìµÄÈÕ×Ó
//CSS´úÂëʹÓÃÍⲿÒýÈëʽ

ÎҵļÒÏçÔÚ¿­Àï
CSS´úÂ룺
/* CSS Document */
body{
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:red; /*ÒªµÄ¾ÍÊÇÕâÑùµÄЧ¹û£ºÉèÖÃ×ÖÌåÑÕɫΪºìÉ«*/
}
½á¹ûÏÔʾµÄ×ÖÌ ......

CSS: z index ȡֵ·¶Î§


Ô­Àí£º
µ±Á½¸öͬ¸¸ÔªËØz-indexÏàͬʱ£¬ºóÃæµÄÔªËØÏÔʾÔÚÉÏÃæ¡£
µ±z-index³¬¹ýä¯ÀÀÆ÷×î´óֵʱ£¬ä¯ÀÀÆ÷»á°´×î´óÖµ¼ÆËã¡£
·½·¨£º
Á¬Ðø·ÅÖÃÁ½¸ödivÔªËØd1£¬d2£»²¢É趨position:absolute¼°²»Í¬±³¾°É«¡£
É趨d1.z-index = max + 1, d2.z-index = max£»
µ±max + 1ÓÐЧʱ£¬d1ÔÚǰ£»µ±max + 1 ÎÞЧʱ£¬d2ÔÚǰ¡££¨²Î¿´Ô­Àí£© ......

css ÉèÖúÃTD ͬʱ´æÔÚtreeviewÓëgridviewµÄʱºò

ÈÃtreeview²»ÏÔʾtdÍø¸ñÏß gridviewÏÔÊ¾Íø¸ñÏß
HTML 
<style type="text/css">
        TD
        {
            font-size: 9pt;
       ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ