有一种感觉叫虐心。。

  惶惶不安的心 

  明明很喜欢

  却要假装不在意

  很痛苦很痛苦

<style type="text/css">  body{font-size: 12px;font-family: Ariea 微软雅黑;}  *{margin:0;padding:0;}  #advertise{ 170px;height: 200px;border: 1px solid #000;position: absolute;bottom:0px;right:0px;}  #advertise h3{height:30px;border-bottom: 1px solid #eee;background: #eee;line-height: 30px;padding: 0 5px;}  #advertise h3 span{float:right;line-height: 30px;font-size: 16px;font-weight: normal;}  #advertise ul{list-style-type: ;margin:10px 25px 10px 25px;}  </style>

 <script type="text/javascript">  function putAd(){   //定义的a如果不用var则他会转化为全局变量    //ad.style.bottom="0px";  //ad.style.right="0px";//不靠谱

 //body.offsetWidth  //body.offsetHeight;    //body.clientWidth//通常只有documentElement才有clentwidth属性 同时也只有他才有scrollTop等属性    // var a=document.getElementById("advertise");    // var cw=document.documentElement.clientWidth;    // var ch=document.documentElement.clientHeight;

   // var ow=a.offsetWidth;    // var oh=a.offsetHeight;

   // a.style.left=cw-ow+"px";   // a.style.top=ch-oh+"px";   // a.style.position="absolute";

 var a=document.getElementById("advertise");    var cw=document.documentElement.clientWidth;    var ch=document.documentElement.clientHeight;

   var ow=a.offsetWidth;    var oh=a.offsetHeight; //不同的浏览器对scroll的支持不同 不识别的显示为0  所以一般用document。body.scrollTop+document.documentElement.scrollTop来代替下面的    a.style.left=cw-ow+document.documentElement.scrollLeft+"px";    a.style.top=ch-oh+document.documentElement.scrollTop+"px";    a.style.position="absolute";

} onload=function(){putAd();} onresize=function(){putAd();}  var timeout=null; onscroll=function(){

if(timeout!=null)  {clearTimeout(timeout);}  timeout=setTimeout(putAd,1000);}    </script>

 <script type="text/javascript"> //js中直接定义对象的方法  用{} var obj={name:'ssd',showinfo:function(){alert("自定义的对象而不是类");}}; //obj.showinfo();  </script> <style type="text/css"> .tabs{} .tabs .tab_menu{height:35px;list-style:none;color:#fff;}

.tabs .tab_menu .tab_menu_item{float: left; 80px;height: 35px;background: #000;text-align: center;line-height: 35px;border-right: 1px #fff solid;} .tabs .tab_menu .select{font-weight: bold;color:red;background: #ddd;font-size: 30px;} .tabs .tab_div div{display: none;} .tabs .tab_div .show{display: block; font-size: 30px;} #tabs{height: 400px; 350px;border:1px #ddd solid;} </style> <script type="text/javascript"> onload=function(){var tabs=document.getElementById("tabs"); //设置变量利于区域内查找 var lis=tabs.getElementsByTagName("li"); var divs=tabs.getElementsByTagName("div")[0].getElementsByTagName("div"); for(i=0;i<lis.length;i++){ //可以人工为某元素添加人工属性 这样可以长久的存储某些信息以备后面使用  lis[i].id=i;    lis[i].onclick=function(){

for(i=0;i<lis.length;i++){   lis[i].className="tab_menu_item";   divs[i].className="tab_div_item";  }  this.className="tab_menu_item select";divs[this.id].className="tab_div_item show";} } } </script><!-- 通用样式，对个页面用的组件，一般用class定义 --> <div id="tabs" class="tabs"> <ul class="tab_menu">  <li class="tab_menu_item select">tab1</li>  <li class="tab_menu_item">tab2</li>  <li class="tab_menu_item">tab3</li> </ul> <div class="tab_div">

<div class="tab_div_item show">tab1里面的内容 显示与此处 ①</div> <div class="tab_div_item">tab2里面的内容 显示与此处 ①</div> <div class="tab_div_item">tab3里面的内容 显示与此处 ①</div> </div> </div>

<div style="margin-top:300px;position:relative;"> <p>//body是唯一一个默认是使用相对定位的父元素，所以要相对摸一个模块显示要吧他放在要相对的子模块里面</p> <div style="200px;height:200px;border:1px solid #eee;position:absolute;top:200px;left:200px;"> <h3 style="height:30px;line-height:30px;background:#eee">浮动广告</h3> </div> </div>

<div id="advertise"> <h3>浮动广告 <span>x</span></h3> <ul>

 <li><a href="">武林秘籍</a></li>  <li><a href="">九阳神功</a></li>  <li><a href="">九阴真经</a></li>  <li><a href="">十八罗汉</a></li>  <li><a href="">九阳神功</a></li>  <li><a href="">九阴真经</a></li>  <li><a href="">十八罗汉</a></li>  <li><a href="">九阳神功</a></li>  <li><a href="">九阴真经</a></li>  <li><a href="">十八罗汉</a></li> </ul> </div>