zoukankan      html  css  js  c++  java
  • css活用,半星星的效果

    1、首先下载要用到星星字体

    http://www.w3cplus.com/w3cplusDemo/demos/webFontIcon.html
    

    2、css

     .cleanfloat::after{display: block; clear: both; content:""; visibility: hidden; height: 0;}
            *{margin:0; padding:0;}
    
            /*字体路径按照你的路径去修改*/
             @font-face {
                font-family: 'AlluraRegular';
                src: url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.eot'),
                     url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont?#iefix') format('embedded-opentype'), 
                     url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.woff') format('woff'),
                     url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.ttf') format('truetype'),
                     url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.svg#AlluraRegular') format('svg');
            }
            .starFive span {display: block;float: left;font-size: 25px; font-family: 'AlluraRegular';
                text-align: center;color: #888; 27px;height: 33px;line-height: 33px;
                margin-right: 5px;position: relative;overflow: hidden;white-space: pre;
             }
            .starFive span:before {position: absolute;
                left: 0;top: 0;display: block; 50%;
                content: attr(data-content);overflow: hidden;color: #F63;
            }
            .sF1 span:before{ 70%;}
            .sF2 span:before{ 50%;}
            .sF3 span:before{ 40%;}
            .starFive .org_star {color: #F63;}
            .starFive b {font-weight: normal; line-height: 40px;
                font-size: 25px;color: #888;margin-left: 10px;
            }
    

    3、HTML

    <div>
          <p class='cleanfloat starFive sF1'><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><b>4.7分</b></p>
          <p class='cleanfloat starFive sF2'><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><span>R</span><b>3.5分</b></p>
          <p class='cleanfloat starFive sF3'><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><span>R</span><span>R</span><b>2.4分</b></p>
     </div>
    
  • 相关阅读:
    JavaScript数据类型和变量学习小记
    如何在windows下安装Python的PIL库
    maoguy的第一条博客
    Ⅲ. 通过git管理github上托管的代码
    Ⅱ. Git的本地操作--下(不会使github远程仓库发生任何改变)
    Ⅰ. Git的本地操作--上(不会使github远程仓库发生任何改变)
    Linux下Vi/Vim编辑器使用案例(基于Ubuntu)
    Selenium+python上传本地文件或者图片
    Selenium+python操作id为动态变化的frame(iframe)
    Quick-cocos2d-x v3.3 SocketTCP链接(转)
  • 原文地址:https://www.cnblogs.com/huangqiming/p/7279921.html
Copyright © 2011-2022 走看看