网站首页 | 公司简介 | 业务范围 | 案例展示 | 新闻资讯 | 留言反馈 | 联系我们 | 程序出售
 
 
★新闻资讯★
技术支持
行业动态
休闲娱乐
免费下载
帮助中心
解决方案
本站公告
★服务热线★
029-86122132
013572147337
013629241981
4008-168-029
★在线咨询★
【广告设计】
【网站建设】
【网站咨询】
【推广咨询】
【优化咨询】
【维护咨询】
【安全咨询】
【空间咨询】
【域名咨询】
【技术支持】
 
 >> 新闻资讯 >> 查看新闻信息  
网站开发中10个有用的CSS/JS (二)由新疆网站建设公司独家提供
【信息涉及侵权、违法、错误,请来电 029-86122132 013572147337 013629241981 4008-168-029】
 
2  排版技巧 
CommandShift3 ,使用一个有趣的打字技巧,为您已提交表决的网站显示表决结果。显然,这种效果仅使用的CSS 就能实现。 



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



HTML 

view plaincopy to clipboardprint? 
<div class="bar">    
    <div class="screen-left loser choice">    
    <div class="pct">    
        <div>46<span>%span>div>    
        div>    
        <div>    
            --the image goes here--     
        div>    
    div>    
    <div class="screen-right winner">    
    <div>    
        --the image goes here--     
    div>    
        <div class="pct">    
            <div>54<span>%span>div>    
        div>    
    div>    
    
    <div class="legend">    
        --You voted for text goes here--     
     div>    
div>   

     
     
        46% 
         
         
            --the image goes here-- 
         
     
     
     
        --the image goes here-- 
     
         
            54% 
         
     

     
         --You voted for text goes here-- 
      

CSS 

view plaincopy to clipboardprint? 
.result .pct {     
    float:left;     
    height:80px;     
    margin:0;     
    overflow:hidden;     
    padding:0;     
    white-space:nowrap;     
    width:95px;     
    }     
.result .screen-left .pct div {     
    margin:28px 0 0 10px;     
    float: left;     
    }     
.result .loser .pct div {     
    color:#84C3FF;     
    }     
.result .pct div span {     
    display:inline;     
    font-size:55px;     
    }     
.result .screen-right .pct div {     
    margin:28px 0 0 -8px;     
    float: left;     
    }     
.result-first .pct div {     
    color:#FFFFFF;     
    }   


 
  
 
 
 
信息分类:技术支持  信息来源:新疆网站建设 新疆网站建设 新疆伍佰网络有限公司  添加时间:2011-7-12 16:57:58  浏览次数:
上一组:网站开发中10个有用的CSS/JS (三) 由新疆 下一组:如何使广告软文更有效?广告联盟推广技巧由新疆网站建
版权所有© 西安四方科技有限公司 违者必究  客服热线:029-86122132 013572147337 013629241981 4008-168-029  传真号码:029-86122132
联系地址:陕西省西安市未央区龙翔御苑50101室 710016  E-mail:500web@21cn.com  中国工业和信息化部ICP备案号:陕ICP备06001415号
本站由四方科技(网站建设 软件开发 网站推广 域名注册 网站空间 广告与多媒体制作)提供技术支持