热门关键字：
jquery > jquery教程 > div+css > 滑动门真正的魅力之tips小提示

滑动门真正的魅力之tips小提示

3055
作者：管理员
发布时间：2012/7/25 22:39:45
评论数：0
转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=11

 

滑动门真正的魅力之——tips小提示

样式代码如下：
  1. .tips{position:relative; height:300px;}   
  2. .tips-box-b{position:absolute; font-size:12px; color:#666; background:url(tipsbg.png) right top no-repeat; height:26px; padding-right:6px;}   
  3. .tips-box-b .tips-content{background:url(tipsbg.png) left top no-repeat; height:26px; float:left; line-height:20px; padding-left:6px;}   
  4. .tips-box-t{position:absolute; font-size:12px; color:#666; background:url(tipsbg.png) right -28px no-repeat; height:27px; padding-right:6px;}   
  5. .tips-box-t .tips-content{background:url(tipsbg.png) left -28px no-repeat; height:20px; float:left; padding-top:6px; line-height:20px; padding-left:6px;}   
  6. .tips-box-l{position:absolute; font-size:12px; color:#666; height:21px;}   
  7. .tips-box-l span{background:url(tipsbg.png) left -58px; float:left; height:21px; width:10px;}   
  8. .tips-box-l .tips-content{background:url(tipsbg.png) right -58px; height:21px; line-height:20px; padding-right:6px; float:left;}   
  9. .tips-box-r{position:absolute; font-size:12px; color:#666; height:21px;}   
  10. .tips-box-r span{background:url(tipsbg.png) right -83px; right:-10px; position:absolute; height:21px; width:10px;}   
  11. .tips-box-r .tips-content{background:url(tipsbg.png) left -83px; height:21px; line-height:20px; padding-left:6px; float:left;}  
 
HTML代码如下：
  1. <div class="tips">  
  2.   <div class="tips-box-b" style="top:50px;"> <span></span>  
  3.     <div class="tips-content">漫画</div>  
  4.   </div>  
  5.   <div class="tips-box-t" style="top:100px;"> <span></span>  
  6.     <div class="tips-content">网友插件分享</div>  
  7.   </div>  
  8.   <div class="tips-box-l" style="top:150px;"> <span></span>  
  9.     <div class="tips-content">漫画原创插件分享</div>  
  10.   </div>  
  11.   <div class="tips-box-r" style="top:200px;"> <span></span>  
  12.     <div class="tips-content">漫画原创插件分享</div>  
  13.   </div>  
  14. </div>  
 
背景如下：
 
效果如下：




如果您觉得本文的内容对您的学习有所帮助：支付鼓励



关键字：滑动门真正的魅力之tips小提示
友荐云推荐