
Ò»¡¢Ê²Ã´ÊÇÄÚ¹ö¶¯²¼¾Ö?
Ëùν¡°ÄÚ¹ö¶¯²¼¾Ö¡±£¬¹ËÃû˼Òå¾ÍÊÇÖ÷¹ö¶¯ÌõÔÚÒ³ÃæÄÚ²¿µÄ²¼¾Ö£¬ÊÇÏà¶ÔÓÚ´«Í³µÄ¹ö¶¯¶øÑԵģ¬ÀýÈ磬ÏÂͼËùʾ¹ö¶¯Ìõ£¬ÊÇ´ÓÍ·²¿Ï·½¿ªÊ¼£º

´«Í³µÄÒ³Ãæ¹ö¶¯£¬»ù±¾ÉÏÊÇÏà¶ÔÓÚÕû¸öä¯ÀÀÆ÷´°Ì壬ÀýÈ磬QQÊÓÆµÊ×Ò³£º

¶þ¡¢ÎªÊ²Ã´»áÓÐÄÚ¹ö¶¯²¼¾Ö?
Ëæ×ÅÏÔʾÆ÷É豸Խ´óÔ½¿íÔ½ÃÜ£¬ÒÔ¼°ÏÖ´úweb¼¼ÊõµÄ·¢Õ¹¡£webÕ¾µãÒѾ¿ªÊ¼ÓÐÁË´Ó´«Í³µÄÆÙ²¼Ê½ÍøÒ³ÏòÀà×ÀÃæÈí¼þ·ç¸ñÕ¾µãת±äµÄÇ÷ÊÆ¡£±È·½Ëµ£¬QQÒôÀÖµÄÊ×ҳĿǰÊÇÕâÑù×ӵģº

ÒÔºó¿ÉÄܾͻá±ä³ÉÕâÑù×Ó£º

¡°ÄÉÄᣬÕâ²»¾ÍÊÇÏÖÔÚµÄQQÒôÀÖÈí¼þ½çÃæ½ØÍ¼?¡±¡°ÕâλͬѧÑÛÉñºÜϬÀû£¬Ã»´í£¬Õâ¾ÍÊÇÓÐ×ÅÈ«¹ú×î´óµÄÕý°æ¸ßÖÊÁ¿ÀÖ¿âµÄQQÒôÀÖPC°æ½ØÍ¼¡±¡£
ÎÒÃÇ¿ÉÒÔ¾Ö²¿·Å´ó£¬»á·¢ÏÖ£¬ÊǸöʵ´òʵµÄÄÚ¹ö¶¯²¼¾Ö¡£

²»½öÊÇQQÒôÀÖ£¬ÆäËûºÜ¶à×ÀÃæÈí¼þ¶¼ÊÇÕâÖÖÄÚ¹ö¶¯²¼¾Ö£¬±È·½ËµQQÈí¼þ¹Ü¼ÒµÈµÈ¡£

Óд˿ɼû£¬Ò»µ©Ç¿½»»¥µÄ´«Í³webÒ³Ãæ×ÀÃæÈí¼þ»¯£¬ÄÚ¹ö¶¯²¼¾ÖÊÇÈÆ²»¿ªµÄÒ»¶Âǽ£¬Á˽âÖ®»¹ÊǺÜÓбØÒªµÄ¡£
Èý¡¢ÈçºÎʵÏÖÄÚ¹ö¶¯²¼¾Ö?
¼ÈÈ»ÊÇÄÚ¹ö¶¯£¬¾ÍÓбØÒª¸Éµôä¯ÀÀÆ÷ÔÉúµÄ¹ö¶¯Ìõ£¬Õâ¸öºÜ¼òµ¥£º
html { overflow: hidden; } |
¡°È»ºóÄØ?¡±ÎÒÏëÁËÏ룬ºÃÏñÈ»ºó¾ÍûÓС°È»ºó¡±ÁË£¬ÈÃÒ»¸ödivÈÝÆ÷¹ö¶¯¾ÍÍêÊÂÁË¡£
È»¶ø£¬Ê·Ǿ¹ý²»ÖªÄÑ£¬ÔÀíËäÈ»¼òµ¥Ã»ËµÍ·£¬µ«ÊÇϸ½Ú²Ù×÷»¹ÊÇÓÐЩÉÏÊֳɱ¾µÄ¡£
ΪÁ˸üºÃÀí½â£¬ÎÒÃÇÄÃʵÀý˵»°¡£×î½ü°ëÄêÒ»Ö±ÔÚ²ÎÓëÆóÒµQQÕË»§ÖÐÐĸİæµÄÏîÄ¿£¬Äã¿ÉÒÔ¿´³ÉÊÇÆóÒµºǫ́¹ÜÀíϵͳ¡£ÕâÀïÓм¸¸ö¹Ø¼ü×Ö£¬Ò»ÊÇÆóÒµ£¬¶þÊǹÜÀíϵͳ¡£
1. ÆóÒµ
ÕâÀïΪʲôҪǿµ÷ÊÇ¡°ÆóÒµ¡±ÄØ?ÒòΪÆóÒµ²úÆ·µÄÓû§Ò»°ã¶¼ÊǹºÂòÁËÆóÒµQQ²úÆ·µÄÆóÒµµÄÔ±¹¤£¬ÓÐÒ»¶¨IT¼¼ÄܵÄÈË¡£Òò´Ë£¬Óû§µÄä¯ÀÀÆ÷µÄÏÖ´ú¸Ð¾Í±ÈQzoneÓû§Ç¿²»ÉÙ¡£ÏÂͼΪͬÊÂÔÚ2015-05-20Õâ¸ö°®ÒâÂúÂúµÄÈÕ×ÓÀµÄuserAgentÊý¾Ý£º

Èç¹ûÎÒÃǽ«Ö§³ÖCSS3 animationµÄä¯ÀÀÆ÷³ÆÖ®ÎªÏÖ´úä¯ÀÀÆ÷£¬¿ÉÒÔ·¢ÏÖ£¬ÆóÒµ²úÆ·µÄÓû§£¬70%~80%µÄÓû§¶¼ÊÇʹÓõÄÏÖ´úä¯ÀÀÆ÷¡£Ç×ÃÇ£¬½ü8³ÉµÄÓû§¶¼ÊÇʹÓÃÏÖ´úä¯ÀÀÆ÷£¬Õâ¾ÍÒâζ×Å£¬ÆóÒµ²úÆ·Æäʵ¿ÉÒÔ×÷ΪÏÖ´úweb¼¼ÊõµÄÊÔÑéÌÔÚΪÓû§Ìṩ¸üºÃÌåÑé¸ü¸ßÖÊÁ¿²úÆ·µÄͬʱ£¬ÎªÈÕºóÆäËû²úÆ·µÄÏÖ´ú»¯¸ÄÔìÌṩÁ˱¦¹óµÄ½è¼ø¾Ñé¡£¶ø±¾ÎĵÄÄÚ¹ö¶¯²¼¾Ö£¬¾ÍÊÇÍòǧ¾ÑéÖеÄһС¸ö¡£
2. ¹ÜÀíϵͳ
¡°¹ÜÀíϵͳ¡±Òâζ×ÅÕ¾µãÒÔÇ¿½»»¥ÎªÖ÷£¬»áÓкܶàÀàËÆ°ì¹«Èí¼þµÄ½»»¥²Ù×÷ÔÚÀïÃæ¡£Èç¹ûÊǸüÆ«ÖØä¯ÀÀµÄÕ¾µã£¬ÀýÈçÆóÒµQQ¹ÙÍø£¬ÏÔÈ»£¬´«Í³µÄ´¹Ö±ÆÙ²¼Ê½µÄÍøÕ¾ÊǸüÊʺϵ쬹ö¶¯ä¯ÀÀ£¬ÔÙ¹ö¶¯£¬ÔÙä¯ÀÀ¡£µ«ÊÇ£¬ÆóÒµ¹ÜÀíϵͳÈç´ËÅӴ󣬲Ù×÷Èç´ËƵ·±£¬½»»¥Èç´ËÖ®¶à£¬´«Í³µÄÉÏÏÂÊ½ÍøÕ¾ÏÔÈ»ºÜÄÑÈÃÓû§Óõ÷dz£µÃÐÄÓ¦ÊÖ¡£ÏÂͼΪÒÔǰÆóÒµQQÕË»§ÖÐÐÄ×éÖ¯½á¹¹Ò³Ãæ(²âÊÔÒ³Ãæ)µÄÕæÈÝ£º

¿´×Å´ËÒ³Ãæ£¬Á¢ÂíÈÃÎÒÏëÆðÁË6Äêǰ¸Õ±ÏÒµÄÇ»áµÄÇà´ÐËêÔ£¬ÄÇʱºòµÄÒ³ÃæµÄ»ù±¾ÉϾÍÊÇÕâÑùµÄµ÷µ÷£¬Ð¡Ð¡µÄ¿Õ¼äÀïÓÐ×ÅССµÄÊÀ½ç¡£Ê±´ú·¢Õ¹£¬ÔٻԻ͵ĹýÈ¥£¬Èç¹ûûÓиı䣬ÖÕ½«»á±»ÂñÌ¡£
ÕýÊÇÓÉÓÚÒÔÉÏÁ½µã£¬Éè¼ÆÊ¦Éè¼ÆµÄʱºò£¬´óµ¨´´Ð£¬Éè¼Æ³ÉÁËÈ«ÆÁ×ÔÊÊÓ¦¡¢°ëÏìÓ¦¡¢ÀàPCÈí¼þ·ç¸ñ(ÄÚ¹ö¶¯)µÄ¹ÜÀíÕ¾µã£¬ÏÂͼΪÉÏÃæÀÏÒ³ÃæÍ¬ÑùÊý¾ÝµÄвâÊÔÒ³Ãæ½ØÍ¼£º

»Øµ½ÄÚ¹ö¶¯²¼¾Ö±¾Éí¡£
аæÆóÒµÕË»§ÖÐÐÄȫվ£¬¶¥²¿ÒÔ¼°×ó²à¹Ì¶¨£¬²»¸úËæ¹ö¶¯£¬ÓÒ²àÖ÷ÌåÄÚ¹ö¶¯£¬ÈçºÎʵÏÖÄØ?
ÓÉÓÚÆóÒµ²úÆ·²»ÓùÜ0.4%µÄIE6Óû§£¬Òò´Ë£¬Ê¼þ¾Í±äµÃ¼òµ¥µØ¶àÁË¡£ÎÒÃÇ¿ÉÒÔÀûÓþø¶Ô¶¨Î»ÔªËصÄÀÉìÌØÐÔ£¬Ê¹ÄÚ¹ö¶¯ÈÝÆ÷¸ß¶È×ÔÊÊӦƥÅä¡£HTMLÖ÷½á¹¹Ê¾ÒâÈçÏ£º
body
-- page
-- header
-- side
-- content
ÆäÖÐpage°çÑÝ´«Í³Ò³ÃæµÄ½ÇÉ«¡£ÕâÊÇÒ»¸öÔ¤ÁôÉè¼Æ£¬·ÀֹΪÁËÂú×ãijЩ¹¦ÄÜ»ò½»»¥ÌåÑéÐèÒª£¬Ò»¸öÒ³ÃæÍ¬Ê±³öÏÖ¶à¸öÀàËÆ½á¹¹Ò³ÃæµÄÇé¿ö¡£»òÕßÕâô˵°É£¬°ÑËùÓÐÒ³ÃæÄÚÈÝ·ÅÔÚÒ»¸öpageÖУ¬´Ëʱpage¾ÍºÃ±ÈÒ»¸ö¿ÉÒÔÒÆ¶¯µÄ·¿×Ó£¬»ØÍ·ÄãÌø²ÛÀ´ÌÚѶÁË£¬·¿×Ó¿ÉÒÔÒ»Æð´ø¹ýÀ´£¬ÔÀ´µÄλÖÿÉÒÔ±»ÆäËû·¿×Ó´úÌæ¡£µ«ÊÇ£¬ÄãÈç¹ûÖ±½Ó·ÅÔÚÖУ¬ÓÉÓÚÖ»ÄÜÊÇÒ»¸ö£¬²»¶¯²ú£¬´ËʱÏëÒª×öÕûÌåÇ¨ÒÆ£¬ÄѶȾͽϴó£¬Í¬Ê±ÏîÄ¿¼¸ºõ³ÉÐÍ£¬È«¾ÖÐ޸ijɱ¾¸ß¸ß·çÏÕ´ó¡£²»¹ý·²Ê¶¼ÓÐÁ½ÃæÐÔ£¬ÕâÑùµÄÕÛÌÚ¿ÉÒÔ¼õÉÙÄã°×Í··¢µÄÊýÄ¿£¬ÒòΪÄã»áÒò²ÙÀ͹ý¶ÈÍ··¢Ö±½ÓÍѵôµÄ¡£
pageÏà¹ØCSSÈçÏ£º
.page { position: absolute; top: 0; right: 0; bottom:
0; left: 0; }
Ó¦¸ÃºÜºÃÀí½â£¬¾ø¶Ô¶¨Î»£¬ÂúÆÁÀÉ죬µÈͬÓÚ£º
.page { position: absolute; top: 0; left: 0; width:
100%; height: 100%; }
ÓÉÓÚÊ¡Á˺ü¸¸ö×Ö½Ú£¬ËùÒÔÎÒÉáÆúÁËIE6ʹÓÃÁËÉÏÃæÐ´·¨¡£
¶ÔÓڹ̶¨µÄÍ·²¿header»òÕ߹̶¨µÄ²à±ßside, Äã¿ÉÒÔʹÓÃÓïÒåÃ÷È·µÄposition:fixed¶¨Î»£¬»òÕßÖ±½ÓʹÓÃposition:absolute£¬ÒòΪ¹ö¶¯ÈÝÆ÷¸úËûÃÇÆ½¼¶£¬ËùÒÔ£¬absoluteÆäʵ¾ÍÊÇfixedЧ¹û¡£
½²µ½ÕâÀï¾Í²»µÃ²»ËµµãÌâÍâ»°£¬ºÜ¶àÈË»áÓöµ½Òƶ¯¶Ëposition:fixedµÄµ×²¿ÊäÈë¿ò¶¨Î»µÄÍ·ÌÛÎÊÌ⣬ÈçºÎ½â¾ö?¾ÍÊÇʹÓñ¾ÎĽéÉܵÄÄÚ¹ö¶¯²¼¾Ö£¬È»ºóµ×²¿Ê¹ÓÃposition:absoluteÄ£ÄâfixedЧ¹û¡£
´úÂë·½Ãæ£¬Í¬Ñù¾ÍÊÇÀÉìÀÉ죺
.header { height: 62px; position: absolute; top:
0; right: 0; left: 0; }
.side { width: 200px; position: absolute; top: 62px;
bottom: 0; left: 0; }
×îºó¾ÍÊǸßÄܵÄcontent, »¹ÊÇÒ»ÑùµÄÌ×·£º
.content { position: absolute; top: 62px; right:
0; bottom: 0; left: 200px; overflow: auto; }
Ö÷ÌåÄÚÈÝÈ«²¿¶¼ÔÚcontentÀïÃæÍæË£¡£ÓÚÊÇ£¬Ò»¸ö¸ß¿í¾ù×ÔÊÊÓ¦ä¯ÀÀÆ÷´°ÌåµÄÄÚ¹ö¶¯²¼¾Ö¾Í³ÉÐÍÁË¡£
ËÄ¡¢ÄÚ¹ö¶¯²¼¾ÖµÄÉÍÓë·£
ÎÒÃÇÕ¾ÔÚÉϵÛÊÓ½ÇÉóÊÓÒ»ÏÂÄÚ¹ö¶¯²¼¾Ö£¬±¾ÖÊÉϾÍÊǹö¶¯ÈÝÆ÷µÄÇ¨ÒÆ£¬Ö°ÄÜÏ·¢¡£ËùÒÔ¾ø´ó²¿·ÖÇé¿öÏ£¬¸úÎÒÃÇÆ½³£Íæ×ªÒ³ÃæµÄ·ÊýÃ»Ê²Ã´Çø±ð¡£
µ«ÊÇ£¬±Ï¾¹½É½Ò×Ö÷£¬²îÒ컹ÊÇ´æÔڵġ£×î¼òµ¥µÄÀý×Ó¾ÍÊǶԹö¶¯Ê¼þµÄÓ°Ïì¡£ºÜ¶à¹ö¶¯²å¼þ£¬°üÀ¨ÒÔǰµÄ½Å±¾£¬ÎÒÃÇ¿ÉÄܶ¼ÊÇÕâôдµÄ£º
¡¡$(window).scroll(function() {
¡¡¡¡// ¸úÎÒÒ»Æð·¹ö°É£¬É§Äê¡¡
¡¡¡¡}); |
µ«ÊÇ£¬ÔÚÄÚ¹ö¶¯²¼¾ÖÏ£¬ÓÉÓÚ¹ö¶¯µÄÈÝÆ÷²»ÊÇwindow´°Ì壬²»ÊÇÔªËØ£¬Òò´Ë£¬ÉÏÃæ¹ö¶¯Ê¼þ°Ë±²×Ó¶¼²»»áÖ´ÐС£ÎÒÃÇÐèÒªµ÷Õû£¬ÓÉÓÚÏÖÔÚ£¬Ò³ÃæµÄÖ÷¹ö¶¯ÌõÊÇ.content,
Òò´Ë£¬ÎÒÃÇ¿ÉÒÔ£º
$(".content").scroll(function() {
¡¡¡¡// ¸úÎÒÒ»Æð·¹ö°É£¬É§Äê again¡¡
¡¡¡¡}); |
ÄãÒÔΪÊÂÇé¾ÍÕâôÍêÁËÂð?Ì«ÌìÕæÁË!ÒÔǰÎÒÃǵĹö¶¯ÌõÊǸúä¯ÀÀÆ÷ÉϱßÔµÊÇ¿¿ÔÚÒ»ÆðµÄ£¬µ«ÊÇ£¬×Ô´Ó±ä³ÉÁËÄÚ¹ö¶¯£¬¹ö¶¯ÌõÊǸúÍøÕ¾¹«ÓÃÍ·²¿Ï±ßÔµÅÅÅÅÕ¾£¬Õâ»áÔì³ÉʲôÎÊÌâÄØ?¾ÍÊÇһЩoffsetµÄ¼ÆËãÒª·¢ÉúһЩ±ä»¯¡£¾Ù¸öÀý×Ó£¬ÎÒÃÇÏ£Íû±í¸ñÍ·²¿²Ù×÷ÇøÓòÓÐÀàËÆposition:stickyЧ¹û£¬Ò²¾ÍÊÇÊÓÇøÄÚÒ»Æð·¹ö£¬Òª±»¹ö³öÈ¥µÄʱºò£¬fixed¹Ì¶¨£¬²»¸úËæ¡£

´Ëʱ£¬ÎÒÃǵÄ×î´ó¹ö¶¯¸ß¶ÈÖµ£¬¾ÍÐèÒª°ÑÍøÕ¾Í·²¿µÄ¸ß¶È¿¼ÂǽøÈ¥(´«Í³´°Ìå¹ö¶¯²»ÐèÒª£¬ÒòΪֵÊÇ0)£º
var maxScrollTop = $("#tableHeader").offset().top
- $(".header").height();
ÒÔÉÏÕâ¸ö£¬ÎÒÃÇ¿ÉÒÔ³ÆÖ®Îª¡°±ä»¯¡±£¬ÓëÔ±¾µÄʵÏÖÏà±ÈÎÞ¹¦ÎÞ¹ý£¬Ò»Öֱ仯һÖÖ×ªÒÆ¡£Êµ¼ÊÉÏ£¬ÄÚ¹ö¶¯²¼¾Ö»¹»á´øÀ´´øÓÐÖʱäÐÔÖʵÄÒ»Ð©ÌØÐÔ¡£
ÎÞ·¨¹ö¶¯µÄµ¯³ö²ã
»ù±¾ÉÏ£¬ÊǸöÏñÑùµÄweb2.0ÍøÕ¾¶¼»áÓе¯¿òweb×é¼þ£¬Ò»¸öºÚÉ«°ë͸Ã÷µÄoverlay²ã£¬ÉÏÃæÒ¡Ò·×ŵ¯¿òÃæ°å£¬ÀýÈçÕâÑùµÄ£º

¶ÔÓÚºÚÉ«°ë͸Ã÷¸²¸Ç²ã£¬´«Í³ÊµÏÖÊÇÕâÑùµÄ£ºÈç¹ûÒª¼æÈÝIE6ä¯ÀÀÆ÷£¬Ò»°ãÊÇabsolute¾ø¶Ô¶¨Î»£¬¸ß¶ÈÓÉJS¼ÆË㸳Óè;Èç¹û²»ÐèÒª¹ÜIE6,
Ôò¿ÉÒÔʹÓÃfixed¹Ì¶¨¶¨Î»¡£
È»¶ø£¬ÔÚÄÚ¹ö¶¯²¼¾ÖÏ£¬¡°ÉÍ¡±¾Í³öÀ´ÁË£¬¾ÍËãÐèÒª¼æÈÝIE6ä¯ÀÀÆ÷£¬ºÚÉ«°ë͸Ã÷¸ß¿í100%×ÔÊÊÓ¦¸²¸ÇÒ²²»ÐèÒªÈκÎJS¼ÆËãµÄ°ïÖú£¬Ò²²»ÐèÒª¼àÌýwindowµÄresizeʼþ£¬Ö±½ÓCSS¾Í¿ÉÒԸ㶨¡£ºÜ¼òµ¥£º
.overlay { position: absolute; left: 0; top: 0; width:
100%; height: 100%; }
ΪɶһÐÐCSS¾ÍÄܸ㶨ËùÓг¡¾°?ÒòΪʹÓõÄÊÇÄÚ¹ö¶¯²¼¾Ö£¬ÈçÏÂͼʾÒ⣬ÆÁÄ»¾ÍÕâô¸ß£¬¹ö¶¯ÔÚÀïÃæ£¬×ÔÈ»×ÔÊÊÓ¦£º

¿´ÉÏÈ¥ÊÇÄÚ¹ö¶¯²¼¾Ö´øÀ´µÄÒ»¸öССµÄ¡°ÉÍ¡±£¬µ«ÊÇ£¬Êµ¼ÊÉÏ£¬ÂñÏÂÁËÒ»¸ö²»Ð¡µÄ¡°·£¡±¡£
ËæÒâ¸Ä±ä¹ö¶¯ÈÝÆ÷×î´óµÄÎÊÌâÔÚÓÚ£¬µ±´æÔÚ¸²¸Ç²ãµÄʱºò£¬»áÓ°Ïì±³ºóÒ³ÃæÄÚÈݵĹö¶¯¡£
100%³ß´çµÄposition:absolute/fixedµÄ¸²¸Ç²ã£¬»á¸²¸ÇÈκηÇÔªËØ(°üÀ¨)(°üÀ¨ÕâÐ©ÔªËØµÄ¹ö¶¯Ìõ)£¬Òò´Ë£¬Ö»Òª¸²¸Ç+¹ö¶¯ÈÝÆ÷¸Ä±ä£¬Ò³Ãæ¾ÍÎÞ·¨¹ö¶¯¡£
ÄÚ¹ö¶¯²¼¾ÖÊǵäÐ͵ĸıää¯ÀÀÆ÷ĬÈϹö¶¯ÈÝÆ÷µÄ²¼¾Ö£¬×ÔÈ»¸²¸Ç²ãÒ»³öÏÖ£¬¾Íû·¨¹ö¶¯¡£²»¹ýÕâҲûʲô£¬¶Ô°É£¬µ¯¿ò³öÏÖʱºò£¬Ò³Ãæ±³¾°Ã»·¨¹öҲͦºÃµÄ¡£
µ«ÊÇ£¬Âé·³µÄÊÂÇéÊÇ£¬Èç¹ûµ¯¿ò×ÔÉí¸ß¶ÈºÜ¸ß£¬È´ÓÖû·¨¹ö¶¯ÄØ(ä¯ÀÀÆ÷¿ÉÓø߶È700ÏñËØ£¬µ¯¿òÓÐ900ÏñËØ¸ß)?
´«Í³²¼¾Öϵĵ¯¿ò£¬Èç¹û¸ß¶ÈºÜ¸ß£¬Ö±½ÓÉèÖõ¯¿òÈÝÆ÷position:absolute¾Í¿ÉÒÔÓä¿ìµØÉÏÏ·¹öÁË¡£µ«ÊÇ£¬ÔÚÄÚ¹ö¶¯²¼¾ÖÏ£¬µ¯¿ò¸ù±¾¾Í²»ÔÚ¹ö¶¯ÈÝÆ÷ÀïÃæ£¬·¹öһ˵´ÓºÎ̸Æð?
´óΣ»ú!Ôõô°ì!?
ÎÒÃÇаæÆóÒµÕË»§ÖÐÐľÍÓöµ½Õâ¸öÎÊÌ⣬ÎÒÊÇÕâô½â¾öµÄ¡ª¡ªoverlayºÍdialogºÏÌå¡£
ºÏÌåÓë¹ö¶¯
ºÏÌåÊÇʲôÒâË¼ÄØ?»ù±¾ÉÏ£¬90%+µÄµ¯¿ò×é¼þ£¬°ë͸Ã÷¸²¸Ç²ãoverlayºÍµ¯¿òdialogÊÇÁ½¸ö²¢ÁеÄÐֵܹØÏµµÄ¶ÀÁ¢µÄÔªËØ£¬ÕâÖÖÉè¼ÆµÄºÃ´¦ÔÚÓÚoverlay×é¼þ¿ÉÒÔ¸´Óá£Êµ¼ÊÉÏ£¬ÎÒÃÇҪʵÏÖÒ»¸öµ¯¿òЧ¹û£¬Ö»ÒªÒ»²ãdiv±êÇ©¾Í¿ÉÒÔÁË£¬ºËÐľÍÊÇʹÓüæÈݵÄRGBA±³¾°É«¼¼ÇÉ£¬È»ºóµ¯¿òHTML·ÅÔÚÀïÃæ£º
.container {
¡¡¡¡position: absolute; top: 0; left: 0; bottom:
0; width: 100%;
¡¡¡¡background-color: rgba(0,0,0,.5);
¡¡¡¡filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
¡¡¡¡overflow: auto;
¡¡¡¡}
¡¡¡¡:root .container {
¡¡¡¡/* IE9 ÎÞ filter */
¡¡¡¡filter: none;
¡¡¡¡} |
HTML½á¹¹Ê¾ÒâÈçÏ£º
´Ëʱ£¬µ¯¿òÔÚÒ»¸ö¿É¹ö¶¯µÄÈÝÆ÷Ö®ÖУ¬ÂèÂèÔÙÒ²²»Óõ£ÐÄÎÒ²»ÄÜÓä¿ìµØ·¹öÁË!

Îå¡¢½áÊøÓï
ÓÉÓÚ´«Í³´°Ìå¹ö¶¯ÒѾÉîÈëÈËÐÄ£¬ËùÒÔÎÒÃÇ¿ÉÄÜ»á¾õµÃÄÚ¹ö¶¯²¼¾ÖËÆºõÓÐЩ¿Ó;µ«ÊÇ£¬Èç¹ûµ±ÄêÊÇÄÚ¹ö¶¯²¼¾ÖÌìÏ£¬ÎÒÃÇÓÖ¸ÃÈçºÎ¿´´ýÐÂÐ˵Ĵ°Ìå¹ö¶¯²¼¾ÖÄØ?È»ºó£¬´Ó²úÆ·µÄ½Ç¶È½²£¬ÄÚ¹ö¶¯²¼¾ÖÔÚ²Ù×÷Èç´ËƵ·±µÄÖØ½»»¥ÏîÄ¿ÖÐËù´øÀ´µÄ½»»¥ÌåÑéÉϵĸĽø£¬ÒªÔ¶±È¾Ñé²»×ã´øÀ´µÄ¶îÍ⿪·¢³É±¾Òª´óºÜ¶àºÜ¶à¡£
ÎÒÏàÐÅ£¬ÕâÖÖ½»»¥ÐÎʽÒÔ¼°web²¼¾ÖÉϵĴ´ÐÂÒ»¶¨»á´øÀ´ºÜ¶àÕýÃæµÄ·´À¡ºÍ»ý¼«µÄÓ°Ï죬²úÆ·¼´½«ÉÏÏߣ¬ÎÒÃÇ¿ÉÒÔÊÃÄ¿ÒÔ´ý¡£
ÄÚ¹ö¶¯²¼¾Ö£¬¸üÏÖ´ú£¬¸üÒÆ¶¯£¬Èç¹ûÄúµÄÏîÄ¿ºÏÊÊ£¬²»·ÁÒ²ÊÔÊÔÕâÖÖ¿´ËÆÐÂÓ±µÄ²¼¾Ö·½Ê½¡£ |