♦

来和我一起彻底弄清楚盒子模式吧(margin,padding,div)

2007年05月28日  

css盒子模式。要向w3c标准靠拢，这个是必须要掌握的。
目前我对margin 和 padding 以及 div 的定位 甚是模糊。
发现这篇文章，觉得适合自己，也推荐给大家。
和我一起彻底弄懂CSS盒子模式吧~~
1.彻底弄懂CSS盒子模式一
2.彻底弄懂CSS盒子模式二(导航栏实例)
3.彻底弄懂CSS盒子模式三(浮动的表演和清除的自述)
4.彻底弄懂CSS盒子模式四(绝对定位和相对定位)
5.彻底弄懂CSS盒子模式五(定位强化练习)

0个评论  标签:   

[彩蛋]搜狗拼音的火星文

2007年05月28日  

搜狗输入法是近期比较火的软件，本人使用后，发现其比起智能abc，输入字更快些，而且。。我发现了一个小彩蛋，不知道火星不火星

就是在输入字的时候按键盘上面的 【~】或【`】这个键，就会有特殊的效果哦

0个评论  标签:   

[JS]二个简单的滑动门效果

2007年05月28日  

1.简单实用的滑动门效果，想要改变效果onmouseover 改成 onclick 就好了

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>我的滑动门</title>
  5. <style type="text/css">
  6. body{
  7. color: #000;
  8. font-family: "宋体", arial;
  9. font-size: 12px;
  10. background: #fff;
  11. text-align: center;
  12. margin: 0;
  13. }
  14. .nTab{
  15. float: left;
  16. width: 960px;
  17. margin: 0 auto;
  18. border-bottom:1px #AACCEE solid;
  19. background:#d5d5d5;
  20. background-position:left;
  21. background-repeat:repeat-y;
  22. margin-bottom:2px;
  23. }
  24. .nTab .TabTitle{
  25. clear: both;
  26. height: 22px;
  27. overflow: hidden;
  28. }
  29. .nTab .TabTitle ul{
  30. border:0;
  31. margin:0;
  32. padding:0;
  33. }
  34. .nTab .TabTitle li{
  35. float: left;
  36. width: 70px;
  37. cursor: pointer;
  38. padding-top: 4px;
  39. padding-right: 0px;
  40. padding-left: 0px;
  41. padding-bottom: 2px;
  42. list-style-type: none;
  43. }
  44. .nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
  45. .nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
  46. .nTab .TabContent{
  47. width:auto;background:#fff;
  48. margin: 0px auto;
  49. padding:10px 0 0 0;
  50. border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
  51. }
  52. .none {display:none;}
  53.  
  54. </style>
  55.  
  56. <script type="text/javascript">
  57. function nTabs(thisObj,Num){
  58. if(thisObj.className == "active")return;
  59. var tabObj = thisObj.parentNode.id;
  60. var tabList = document.getElementById(tabObj).getElementsByTagName("li");
  61. for(i=0; i <tabList.length; i++)
  62. {
  63.   if (i == Num)
  64.   {
  65.    thisObj.className = "active";
  66.       document.getElementById(tabObj+"_Content"+i).style.display = "block";
  67.   }else{
  68.    tabList[i].className = "normal";
  69.    document.getElementById(tabObj+"_Content"+i).style.display = "none";
  70.   }
  71. }
  72. }
  73. </script>
  74.  
  75.  
  76. </head>
  77. <body>
  78. <br />
  79. <br />
  80.  
  81. <div align="center" style="padding-left:25px;">
  82. <!-- 选项卡0开始 -->
  83.   <div class="nTab">
  84.     <!-- 标题开始 -->
  85.     <div class="TabTitle">
  86.       <ul id="myTab0">
  87.         <li class="active" onmouseover="nTabs(this,0);">全部</li>
  88.         <li class="normal" onmouseover="nTabs(this,1);">日志</li>
  89.         <li class="normal" onmouseover="nTabs(this,2);">咨询</li>
  90.         <li class="normal" onmouseover="nTabs(this,3);">相册</li>
  91.         <li class="normal" onmouseover="nTabs(this,4);">商城</li>
  92.         <li class="normal" onmouseover="nTabs(this,5);">社区</li>
  93.       </ul>
  94.     </div>
  95.     <!-- 内容开始 -->
  96.     <div class="TabContent">
  97.       <div id="myTab0_Content0"> 000 </div>
  98.       <div id="myTab0_Content1" class="none">111</div>
  99.       <div id="myTab0_Content2" class="none">222</div>
  100.       <div id="myTab0_Content3" class="none">333</div>
  101.       <div id="myTab0_Content4" class="none">444</div>
  102.       <div id="myTab0_Content5" class="none">555</div>
  103.     </div>
  104.   </div>
  105.   <!-- 选项卡0结束 -->
  106.   <!-- 选项卡1开始 -->
  107.   <div class="nTab" style=width:288px>
  108.     <!-- 标题开始 -->
  109.     <div class="TabTitle">
  110.       <ul id="myTab1">
  111.         <li class="active" onclick="nTabs(this,0);">aaa</li>
  112.         <li class="normal" onclick="nTabs(this,1);">bbb</li>
  113.         <li class="normal" onclick="nTabs(this,2);">ccc</li>
  114.         <li class="normal" onclick="nTabs(this,3);">单击</li>
  115.       </ul>
  116.     </div>
  117.     <!-- 内容开始 -->
  118.     <div class="TabContent">
  119.       <div id="myTab1_Content0"> 000 </div>
  120.       <div id="myTab1_Content1" class="none"> 111 </div>
  121.       <div id="myTab1_Content2" class="none"> 222 </div>
  122.       <div id="myTab1_Content3" class="none"> 333 </div>
  123.     </div>
  124.   </div>
  125.   <!-- 选项卡1结束 -->
  126. </div>
  127.  
  128. </body>
  129. </html>

2. 网易滑动效果！一个js，页面任意滑动数量、任意调用

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>滑动门</title>
  5. <style media="screen" type="text/css">
  6. <!--
  7. *{font-size:12px;}
  8. html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
  9. UL{list-style-type:none; margin:0px;}
  10. .ttl{height:18px;}
  11. .ctt{
  12. height:auto;
  13. padding:6px;
  14. clear:both;
  15. border: 1px solid #CCCCCC;
  16. }
  17. .w936{
  18. width:936px;
  19. clear:both;
  20. height: 120px;
  21. margin-top: 20px;
  22. margin-right: 0;
  23. margin-bottom: 2px;
  24. margin-left: 0;
  25. }
  26. .normaltab   {
  27. color:#1F3A87;
  28. }
  29. .hovertab    {
  30. color:#FF0000;
  31. background-color: #99CC00;
  32. }
  33. .dis{display:block;}
  34. .undis{display:none;}
  35.     .tabs {
  36.       width:100%;
  37.       background:#BBD9EE;
  38.       font-size:93%;
  39.       line-height:normal;
  40.       }
  41.     .tabs ul {
  42. margin:0;
  43. padding:10px 10px 0 50px;
  44. list-style:none;
  45.       }
  46.     .tabs li {
  47. display:inline;
  48. margin:0;
  49. padding:0;
  50. cursor: pointer;
  51.       }
  52.     .tabs a {
  53.       float:left;
  54.       background:url("attachments/month_0705/r200752813247.gif") no-repeat left top;
  55.       margin:0;
  56.       padding:0 0 0 4px;
  57.       text-decoration:none;
  58.       }
  59.     .tabs a span {
  60.       float:left;
  61.       display:block;
  62.       background:url("attachments/month_0705/d200752813252.gif") no-repeat right top;
  63.       padding:5px 15px 4px 6px;
  64.       color:#666;
  65.       }
  66.     .tabs a span {float:none;}
  67.     .tabs a:hover span {
  68.       color:#FF9834;
  69.       }
  70.     .tabs a:hover {
  71.       background-position:0% -42px;
  72.       }
  73.     .tabs a:hover span {
  74.       background-position:100% -42px;
  75.       }
  76. -->
  77. </style>
  78. <script type="text/javascript" language="javascript">
  79. <!--
  80. function g(o){return document.getElementById(o);}
  81. function HoverLi(n)
  82. {
  83. for(var i=1;i<=24;i++){g('tb_'+i);g('tbc_0'+i).className='undis';}
  84. g('tbc_0'+n).className='dis';g('tb_'+n);
  85. }
  86. //-->
  87. </script>
  88. </head>
  89.  
  90. <body>
  91.  
  92. <div class="w936">
  93. <div id="tb_" class="tb_ tabs">
  94. <ul>
  95. <li id="tb_1" onmouseover="HoverLi(1);"><a href="#"><span>栏目导航</span></a></li>
  96. <li id="tb_2" onmouseover="HoverLi(2);"><a href="#"><span>栏目导航</span></a></li>
  97. <li id="tb_3" onmouseover="HoverLi(3);"><a href="#"><span>栏目导航</span></a></li>
  98. <li id="tb_4" onmouseover="HoverLi(4);"><a href="#"><span>栏目导航</span></a></li>
  99. <li id="tb_5" onmouseover="HoverLi(5);"><a href="#"><span>栏目导航</span></a></li>
  100. <li id="tb_6" onmouseover="HoverLi(6);"><a href="#"><span>栏目导航</span></a></li>
  101. <li id="tb_7" onmouseover="HoverLi(7);"><a href="#"><span>栏目导航</span></a></li>
  102. <li id="tb_8" onmouseover="HoverLi(8);"><a href="#"><span>栏目导航</span></a></li>
  103. </ul>
  104. </div>
  105. <div class="ctt">
  106. <div class="dis" id="tbc_01">内容1</div>
  107. <div class="undis" id="tbc_02">内容2</div>
  108. <div class="undis" id="tbc_03">内容3</div>
  109. <div class="undis" id="tbc_04">内容4</div>
  110. <div class="undis" id="tbc_05">内容5</div>
  111. <div class="undis" id="tbc_06">内容6</div>
  112. <div class="undis" id="tbc_07">内容7</div>
  113. <div class="undis" id="tbc_08">内容8</div>
  114. </div>
  115. </div>
  116. <div class="w936">
  117. <div id="tb_" class="tb_  tabs">
  118. <ul>
  119. <li id="tb_9" onmouseover="HoverLi(9);"><a href="#"><span>栏目导航</span></a></li>
  120. <li id="tb_10" onmouseover="HoverLi(10);"><a href="#"><span>栏目导航</span></a></li>
  121. <li id="tb_11" onmouseover="HoverLi(11);"><a href="#"><span>栏目导航</span></a></li>
  122. <li id="tb_12" onmouseover="HoverLi(12);"><a href="#"><span>栏目导航</span></a></li>
  123. <li id="tb_13" onmouseover="HoverLi(13);"><a href="#"><span>栏目导航</span></a></li>
  124. <li id="tb_14" onmouseover="HoverLi(14);"><a href="#"><span>栏目导航</span></a></li>
  125. <li id="tb_15" conmouseover="HoverLi(15);"><a href="#"><span>栏目导航</span></a></li>
  126. <li id="tb_16" onmouseover="HoverLi(16);"><a href="#"><span>栏目导航</span></a></li>
  127. </ul>
  128. </div>
  129. <div class="ctt">
  130. <div class="dis" id="tbc_09">内容9</div>
  131. <div class="undis" id="tbc_010">内容10</div>
  132. <div class="undis" id="tbc_011">内容11</div>
  133. <div class="undis" id="tbc_012">内容12</div>
  134. <div class="undis" id="tbc_013">内容13</div>
  135. <div class="undis" id="tbc_014">内容14</div>
  136. <div class="undis" id="tbc_015">内容15</div>
  137. <div class="undis" id="tbc_016">内容16</div>
  138. </div>
  139. </div>
  140. <div class="w936">
  141. <div id="tb_" class="tb_  tabs">
  142. <ul>
  143. <li id="tb_17" onmouseover="HoverLi(17);"><a href="#"><span>栏目导航</span></a></li>
  144. <li id="tb_18" onmouseover="HoverLi(18);"><a href="#"><span>栏目导航</span></a></li>
  145. <li id="tb_19" onmouseover="HoverLi(19);"><a href="#"><span>栏目导航</span></a></li>
  146. <li id="tb_20" onmouseover="HoverLi(20);"><a href="#"><span>栏目导航</span></a></li>
  147. <li id="tb_21" onmouseover="HoverLi(21);"><a href="#"><span>栏目导航</span></a></li>
  148. <li id="tb_22" onmouseover="HoverLi(22);"><a href="#"><span>栏目导航</span></a></li>
  149. <li id="tb_23" conmouseover="HoverLi(23);"><a href="#"><span>栏目导航</span></a></li>
  150. <li id="tb_24" onmouseover="HoverLi(24);"><a href="#"><span>栏目导航</span></a></li>
  151. </ul>
  152. </div>
  153. <div class="ctt">
  154. <div class="dis" id="tbc_017">内容17</div>
  155. <div class="undis" id="tbc_018">内容18</div>
  156. <div class="undis" id="tbc_019">内容19</div>
  157. <div class="undis" id="tbc_020">内容20</div>
  158. <div class="undis" id="tbc_021">内容21</div>
  159. <div class="undis" id="tbc_022">内容22</div>
  160. <div class="undis" id="tbc_023">内容23</div>
  161. <div class="undis" id="tbc_024">内容24</div>
  162. </div>
  163. </div>
  164. </body>
  165. </html>

0个评论  标签:   

一个很不错的图片淡入淡出效果

2006年10月25日  

鼠标移动一下，就会显示图片了。淡入淡出效果。不错哦 ->

  1. <script>
  2. function high(which2){
  3. theobject=which2
  4. highlighting=setInterval("highlightit(theobject)",50)
  5. }
  6. function low(which2){
  7. theobject=which2
  8. highlighting=setInterval("lowlightit(theobject)",50)
  9. }
  10. function highlightit(cur2){
  11. if (cur2.filters.alpha.opacity<100)
  12. cur2.filters.alpha.opacity+=10
  13. else if (window.highlighting)
  14. clearInterval(highlighting)
  15. }
  16. function lowlightit(cur2){
  17. if (cur2.filters.alpha.opacity>0)
  18. cur2.filters.alpha.opacity-=10
  19. else if (window.highlighting)
  20. clearInterval(highlighting)
  21. }
  22. </script>
  23. <a href="#"><img src="http://www.blueidea.com/img/common/logo.gif" onMouseOut="low(this)" onMouseOver="high(this)" style="FILTER: alpha(opacity=0)" border="0"></a>

0个评论  标签:   

btchina效果(2个鼠标效果，1个显示div，1个悬停)

2006年08月21日  
  1. <script>
  2. var timer=null;
  3. </script>
  4. <center>
  5. <a href="#" onclick="return false" onmouseover="disp1()" onmouseout="timer=setTimeout('hide()',500)">Blueidea Web Team
  6. </a>
  7. <div id="mydiv" style="position:absolute;visibility:hidden;border:1px black solid;background-color:yellow;padding:10px;line-height:140%" onmouseover="clearTimeout(timer)" onmouseout="setTimeout('hide()',500)">
  8. 科技新闻<br />
  9. 社会新闻<br />
  10. <img src="<a href="http://bbs.blueidea.com/customavatars/Sheneyan.gif" target="_blank">http://bbs.blueidea.com/customavatars/Sheneyan.gif</a>"><br />
  11. 娱乐新闻<br />
  12. 金翅擘海<br />
  13. </div>
  14. <script>
  15. function hide() {
  16. mydiv.style.visibility="hidden";
  17. }
  18. function disp1(){
  19. mydiv.style.visibility="visible";
  20. mydiv.style.left=event.srcElement.offsetLeft;
  21. mydiv.style.top=event.srcElement.offsetTop+event.srcElement.offsetHeight-2;
  22. }
  23.  
  24. </script>
  1. <style type=text/css>BODY {
  2. OVERFLOW: scroll; OVERFLOW-X: hidden
  3. }
  4. .DEK {
  5. POSITION: absolute; VISIBILITY: hidden; Z-INDEX: 200
  6. }
  7. A.js:link {
  8. COLOR: #ff0000; LINE-HEIGHT: 120%; TEXT-DECORATION: none
  9. }
  10. A.js:visited {
  11. COLOR: #ff0000; LINE-HEIGHT: 120%; TEXT-DECORATION: none
  12. }
  13. A.js:hover {
  14. COLOR: #ff3300; LINE-HEIGHT: 120%; TEXT-DECORATION: underline
  15. }
  16. A.js:active {
  17. COLOR: #ff3300; LINE-HEIGHT: 120%; TEXT-DECORATION: underline
  18. }
  19. </style>
  20.  
  21.  
  22. <center>
  23. <table border=0 cellPadding=0 cellSpacing=0 height="42%" width="36%">
  24.   <tbody>
  25.   <tr>
  26.     <td align=middle><br />
  27.       <div class=dek id=dek style="left: 67px; top: 66px; width: 289px; height: 17px"></div>
  28.       <script type=text/javascript>
  29. Xoffset=-60;
  30. Yoffset= 20;
  31.  
  32. var nav,old,iex=(document.all),yyy=-1000;
  33. if(navigator.appName=="Netscape"){(document.layers)?nav=true:old=true;}
  34.  
  35. if(!old){
  36. var skn=(nav)?document.dek:dek.style;
  37. if(nav)document.captureEvents(Event.MOUSEMOVE);
  38. document.onmousemove=get_mouse;
  39. }
  40.  
  41. function popup(msg,bak){
  42. var content="<table WIDTH=150 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 "+
  43. "BGCOLOR="+bak+"><td ALIGN=center><font COLOR=black SIZE=2>"+msg+"</font></td></table>";
  44. if(old){alert(msg);return;}
  45. else{yyy=Yoffset;
  46. if(nav){skn.document.write(content);skn.document.close();skn.visibility="visible"}
  47. if(iex){document.all("dek").innerHTML=content;skn.visibility="visible"}
  48. }
  49. }
  50.  
  51. function get_mouse(e){
  52. var x=(nav)?e.pageX:event.x+document.body.scrollLeft;skn.left=x+Xoffset;
  53. var y=(nav)?e.pageY:event.y+document.body.scrollTop;skn.top=y+yyy;
  54. }
  55.  
  56. function kill(){
  57. if(!old){yyy=-1000;skn.visibility="hidden";}
  58. }
  59. </script>
  60.       <a href="#" onmouseout=kill()
  61.       onmouseover="popup('这里是链接一的提示<br />可以定义不同的背景颜色以及链接等等','lightgreen')"
  62.       ;>演示链接一</a> <a href="#" onmouseout=kill()
  63.       onmouseover="popup('这里是链接二的提示<br />可以定义不同的背景颜色以及链接等等','lightblue')"
  64.       ;>演示链接二</a></td>
  65.   </tr></tbody></table>

无觅相关文章插件，快速提升流量

2个评论  标签:   

« 上一页下一页 »

这里都有我

分类

标签云

php 表单 鲜果 discuz flash 邀请 blueidea tan5 产品经理 职位 Grid System 当机 前端 饿了么 导航 gtd 软件 outlook 产品 wordpress 英剧 闲谈 mac mysql 字体 体验 导向 td themes free

最新文章