源代码源代码
我不会
2018-07-24 22:28
请问这个教程有源代码吗？
2回答
-
- 慕移动9181930
- 2022-03-24 04:21:46
-
- ZMXZALXT
- 2018-08-12 12:28:02
每段视频的方法代码不一样吧。这是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>
星级评分原理和实现（下）
12756 学习 · 23 问题
相似问题