CSS를 사용하여 별점 만들기_경험 교환

먼저 효과를 살펴보겠습니다

1단계: XHTML

 
• 1
li> ;2

• 3
 
 
• 4

 
• 5

여기에서는 정적 기술만 소개되며, 그런 다음 시스템 적용이 제공됩니다. 프로그램을 직접 추가하여 사용해 볼 수도 있습니다. 또한 ajax를 사용하여 멋진 효과를 만들 수도 있습니다

2단계: 그래픽

공간과 대역폭을 절약하기 위해 채점 버튼인 gif 이미지를 사용합니다.

사진

3단계: CSS

.별점 평가{ 목록 스타일: none; /* 기본 목록 이미지 글머리 기호 끄기*/
margin: 3px; /*이 항목 주위에 공간을 두지 않습니다.*/
padding: 0px /* 저는 항문입니다. 확실히 OL의 기본 패딩은 0px이지만 안전을 위해 0px로 설정하겠습니다.*/
width: 100px /*이 목록은 별 5개이고 각 별은 20px이므로 5 x여야 합니다. 20px = 100px wide*/
height: 20px; /* 각 별의 높이는 20px입니다. 이는 가로 목록이므로 목록 높이를 별의 높이로 설정합니다.*/
위치: 상대적; /*매우 중요합니다. 나중에 절대 위치를 사용하겠습니다. 우리는 상대적 절대 위치를 사용하려고 합니다.*/
background: url(star_ating.gif) 왼쪽 위 반복-x /* 이 이미지를 가로로 반복합니다. , 목록에는 별 5개가 있는 것으로 나타납니다.*/
}

우리가 알고 있는 코드에 따르면:
는 ul과 목록의 여백과 안쪽 여백을 제거합니다. -style , 높이 20px, 너비 100px

블록이 내려올 때 버튼 요소 생성을 정의합니다. 다음은 CSS

.star-rated li{입니다. padding:0px; / * 패딩 없음*/
margin:0px; /* 여백 없음*/
/**/ /*백슬래시 해킹으로 인해 IE5 Mac에서는 이 규칙을 볼 수 없습니다.*/
float: left; 브라우저, 우리는 왼쪽으로 떠 있을 것입니다. 이것은 수평 목록을 만듭니다*/
/* */ /* IE5 백슬래시 해킹을 종료합니다*/
}

이 코드를 사용하면 li가 다음을 수행할 수 있습니다. 가로로 정렬하고 IE5 MAC 버그를 해결합니다

위의 버튼 요소 스타일을 상속받은 다음 마우스 동작을 정의합니다. 다음은 CSS

입니다. { display:block; /* 높이와 너비를 조정할 수 있는 블록 항목이 필요합니다.*/
width:20px /* 쉬운 항목이지만 너비가 동일하기를 원합니다. star width*/
height: 20px ; /* 너비와 동일*/
text-꾸밈: none; /* 링크에서 밑줄 제거*/
text-indent: -9000px; [url =http://www.php.cn/]이미지 대체 기술[/url]을 사용하여 화면에서 텍스트를 들여쓰기하면 더 이상 텍스트를 보고 싶지 않습니다.*/
z-index: 20 ; /*이제 */
위치: 절대; /*이제 상위 UL을 기준으로 각 별의 정확한 x 및 y 좌표를 제어할 수 있습니다*/
padding: 0px; *다시 한번 강조하지만 패딩은 필요하지 않습니다*/
background-image:none; /* 별표를 표시하지 않습니다*/
}

13. .star-rated li a :hover{
14. background: url(star_ating.gif) 왼쪽 하단 /*여기가 바로 마법입니다*/
15. z-index: 1 /*이 별을 하단으로 이동합니다. z-index 스택*/
16 . left: 0px; /*이 별을 UL 상위 항목의 측면에 맞게 왼쪽으로 이동합니다.*/
17. }

다음으로 별점 3개, 별 4개를 표시하는 방법을 고려해야 합니다. 원리는 무엇입니까? 배경 이미지를 계속해서 가로로 반복한 다음 a와 a:hover의 너비를 정의하여 선택한 항목을 구분합니다. 스타 스타.

다음은 CSS입니다

.star-rated a.one-star{
왼쪽: 0px;
}
. 별 등급 a.one-star:hover{
너비:20px;
}
.star-등급 a.two-stars{
왼쪽:20px;
}
. 별 등급 a.two-stars:hover{
너비: 40px;
}
.star-등급 a.세 별{
왼쪽: 40px;
}
. 별 등급 a.세 별:hover{
너비: 60px;
}
.star-등급 a.별 네 개{
왼쪽: 60px;
}
. 별 등급 a.four-stars:hover{
너비: 80px;
}
.star-rated a.five-stars{
왼쪽: 80px;
}
. star -rated a.five-stars:hover{
width: 100px;
}

이 시점에서 제작이 완료됩니다

첫번째 모델 별 반 개 상황과 초기 별 등급이 없는 상황을 무시하고 다음에는 이 문제를 해결해 보겠습니다.

1단계. 동작 확인

사진 1

동작 확인

2단계: XHTML

• 별.


• 1< ;/li>
  
• 2


• 3


• 4


• 5

그리고 첫 번째는 모델은 유사하지만 유일한 차이점은

현재 별 3.5/5개입니다.

초기값 정의

3단계: 별 이미지

첫 번째 별은 null 값이고 두 번째 별은 별 3개로 이미지를 만듭니다. star는 null 값입니다. 첫 번째는 선택할 값이고 세 번째는 실제 값입니다.

그림 2

4단계: CSS, 마법

.star-rated li.current -등급{
배경: url(star_ating.gif) 왼쪽 하단;
위치: 절대;
높이: 30px;
디스플레이: 블록;
텍스트 들여쓰기: -9000px;
z-index: 1;
}

컨테이너 ul의 상대적 위치를 상속받지 않기 위해 position:absolute는 각 별의 높이를 사용합니다. height:30px; 나머지는 텍스트를 숨기고 정렬을 정의합니다.

null 값 CSS

.star-rated{
…
배경: url(star_ating.gif) 왼쪽 상단 반복-x;
}

css 값 선택

.star-rated li a:hover{
background: url(star_ating.gif) left center;
…
}

물론 선택에 따라 초기값이 변경되는데 어떻게 변경하나요?

style = "너비:105px;">현재 별 3.5/5개.

이 코드를 읽고 나면 그 이유를 아실 거라고 믿습니다. 그럼 너비가 무엇인가요? ? 계산은 무엇입니까?

평균 등급|평균: 3.5
각 별 너비|각 별 너비: 30px;
너비 설정|너비 설정: 3.5 * 30 = 105픽셀

이 새로운 모델을 살펴보겠습니다
* 예 1: 150 x 30 별 등급 시스템
* 예 2: 125 x 25 별 등급 시스템
* 예 3: 25 x 125 세로 별 등급 시스템 시스템

PHP를 사용하여 구현합니다

첫 번째는 구현 원리입니다

이전보다 별점 획득 CSS I, II이지만 onclick을 식별할 수 있고 데이터가 기록되어 데이터베이스에 저장된 다음 계산을 위해 데이터베이스에서 데이터를 호출하면
현재 평균을 얻을 수 있음을 알 수 있습니다. 점수 - 현재 점수.

1. 데이터베이스를 생성하는 SQL은 다음과 같습니다

CREATE TABLE ratings(
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
total_votes INT NOT NULL,
total_value INT NOT NULL,
which_id INT NOT NULL,
which_table VARCHAR(255),
Used_ips LONGTEXT NULL
);

2. 매개변수 파일 참조

require("connectDB.php");
require("closeDB.php");
require( "tableName.php");
require("openDB.php");
?>

3. 투표 프로그램 표시 및 투표 데이터 프로그램 업데이트

$rated_posted=$_GET['vote'];//별 값으로 변수를 전달했습니다
$id =$_GET['id'];
$query=mysql_query("SELECT total_votes, total_value, Used_ips FROM $tableName WHERE id='".$id."' ")or die(" 오류: " .mysql_error( ));
$numbers=mysql_fetch_assoc($query);
$checkIP=unserialize($numbers['used_ips']);
$count=$numbers['total_votes'];/ /총 투표 수
$current_rated=$numbers['total_value'];//합계되어 저장된 총 평가 수
$sum=$ating_posted+$current_ating;// 현재 투표 값과 총 투표 값
$tense=($count==1) ? "vote" : "votes";//복수형 vote/vote
$voted=@mysql_fetch_assoc(@mysql_query("SELECT title FROM $tableName WHERE Used_ips LIKE '%".$_SERVER['REMOTE_ADDR']."%' AND id='$id' ")); //패턴 일치 ip:Bramus가 제안함! http://www.php.cn/ - 이 변수는 투표한 이전 IP 주소를 검색하여 true 또는 false를 반환합니다

if($voted){
echo "

".
"< ;ul class ="star-rated">".
"

".
"

1

".
"

2

".
"

3

".
"

4< ;/li> ;".
"

5

".
"".
"

평점: {".$count." ".$tense." 캐스트}
이전에 투표하셨습니다.

";//현재 숫자로 현재 투표 값 표시
}else{

if(isset($_GET['vote'])) {

if($sum==0){
$add=0;//첫 번째 투표가 집계되었는지 확인
}else{
$add=$count +1; //현재 투표 수 증가
}

if(is_array($checkIP)){
array_push($checkIP,$_SERVER['REMOTE_ADDR']);//if 배열입니다. 즉, 이미 다른 값을 입력한 항목이 있습니다
}else{
$checkIP=array($_SERVER['REMOTE_ADDR']);//첫 번째 항목에 대해
}

$ insert=serialize($checkIP);
mysql_query("UPDATE $tableName SET total_votes='".$add."', total_value='".$sum."', Used_ips='".$insert ."' WHERE id='".$_GET['id']."'");

echo "

평점: ".@ number_format($sum/$ added,2)." {".$ added." ".$tense." 캐스트} 투표해 주셔서 감사합니다!

";//업데이트된 투표 값 표시
}else{
?>

4. 방문객 평가 프로그램

 
  
  
  
 

방법 이 튜토리얼이 이해되셨나요?

• 현재 등급

    
• title="별점 5점 만점에 1점 평가" class="one-star">1

    
• 2

    
• 3

    
• 4

    
• 5

5.最新评分结果提示

echo "

평점: ".@number_format($sum/$count,2)." {".$count." ".$tense." 캐스트}

";//show 현재 업데이트된 투표 값
} // end isset get vote 
} //end voted true, false
?>