課程
/前端開發
/HTML/CSS
/星級評分原理和實現（下）
請問這個教程有源代碼嗎？
2018-07-24
源自：星級評分原理和實現（下） 3-3
正在回答
講的非常精煉，是個好老師！可以先看一下“搭建可靠的mongoDB集群”
每段視頻的方法代碼不一樣吧。這是2-4的
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<meta http-equiv="X-UA-Compatible" content="ie=edge">
? ?<title>星級評分-第四種實現方式</title>
? ?<style>
? ? ? ?.rating{
? ? ? ? ? ?position: relative;
? ? ? ? ? ?width: 580px;
? ? ? ? ? ?height: 116px;
? ? ? ? ? ?background: url(images/rating.png) repeat-x;
? ? ? ? ? ?margin: 100px auto;
? ? ? ? ? ?overflow: hidden;
? ? ? ?}
? ? ? ?/* 父容器鼠標劃過時，下面的a標簽的樣式 */
? ? ? ?.rating:hover .rating-item{
? ? ? ? ? ?background-image: none;
? ? ? ?/* class以及偽類多的css樣式優先級比后面class以及偽類少的css樣式優先級高 */
? ? ? ?.rating-item:hover{
? ? ? ? ? ?background-image: url(images/rating.png) repeat-x 0 -116px !important;
? ? ? ?.rating input{
? ? ? ? ? ?position: absolute;
? ? ? ? ? ?left: 0;
? ? ? ? ? ?top: -30px;
? ? ? ?.rating-item{
? ? ? ? ? ?top: 0;
? ? ? ? ? ?z-index: 3;
? ? ? ? ? ?width: 116px;
? ? ? ?.rating-item-1{
? ? ? ?.rating-item-2{
? ? ? ? ? ?left: 116px;
? ? ? ?.rating-item-3{
? ? ? ? ? ?left: 232px;
? ? ? ?.rating-item-4{
? ? ? ? ? ?left: 348px;
? ? ? ?.rating-item-5{
? ? ? ? ? ?left: 464px;
? ? ? ? ? ?z-index: 2;
? ? ? ? ? ?background: url(images/rating.png) repeat-x -2px -116px;
? ? ? ?input:checked + .rating-item{
? ? ? ? ? ?z-index: 1;
? ? ? ?input:checked .rating-item ~ .rating-item:hover{
? ? ? ? ? ?z-index: 0;
? ? ? ?.rating-item-1:hover,.rating-1:checked + .rating-item{
? ? ? ?.rating-item-2:hover,.rating-2:checked + .rating-item{
? ? ? ? ? ?width: 232px;
? ? ? ?.rating-item-3:hover,.rating-3:checked + .rating-item{
? ? ? ? ? ?width: 348px;
? ? ? ?.rating-item-4:hover,.rating-4:checked + .rating-item{
? ? ? ? ? ?width: 464px;
? ? ? ?.rating-item-5:hover,.rating-5:checked + .rating-item{
? ? ? ?.rating-item label{
? ? ? ? ? ?display: inline-block;
? ? ? ? ? ?/* 寬高完全取決于父容器 */
? ? ? ? ? ?width: 100%;
? ? ? ? ? ?height: 100%;
? ? ? ? ? ?cursor:pointer;
? ?</style>
</head>
<body>
? ?<form action="">
? ? ? ?<div class="rating">
? ?
? ? ? ? ? ?<input type="radio" name="rating" id="rating-1" value="1">
? ? ? ? ? ?<a href="#" class="rating-item rating-item-1" title="很不好"><label for="rating-1"></label></a>
? ? ? ? ? ?<input type="radio" name="rating" id="rating-2" value="2">
? ? ? ? ? ?<a href="#" class="rating-item rating-item-2" title="不好"><label for="rating-2"></label></a>
? ? ? ? ? ?<input type="radio" name="rating" id="rating-3" value="3">
? ? ? ? ? ?<a href="#" class="rating-item rating-item-3" title="一般"><label for="rating-3"></label></a>
? ? ? ? ? ?<input type="radio" name="rating" id="rating-4" value="4">
? ? ? ? ? ?<a href="#" class="rating-item rating-item-4" title="好"><label for="rating-4"></label></a>
? ? ? ? ? ?<input type="radio" name="rating" id="rating-5" value="5">
? ? ? ? ? ?<a href="#" class="rating-item rating-item-5" title="非常好"><label for="rating-5"></label></a>
? ? ? ? ? ?
? ? ? ?</div>
? ? ? ?<input type="button" value="submit">
? ?</form>
</body>
</html>
舉報
本課程主要講解如何使用不同的方式來實現星級評分的效果。
1 回答星星評價源碼可以分享嗎？？？
1 回答就我一個人看著代碼心塞嗎？
1 回答能不能把代碼貼出來，以方便學習？
1 回答只能定位一次怎么辦，并不像老師那樣點擊第幾顆就定位第幾顆，感覺代碼也沒什么問題呀
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2022-03-24
講的非常精煉，是個好老師！可以先看一下“搭建可靠的mongoDB集群”
2018-08-12
每段視頻的方法代碼不一樣吧。這是2-4的
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<meta http-equiv="X-UA-Compatible" content="ie=edge">
? ?<title>星級評分-第四種實現方式</title>
? ?<style>
? ? ? ?.rating{
? ? ? ? ? ?position: relative;
? ? ? ? ? ?width: 580px;
? ? ? ? ? ?height: 116px;
? ? ? ? ? ?background: url(images/rating.png) repeat-x;
? ? ? ? ? ?margin: 100px auto;
? ? ? ? ? ?overflow: hidden;
? ? ? ?}
? ? ? ?/* 父容器鼠標劃過時，下面的a標簽的樣式 */
? ? ? ?.rating:hover .rating-item{
? ? ? ? ? ?background-image: none;
? ? ? ?}
? ? ? ?/* class以及偽類多的css樣式優先級比后面class以及偽類少的css樣式優先級高 */
? ? ? ?.rating-item:hover{
? ? ? ? ? ?background-image: url(images/rating.png) repeat-x 0 -116px !important;
? ? ? ?}
? ? ? ?.rating input{
? ? ? ? ? ?position: absolute;
? ? ? ? ? ?left: 0;
? ? ? ? ? ?top: -30px;
? ? ? ?}
? ? ? ?.rating-item{
? ? ? ? ? ?position: absolute;
? ? ? ? ? ?top: 0;
? ? ? ? ? ?z-index: 3;
? ? ? ? ? ?width: 116px;
? ? ? ? ? ?height: 116px;
? ? ? ?}
? ? ? ?.rating-item-1{
? ? ? ? ? ?left: 0;
? ? ? ?}
? ? ? ?.rating-item-2{
? ? ? ? ? ?left: 116px;
? ? ? ?}
? ? ? ?.rating-item-3{
? ? ? ? ? ?left: 232px;
? ? ? ?}
? ? ? ?.rating-item-4{
? ? ? ? ? ?left: 348px;
? ? ? ?}
? ? ? ?.rating-item-5{
? ? ? ? ? ?left: 464px;
? ? ? ?}
? ? ? ?.rating-item:hover{
? ? ? ? ? ?left: 0;
? ? ? ? ? ?z-index: 2;
? ? ? ? ? ?background: url(images/rating.png) repeat-x -2px -116px;
? ? ? ?}
? ? ? ?input:checked + .rating-item{
? ? ? ? ? ?left: 0;
? ? ? ? ? ?z-index: 1;
? ? ? ? ? ?background: url(images/rating.png) repeat-x -2px -116px;
? ? ? ?}
? ? ? ?input:checked .rating-item ~ .rating-item:hover{
? ? ? ? ? ?z-index: 0;
? ? ? ?}
? ? ? ?.rating-item-1:hover,.rating-1:checked + .rating-item{
? ? ? ? ? ?width: 116px;
? ? ? ?}
? ? ? ?.rating-item-2:hover,.rating-2:checked + .rating-item{
? ? ? ? ? ?width: 232px;
? ? ? ?}
? ? ? ?.rating-item-3:hover,.rating-3:checked + .rating-item{
? ? ? ? ? ?width: 348px;
? ? ? ?}
? ? ? ?.rating-item-4:hover,.rating-4:checked + .rating-item{
? ? ? ? ? ?width: 464px;
? ? ? ?}
? ? ? ?.rating-item-5:hover,.rating-5:checked + .rating-item{
? ? ? ? ? ?width: 580px;
? ? ? ?}
? ? ? ?.rating-item label{
? ? ? ? ? ?display: inline-block;
? ? ? ? ? ?/* 寬高完全取決于父容器 */
? ? ? ? ? ?width: 100%;
? ? ? ? ? ?height: 100%;
? ? ? ? ? ?cursor:pointer;
? ? ? ?}
? ?</style>
</head>
<body>
? ?<form action="">
? ? ? ?<div class="rating">
? ?
? ? ? ? ? ?<input type="radio" name="rating" id="rating-1" value="1">
? ? ? ? ? ?<a href="#" class="rating-item rating-item-1" title="很不好"><label for="rating-1"></label></a>
? ?
? ? ? ? ? ?<input type="radio" name="rating" id="rating-2" value="2">
? ? ? ? ? ?<a href="#" class="rating-item rating-item-2" title="不好"><label for="rating-2"></label></a>
? ?
? ? ? ? ? ?<input type="radio" name="rating" id="rating-3" value="3">
? ? ? ? ? ?<a href="#" class="rating-item rating-item-3" title="一般"><label for="rating-3"></label></a>
? ?
? ? ? ? ? ?<input type="radio" name="rating" id="rating-4" value="4">
? ? ? ? ? ?<a href="#" class="rating-item rating-item-4" title="好"><label for="rating-4"></label></a>
? ?
? ? ? ? ? ?<input type="radio" name="rating" id="rating-5" value="5">
? ? ? ? ? ?<a href="#" class="rating-item rating-item-5" title="非常好"><label for="rating-5"></label></a>
? ? ? ? ? ?
? ? ? ?</div>
? ? ? ?<input type="button" value="submit">
? ?</form>
</body>
</html>