ʹÓÃĸ°æÒ³Ê±ÄÚÈÝÒ³ÈçºÎ¼ÓÈëcssºÍjavascript
×î½üÒ»Ö±ºÜ棬×öÒ»¸öѧУµÄÍøÕ¾ÏîÄ¿£¬ÊÇasp.net2.0£¬×öÕâ¸öÏîÄ¿¹ý³ÌÖÐÓкöà¾Ñé¿ÉÒÔ×ܽáһϣ¬²»¹ýÏÖÔÚÏîÄ¿½ø¶ÈºÜ½ô£¬ÏÈ·ÅÒ»·Å£¬µÈ×öÍêÁËÒ»Æð×ܽáһϡ£½ñÌì¼òµ¥Ð´Ð´Ê¹ÓÃĸ°æÒ³Ê±ÄÚÈÝÒ³ÖÐÈçºÎʹÓÃcssºÍjavascriptµÄÎÊÌâ¡£
ÓÉÓÚÍøÕ¾µÄÖ÷ҪƵµÀÒ³ºÍÁбíÒ³µÄÍ·²¿ºÍµ×²¿¶¼ÊÇÒ»ÑùµÄ£¬Èç¹û½«Ã¿¸öÒ³Ãæ·ÅÔÚµ¥¶ÀµÄÒ³ÃæÖУ¬µ±Í·²¿ºÍµ×²¿ÐèÒª¸ü¸Äʱά»¤Á¿Ì«´ó¡£ÓÚÊÇÏë°ÑÍ·²¿ºÍµ×²¿×ö³Éĸ°æÒ³£¬ÆµµÀÒ³ºÍÁбíÒ³µÄ¾ßÌåÄÚÈݷŵ½ÄÚÈÝÒ³ÖС£ÕâÑùµ±Í·ºÍµ×ÐèÒª¸Ä¶¯Ê±£¬Ö»ÒªÐÞ¸ÄÒ»ÏÂĸ°æÒ³¾Í¿ÉÒÔÁË¡£
ºÃ´¦ÓÐÁË£¬ÎÊÌâÒ²½Ó×ÅÀ´ÁË¡£ÔÀ´ÔÚÆµµÀÒ³ºÍÁбíÒ³ÖÐÓÐÆä¸÷×ÔµÄcssÒýÈëºÍһЩjavascriptº¯Êý£¬µ±Ê¹ÓÃĸ°æÒ³Ê±£¬·ÅÔÚÄÚÈÝÒ³ÖÐÕâЩcssÑùʽºÍ javascriptº¯ÊýÔõô´¦ÀíÄØ£¿ÒòΪ´ó¼ÒÖªµÀ£¬Ê¹ÓÃĸ°æÒ³µÄÄÚÈÝÒ³ÊDz»Äܰüº¬<head></head>±ê¼ÇµÄ£¬¶øcss ºÍjavascriptº¯ÊýµÄÉùÃ÷ÊÇÒª·Åµ½<head></head>ÖмäµÄ£¬ÕâЩcssÑùʽºÍjavascriptº¯ÊýÈçºÎ´¦ ÀíÄØ£¿ÉÏÍø²éÁËһϣ¬´óÖÂÓÐÈýÖÖ½â¾ö·½°¸£º·½°¸Ò»£º°ÑËùÓеÄcssÑùʽºÍjavascriptº¯Êý·Åµ½Ä¸°æÒ³µÄ<head></head>ÖУ¬ ÎÒ¾õµÃÕâÑù×öµÄ±×¶Ë¾ÍÊǵ¼ÖÂĸ°æÒ³µÄ<head></head>ÇøÌØ±ðÓ·Ö×£¬Í¬Ê±Èç¹ûÔÀ´Á½¸öƵµÀÒ³Öаüº¬Í¬ÃûµÄcssÉùÃ÷»ò javascriptº¯Êý£¬µ«È´ÊDz»Í¬Ñùʽ»òÖ´Ðв»Í¬²Ù×÷£¬Ôõô°ìÄØ£¿ËùÒÔÕâµÚÒ»ÖÖ·½°¸ºÜ¿ì±»ÎÒ·ñ¶¨ÁË¡£·½°¸¶þÊÇÔÚÄÚÈÝÒ³µÄPageLoadʼþÖÐͨ¹ý´ú ÂëÀ´Ö¸¶¨±¾ÄÚÈÝÒ³µÄcssÎļþ¡£¾ßÌå´úÂëÈçÏ£º
static public class ControlHelper
{
static public void AddStyleSheet(Page page, string cssPath)
{
HtmlLink link = new HtmlLink();
link.Href = cssPath;
link.Attributes["rel"] = "stylesheet";
link.Attributes["type"] = "text/css";
page.Header.Controls.Add(link);
}
}
ÕâÑù£¬ÔÚ¾ßÌåÒ³Ãæ£¬ÎÒÃǾͿÉÒÔͨ¹ýÈçÏ´úÂëÌí¼Ó CSS ÒýÓãº
protected void Page_Load(object sender, EventArgs e)
{
ControlHelper.AddStyle
Ïà¹ØÎĵµ£º
I needed a tab pane to put some content in my web pages. There are many solutions around
and I must say that they are quite good, but I had some extra requirements that I needed.
I did search around but I did not find what I wanted, so I ended up producing something and now I am sharing
it with y ......
ͨ³£µÄÎÒÃÇÔÚ¶ÁÈ¡ÎÄÕ±êÌâµÄʱºò£¬Óöµ½×Ö·û¹ý¶à£¬¶¼ÊÇͨ¹ý³ÌÐòÔÚSERVER¶Ë½ØÈ¡Ò»¶¨µÄ×Ö·ûÊý£¬È»ºóÌí¼Ó...À´ÊµÏÖ±êÌⳤ¶È½ØÈ¡µÄ¡£ÆäʵÎÒÃÇÒ²¿ÉÒÔͨ¹ýCSSÀ´¿ØÖÆ¡£
ʵÁÐÈçÏ£º
.title
{
width:200px;
white-space:nowrap;
word-break:keep-all;
overflow:hidden;
text-overflow:ellipsis;
}
¿ÉÓÃspan»òdivÒ ......
¶ÔDIV+CSSż»¹ÊÇÐÂÊÖ,ËùÒÔ¶ÔIDÓëCLASSÖ®¼äµÄÇø±ð,żµ½½ñÌìÒ²»¹ÊÇÓÐЩÐíÃÔã,¸Õ²Å²éÁËÏÂÏà¹Ø×ÊÁÏ,¹ûÈ»¸øÅ¼Ö¸Ã÷ÁË·½Ïò,ÏÂÃæÊÇËüÃÇÖ®¼äµÄÇø±ðÀ´×ÔÍøÉÏÄÚÈÝÎÒ°ÑËüÊÕ²ØÁ˽øÀ´,ÒÔ±ã²Î¿¼: ¡¡ ¡¡¡¡
Ò»¡¢ÔÚweb±ê×¼ÖÐÊDz»ÈÝÐíÖØ¸´IDµÄ£¬ÀýÈç div id="a" ²»ÈÝÐíÖØ¸´2´Î£»¶øclassËù¶¨ÒåµÄÊÇÀ࣬ÀíÂÛÉÏ¿ÉÒÔÎÞÏÞÖØ¸´¡£ÒÔ¸ù¾ÝÐèÒª¶à´ÎÒýÓà ......
overflow´Ó×ÖÃæÒâÒåÉÏÀ´½²¾ÍÊÇÒç³öµÄÒâ˼£¬»»¾ä»°Ëµ£¬ÄãÓиö²ã£¬µ«ÊÇÀïÃæµÄÄÚÈÝ£¬Í¼Æ¬»òÕßÎÄ×ÖÒª±È²ã´ó£¬overflow¾ÍÊÇÕë¶ÔÕâÖÖÇé¿ö½øÐд¦ÀíµÄ¡£
°üº¬4¸öÊôÐÔÖµ£¬visible,hidden,auto,scroll
visible¾ÍÊdz¬³öµÄÄÚÈÝÈÔÈ»Õý³£±»ÏÔʾ³öÀ´¡£
hidden¾ÍÊdz¬³öµÄÄÚÈݱ»Òþ²Ø¡£ &nbs ......
Ч¹ûͼ
´úÂë:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Scrollable</title>
<mce:script type="text/javascript"><!--
resizeCallback = function() {
......