可点击关闭的纯代码无图版浮动tips提示特效代码-JS特效-爱易网页

可点击关闭的纯代码无图版浮动tips提示特效代码

日期：2014-05-18　浏览次数：20157 次

以下是程序代码

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>无图版Tips</title>

</head>
<body>
  <style>
  /*reset*/
html{color:#000;background:#fff}body{margin:0;padding:0;font-size:12px;}.fb{font-weight:bold;}.fn{font-weight:normal;}.t2{text-indent:2em;}.tc{text-align:center;}h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,form,input,textarea,button,select,p,pre,blockquote{margin:0;padding:0;list-style:none;font-size:12px;}table,th,td{border-collapse:collapse;margin:0;padding:0;}img{border:0 none}object{vertical-align:top}.clear{clear:both}.fix{zoom:1;clear:both}.fix:after{display:block;content:'';clear:both;height:0;visibility:hidden}.fl{float:left;display:inline;}.fr{float:right;display:inline;}.vm{vertical-align:middle;}.pr{position:relative;}.pa{position:absolute;}.none{display:none;}
    body{padding:100px;}
    
.addTips{ position:relative;}
.addTips .tipsBox{ position:absolute; top:30px; left:-10px; width:228px; padding:7px; border:1px solid #ffcc00; background:#fffff7; box-shadow:3px 3px 0px #eee; }
.addTips .tipsBox .closeTip{ float:right; font-size:16px; font-family:arirl; cursor: pointer; color:#f60; font-style:normal;}
.addTips .tipsBox p{ padding:3px; line-height: 16px;}
.addTips .tipsBox a{ color:#3974D6; text-decoration:underline;}
.addTips .tipsBox a:hover{color:red;}
.addTips .tipsBox .SA {position:absolute;left: 18px;top: -6px; _top:-7px;z-index:2;}
.tipsBox .SA em, .tipsBox .SA span {height: 7px;width: 18px;line-height: 21px;overflow: hidden;position: absolute; font-style:normal;}
.SA span{color:#FFFFF7;font-family:Simsun;font-size:16px;height:17px;width:8px;}
.SA em{color:#ffcc00;font-family:Simsun;font-size:21px;height:17px;width:8px;top:-2px;_top:0;left:-3px;}

</style>
  
  <li class="addTips">
    微博绑定
    
    
    <div class="tipsBox">
      <em class="closeTip" onClick="javascript:this.parentNode.style.display='none';" title="关闭">×</em>
      <p>爱易网网页特效演示中心，请访问<a href="http://js.aiyiweb.com">网页特效</a>。</p>
      <div class="SA">
      <em>◆</em><span>◆</span>
      </div>
    </div>
    
  </li>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

可点击关闭的纯代码无图版浮动tips提示特效代码

相关资料更多>

推荐阅读更多>