练习地址:http://www.fgm.cc/learn/lesson4/09.html
看了网页源代码,才知道什么叫“简洁的代码”。我写的太繁杂了!
亮起和熄灭的星星是通过改变背景图片的位置来实现的,背景图片从网页source那里下载。要解释的在注释里面写了。
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>星级评分系统</title>
<link rel="stylesheet" type="text/css" href="9_star.css">
</head>
<body>
<div id="container">
<!-- 本来想着div是在js里面创建的,但是每个div内容不一样,反正要写,内容还是在HTML比较好 -->
<span id="intro">点击星星就能打分</span>
<!-- info是鼠标hover时展示的信息 -->
<!-- largeTri和smallTri是为了创建对话框的三角形 -->
<div class="star"><div class="info"><div class="largeTri"><div class="smallTri"></div></div><span><strong>1</strong>分 很不满意<br></span>差得太离谱,与卖家描述的严重不符,非常不满</div></div>
<div class="star"><div class="info"><div class="largeTri"><div class="smallTri"></div></div><span><strong>2</strong>分 不满意<