慧云科技 > 首页 > 文章详情

网站开发中10个有用的CSS/JS (二)

本文来源:网站建设-网站制作|网络营销专家慧云科技-

抢滩登陆

2009-7-8 17:54:13

2  排版技巧
CommandShift3 ,使用一个有趣的打字技巧,为您已提交表决的网站显示表决结果。显然,这种效果仅使用的CSS 就能实现。

具体方法
每个结果行包含“胜率”+截图以及“失去的百分比” , +截图。每个百分比块的宽略小于以显示其全文需要的宽度。此外,这个CSS属性溢出:隐藏用于隐藏的内容没有必要。
    这是 “胜率”所必需的所有的代码。在“失去的百分比”得到相同的代码,增加了负面利润率使其失去网站的缩图后出现下滑。

HTML

  1. <div class="bar">  
  2.     <div class="screen-left loser choice">  
  3.     <div class="pct">  
  4.         <div>46<span>%span>div>  
  5.         div>  
  6.         <div>  
  7.             --the image goes here--   
  8.         div>  
  9.     div>  
  10.     <div class="screen-right winner">  
  11.     <div>  
  12.         --the image goes here--   
  13.     div>  
  14.         <div class="pct">  
  15.             <div>54<span>%span>div>  
  16.         div>  
  17.     div>  
  18.   
  19.     <div class="legend">  
  20.         --You voted for text goes here--   
  21.      div>  
  22. div>  

CSS

  1. .result .pct {   
  2.     float:left;   
  3.     height:80px;   
  4.     margin:0;   
  5.     overflow:hidden;   
  6.     padding:0;   
  7.     white-space:nowrap;   
  8.     width:95px;   
  9.     }   
  10. .result .screen-left .pct div {   
  11.     margin:28px 0 0 10px;   
  12.     floatleft;   
  13.     }   
  14. .result .loser .pct div {   
  15.     color:#84C3FF;   
  16.     }   
  17. .result .pct div span {   
  18.     display:inline;   
  19.     font-size:55px;   
  20.     }   
  21. .result .screen-right .pct div {   
  22.     margin:28px 0 0 -8px;   
  23.     floatleft;   
  24.     }   
  25. .result-first .pct div {   
  26.     color:#FFFFFF;   
  27.     }  

本文国际来源


RSS订阅| 关于我们| 网站地图| 加入项目| 法律条款| 友情链接| Firefox| Sitemap| 网站统计

全国免费咨询热线:400-600-6495 优惠活动咨询电话:021-62278496 Email:ajaxcms@yahoo.cn

上海慧云信息科技有限公司版权所有 2006-2009 沪ICP备09038165号

本站关键词:网站建设 高品质网站建设