css活用，半星星的效果

標籤：span   asc   com   center   sde   ati   height   idt   ebs   

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;width: 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;width: 50%;            content: attr(data-content);overflow: hidden;color: #F63;        }        .sF1 span:before{width: 70%;}        .sF2 span:before{width: 50%;}        .sF3 span:before{width: 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>

 

css活用，半星星的效果