分类目录归档:html&CSS学习笔记

关于Html和CSS的学习笔记

记极端跳转代码

JS的跳转
为什么要单独拿出来说,是因为各种各样的跳转脚本太丰富了。。。放几个我收藏的栗子:

<script language=”javascript”> location.replace(“http://www.rffan.com”) </script>

这段代码是最有用的代码。

栗子1:(这个最没营养)

  1. <script language=’javascript’>window.location=’http://www.baidu.com’;</script>
  2. <script language=”javascript”>document.location = “http://www.baidu.com”;</script>

复制代码

栗子2:
—————————————
先在页面中做iframe,

  1. <IFRAME height=3220 marginHeight=0 src=/aaa.html frameBorder=0 width=100% marginWidth=0 scrolling=noalign=center></IFRAME>

复制代码

下面代码放入要iframe的aaa.html中

  1. <script type=”text/javascript”>
  2. var turl = “http://www.baidu.com/”;
  3. if(!window.attachEvent){
  4.     document.write(‘<input style=”display:none” type=”button” id=”exe” value=”” onclick=”window.parent.location.href=\”+turl+’\'”>’);
  5.     document.getElementById(‘exe’).click();
  6. }else{
  7.     document.write(‘<a style=”display:none” target=”_parent” href=”‘+turl+'” id=”exe”></a>’);
  8.     document.getElementById(‘exe’).click();
  9. }
  10. </script>

复制代码

栗子3:
—————————————

  1. <a  id=”auto”>百度</a>
  2. <SCRIPT LANGUAGE=”JavaScript”>
  3. <!–
  4. function Redirect(){
  5. var lnk = document.getElementById(“auto”);
  6. if(typeof(lnk.click)==”undefined”){
  7. window.location.;
  8. }else{lnk.click();}}
  9. var time = 1; //时间,秒
  10. var i = 0;
  11. function dis(){
  12. document.all.s.innerHTML = “还剩” + (time – i) + “秒”;
  13. i++;
  14. }
  15. timer=setInterval(‘dis()’, 1000);//显示时间
  16. timer=setTimeout(‘Redirect()’,time * 1000); //跳转
  17. //–>
  18. </SCRIPT>

复制代码

栗子4,带进度条:

  1. <form name=loading>
  2. <p align=center><font face=arial color=#0066ff size=2>loading…</font>
  3. <input style=”padding-right: 0px; padding-left: 0px; font-weight: bolder; padding-bottom: 0px; color: #0066ff; border-top-style: none; padding-top: 0px; font-family: arial; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none” size=46 name=chart>
  4. <input style=”border-right: medium none; border-top: medium none; border-left: medium none; color: #0066ff; border-bottom: medium none; text-align: center” size=47 name=percent>
  5. <script language=”javascript”>
  6. var bar=0
  7. var line=”||”
  8. var amount=”||”
  9. count()
  10. function count(){
  11.     bar=bar+2
  12.     amount =amount + line
  13.     document.loading.chart.value=amount
  14.     document.loading.percent.value=bar+”%”
  15.     if (bar<99){
  16.         setTimeout(“count()”,100);
  17.     }else{
  18.         window.location = “http://www.baidu.com/”;
  19.     }
  20. }
  21. </script>
  22. </p>
  23. </form>

复制代码

PHP中的跳转
  1. <?php
  2. $asins = $_GET[“asins”];
  3. $tag = $_GET[“tag”];
  4. $url = “http://www.amazon.com/dp/”.$asins.”/?tag=”.$tag;
  5. Header(“HTTP/1.1 302 Moved Permanently”);
  6. Header(“Location: “.$url);
  7. ?>

CSS修改实例之搭建像chinaz的超级ping一样的样式

我们测试IP的ping的时候常常会使用chinaz作为我们的ping,但是我们很少会发现当我们直接复制chinaz的时候就会出现那个难看的带圆点li列表(如果你的主题没有定义li的话)那么怎么解决呢?看阿福变魔术吧

只要在你的wordpress的主CSS上加上以下的CSS代码,直接复制之后效果就在下面了,是不是很轻松呢?

/* ping列表开始 */
#detail {margin:5px auto;width:600px;border:#b2b2b2 1px solid;overflow:hidden;font-size:13px;font-family:”Microsoft Yahei”;}
#detail ul {margin:0 !important;padding:0 !important;height:35px !important; width:666px !important; overflow:hidden !important;border-bottom:#b2b2b2 1px dotted !important;}
#detail ul:hover{background:#f4f4f4 !important;}
#detail li{ text-align:center !important;padding-top:8px !important;margin-left:0px !important;color:#555 !important;height:34px !important;width:128px !important; float:left !important; list-style:none !important; }
#detail #detail ,#detail .head:hover {background:#f4f4f4 !important;}
#countresult{margin:20px auto;font-size:13px;font-family:”Microsoft Yahei”;text-align:center;color:#555;}

/* ping列表结束 */

效果如下:

  • 序号
  • Ping的地点
  • 响应IP
  • 响应时间
  • TTL
  • 赞助商 赞助点联系QQ:1751691323
最快:上海[电信] 5 毫秒    最慢:德国[海外] 299 毫秒
电信平均: 28 毫秒    联通平均: 45 毫秒