带来一篇用CSS完成静态显现的五角星级效果
Table中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div更能体现样式和结构相分离，结构的重构性强。用纯css打造星级评分效果正在被愈来愈多地使用在收集RIA中，分离ajax等手艺，能够衬着出很杰出的视觉效果和很棒的用户体验，在这篇文章入手下手之前，人人能够先往cssheaven感觉一下。
比来因为项目必要，我在网上找了良多css星级评分的例子和申明，可是发明年夜多半都是翻译外洋的文章，并且注释得并非十分分明，以是我决意本人来做一个总结，也但愿可以给人人一些匡助。
起首用中文写一下这个效果的算法：
1.利用背景图片的地位切换来取得星级效果；
2.全部效果最关头的中央就是“三层实际”，全部效果分为三层――空分层、分数层和打分层，三层的结构均为absolute，以免ul自己自带的绝对结构（固然用div也能够取得一样效果）；
3.空分层就是利用背景图片中的“空星”作为背景，并横向平展；
4.分数层的宽度即是（分数*图片宽度）失掉的数值，而且利用背景图片中的“分数星（例子中为黄色）”作为背景横向平展；
5.打分层就是将5个空链接置于5个星星的地位上（宽度要和背景图片符合），并将5个a：hover的背景设为“打分星（这里为绿色）”，宽度设为星数*图片宽度，left为0(靠左，如许分离a：hover分歧的宽度就能够呈现打分效果)，垂直坐标小于a的垂直坐标（以确保以后a：hover不会遮盖住其他链接）；
大概下面这段笔墨你看得有些生涩，没有干系，让我们分离css代码来看看办理举措
<ulclass="star-rating">
<liclass="current-rating">Currently3.5/5Stars.</li>
<li><ahref="#"title="1staroutof5"class="one-star">1</a></li>
<li><ahref="#"title="2starsoutof5"class="two-stars">2</a></li>
<li><ahref="#"title="3starsoutof5"class="three-stars">3</a></li>
<li><ahref="#"title="4starsoutof5"class="four-stars">4</a></li>
<li><ahref="#"title="5starsoutof5"class="five-stars">5</a></li>
</ul>
<style>
.star-rating{/*这里是空分层，用来显现空星星*/
list-style:none;
margin:0px;
padding:0px;
width:150px;
height:30px;
position:relative;
background:url(star_rating2.gif)topleftrepeat-x;/*空星星位于背景图片的顶层，将其设为背景并横向平展*/
}
.star-ratingli{/*设置li的浮动属性*/
padding:0px;
margin:0px;
/**/
float:left;
/**/
}
.star-ratinglia{/*设置a的结构为相对结构和垂直坐标并埋没a中文本使其成为空链接*/
display:block;
width:30px;
height:30px;
text-decoration:none;
text-indent:-9000px;
z-index:20;
position:absolute;
padding:0px;
}
.star-ratinglia:hover{/*设置a:hover的背景图片为打分星/垂直坐标/left为0,注重垂直坐标必定要小于a的垂直坐标*/
background:url(star_rating2.gif)leftcenter;
z-index:2;
left:0px;
}
/*以下5个class用来设置5个链接的地位和hover的宽度*/
.star-ratinga.one-star{
left:0px;
}
.star-ratinga.one-star:hover{
width:30px;
}
.star-ratinga.two-stars{
left:30px;
}
.star-ratinga.two-stars:hover{
width:60px;
}
.star-ratinga.three-stars{
left:60px;
}
.star-ratinga.three-stars:hover{
width:90px;
}
.star-ratinga.four-stars{
left:90px;
}
.star-ratinga.four-stars:hover{
width:120px;
}
.star-ratinga.five-stars{
left:120px;
}
.star-ratinga.five-stars:hover{
width:150px;
}
.star-ratingli.current-rating{/*设置分数层的背景和宽度并埋没文本*/
background:url(star_rating2.gif)leftbottom;
position:absolute;
height:30px;
width:105px;
display:block;
text-indent:-9000px;
z-index:1;
}
</style>
看完这些，我信任你应当分明了个中的道理了吧，假如仍是不分明能够给我留言，也许仍是我的文章写得不敷好：）
<ulclass="star-rating"><liclass="current-rating">Currently3.5/5Stars.</li><li><ahref="#"title="1staroutof5"class="one-star">1</a></li><li><ahref="#"title="2starsoutof5"class="two-stars">2</a></li><li><ahref="#"title="3starsoutof5"class="three-stars">3</a></li><li><ahref="#"title="4starsoutof5"class="four-stars">4</a></li><li><ahref="#"title="5starsoutof5"class="five-stars">5</a></li></ul><style>.star-rating{list-style:none;margin:0px;padding:0px;width:150px;height:30px;position:relative;background:url(/imagelist/06/41/3igk1wwm6o16.gif)topleftrepeat-x;}.star-ratingli{padding:0px;margin:0px;/**/float:left;/**/}.star-ratinglia{display:block;width:30px;height:30px;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding:0px;}.star-ratinglia:hover{background:url(/imagelist/06/41/3igk1wwm6o16.gif)leftcenter;z-index:2;left:0px;}.star-ratinga.one-star{left:0px;}.star-ratinga.one-star:hover{width:30px;}.star-ratinga.two-stars{left:30px;}.star-ratinga.two-stars:hover{width:60px;}.star-ratinga.three-stars{left:60px;}.star-ratinga.three-stars:hover{
12下一页
如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。
带来一篇用CSS完成静态显现的五角星级效果
属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。width:90px;}.star-ratinga.four-stars{left:90px;}.star-ratinga.four-stars:hover{width:120px;}.star-ratinga.five-stars{left:120px;}.star-ratinga.five-stars:hover{width:150px;}.star-ratingli.current-rating{background:url(/imagelist/06/41/3igk1wwm6o16.gif)leftbottom;position:absolute;height:30px;width:105px;display:block;text-indent:-9000px;z-index:1;}</style></p>
</p>上一页12
最新版本html5+css3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. 每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人. 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
页:
[1]