CSS+JavaScriptʵÏֲ㼶ÏÔʾÒþ²Ø
/***************************by
garcon1986********************************/
¸ÐлCSDNµÄshan1119 °ïÎÒ½â¾öJavascript²¿·ÖµÄ´íÎó¡£
<mce:script language="JavaScript"><!--
function toggle(id,id2,id3) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
if (id2 != undefined)document.getElementById(id2).style.display = 'none';
if (id3 != undefined)document.getElementById(id3).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
// --></mce:script>
<mce:style type="text/css"><!--
#main{
position:relative;
top:20px;
left:20px;
width:200px;
background: lightblue;
}
#hidden {
position:relative;
top:0px;
left:280px;
width:200px;
background: lightgrey;
display: none;
}
#hidden2 {
position:relative;
top:-20px;
left:580px;
width:200px;
background: lightgreen;
display: none;
}
#hidden3 {
position:relative;
top:100px;
left:0px;
width:200px;
background: lightpink;
display: none;
}
--></mce:style><style type="text/css" mce_bogus="1">#main{
position:relative;
top:20px;
left:20px;
width:200px;
background: lightblue;
}
#hidden {
position:relative;
top:0px;
left:280px;
width:200px;
background: lightgrey;
display: none;
}
#hidden2 {
position:relative;
top:-20px;
left:580px;
width:200px;
background: lightgreen;
display: none;
}
#hidden3 {
position:relative;
top:100px;
left:0px;
width:200px;
background: lightpink;
display: none;
}</style>
<div id="main" onclick="toggle('hidden','hidden2','hidden3');">
1
</div>
<div id="hidden" onclick="toggle('hidden2','hidden3')">
1.1
</div>
<div id="hidden2"onclick="toggle('hidden3');">
1.1.1
</div>
<div id="hidden3">
1.1.1.1
</div>
ÔÌû£ºhttp://t
Ïà¹ØÎĵµ£º
ÏëÐÞ¸ÄÒ»ÏÂ×Ó×Ô¼ºµÄCSS£¬ÒòΪ²©¿Í±êÌâÕýºÃ°ÑÍøÒ³Í¼Æ¬ÉϵÄÎÄ×ÖÕýºÃµµÁËÒ»²¿·Ö£¬¿´ÆðÀ´ºÜ²»Ë¬¡£×îºóȷʵÊÇÓÉ“marginÃüÁî”À´¿ØÖƵģ¬ÓÚÊÇÉÏÍøÑ§Ï°ÁËÒ»ÏÂ×ÓÕâ¸öµÄÓ÷¨¡£marginÔÚÖÐÎÄÖÐÎÒÃÇ·Òë³ÉÍâ±ß¾à»òÕßÍâ²¹°×£¨±¾ÎÄÖÐÒýÓÃÍâ±ß¾à£©¡£ËûÊÇÔªËØºÐÄ£ÐÍ£¨box model£©µÄ»ù´¡ÊôÐÔ¡£
Ò»¡¢marginµÄ»ù±¾ÌØÐÔ
marginÊô ......
¸ù¾Ýä¯ÀÀÆ÷¸´ÖƵ½¼ôÌù°åµÄ¹¦ÄÜ£¬¾ßÌå´úÂëÈçÏ£º
var txt="Òª¸´ÖƵ½¼ôÌù°åµÄÄÚÈÝ";
function copyToClipboard(txt) {
if(window.clipboardData) {
window.clipboardData.clearData();
&nb ......
ʹÓÃä¯ÀÀÆ÷µÄÄÚ²¿¶ÔÏóϵͳ,
¿ÉʵÏÖÓëHTMLÎĵµ½øÐн»»¥¡£ËüµÄ×÷ÓÃÊǽ«Ïà¹ØÔªËØ×éÖ¯°ü×°ÆðÀ´£¬Ìṩ¸ø³ÌÐòÉè¼ÆÈËԱʹÓ㬴Ӷø¼õÇá±à³ÌÈ˵ÄÀͶ¯£¬Ìá¸ßÉè¼ÆWebÒ³ÃæµÄÄÜÁ¦¡£
Ò»¡¢
ä¯ÀÀÆ÷¶ÔÏó²ã´Î¼°ÆäÖ÷Òª×÷ÓÃ
¡¡¡¡³ýÁËÇ°ÃæÌáµ½¹ýµÄÎĵµdocument¶ÔÏóÍ⣬Navigatorä¯ÀÀÆ÷Öл¹ÌṩÁË´°¿Ú£¨Window£©¶ÔÏóÒÔ¼°ÀúÊ·£¨History£©ºÍÎ»Ö ......
ҪʵÏÖ¶¯Ì¬½»»¥£¬±ØÐëÕÆÎÕÓйش°Ìå¶ÔÏó(Form)ºÍ¿ò¼Ü¶ÔÏó(Frames)¸üΪ¸´ÔÓµÄ֪ʶ¡£
Ò»¡¢
´°Ìå»ù´¡ÖªÊ¶
¡¡¡¡´°Ìå¶ÔÏó¿ÉÒÔʹÉè¼ÆÈËÔ±ÄÜÓô°ÌåÖв»Í¬µÄÔªËØÓë¿Í»§»úÓû§Ïཻ»¥£¬¶øÓò»×ÅÔÚ֮ǰÊ×ÏȽøÐÐÊý¾ÝÊäÈ룬¾Í¿ÉÒÔʵÏÖ¶¯Ì¬¸Ä±ä
WebÎĵµµÄÐÐΪ¡£
£±¡¢Ê²Ã´ÊÇ´°Ìå¶ÔÏó
´°Ì壨Form£©:Ëü¹¹³ÉÁË
WebÒ³ÃæµÄ»ù±¾ÔªËØ¡£Í¨³£Ò ......
ÏÂÃæÊÇÊ®¸ö×îÅ£µÄÒ²ÊÇ×îÁ÷ÐеÄJavascript¿ò¼Ü¡£ËüÃÇÍêÈ«¿ÉÒÔµ£ÈÎĿǰÊÀ½çÉϼ¸ºõËùÓÐһЩºÍAjax¼¼ÊõÏà¹ØµÄºÍͼÐνçÃæÏà¹ØµÄÒ»Çй¦ÄÜ¡£
jQuery
http://jquery.com/
Èç¹û½ñÌìÄ㻹²»ÖªµÀjQueryµÄ»°£¬ÄÇô×÷Ϊһ¸ö³ÌÐòÔ±Äã¿ÉÄÜÕæµÄÊÇ´Ó»ðÐÇÀ´µÄÁË¡£Õâ¿ÖÅÂÊÇAjaxÖÐÓ¦ÓÃ×î¹ãµÄ¿ò¼Ü¡£°üÀ¨ÁËÐí¶àºÜ²»´íµÄUI×é¼þ£¬×ö³öÍø ......