388棋牌官网首页JS写的贪吃蛇游戏(个人锻炼)

JS贪吃蛇游戏,个人磨练之用,放在那备份一下,
388棋牌官网首页 1 

效果图如下:
388棋牌官网首页 2
页面代码:

复制代码 代码如下:

复制代码 代码如下:

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>JS贪吃蛇-练习</title>
<style type=”text/css”>
#pannel table {
border-collapse: collapse;
}
#pannel table td {
border: 1px solid #808080;
width: 10px;
height: 10px;
font-size: 0;
line-height: 0;
overflow: hidden;
}
#pannel table .snake {
background-color: green;
}
#pannel table .food {
background-color: blue;
}
</style>
<script type=”text/javascript”>
var Direction = new function () {
this.UP = 38;
this.RIGHT = 39;
this.DOWN = 40;
this.LEFT = 37;
};
var Common = new function () {
this.width = 20; /*水平方向方格数*/
this.height = 20; /*笔直方向方格数*/
this.speed = 250; /*进度 值越小越快*/
this.workThread = null;
};
var Main = new function () {
var control = new Control();
window.onload = function () {
control.Init(“pannel”);
/*伊始按钮*/
document.getElementById(“btnStart”).onclick = function () {
control.Start();
this.disabled = true;
document.getElementById(“selSpeed”).disabled = true;
document.getElementById(“selSize”).disabled = true;
};
/*调速度按钮*/
document.getElementById(“selSpeed”).onchange = function () {
Common.speed = this.value;
}
/*调大小按钮*/
document.getElementById(“selSize”).onchange = function () {
Common.width = this.value;
Common.height = this.value;
control.Init(“pannel”);
}
};
};
/*控制器*/
function Control() {
this.snake = new Snake();
this.food = new Food();
/*伊始化函数,创设表格*/
this.Init = function (pid) {
var html = [];
html.push(“<table>”);
for (var y = 0; y < Common.height; y++) {
html.push(“<tr>”);
for (var x = 0; x < Common.width; x++) {
html.push(‘<td id=”box_’ + x + “_” + y + ‘”> </td>’);
}
html.push(“</tr>”);
}
html.push(“</table>”);
this.pannel = document.getElementById(pid);
this.pannel.innerHTML = html.join(“”);
};
/*始发游戏 – 监听键盘、创立食物、刷新界面线程*/
this.Start = function () {
var me = this;
this.MoveSnake = function (ev) {
var evt = window.event || ev;
me.snake.SetDir(evt.keyCode);
};
try {
document.attachEvent(“onkeydown”, this.MoveSnake);
} catch (e) {
document.addEventListener(“keydown”, this.MoveSnake, false);
}
this.food.Create();
Common.workThread = setInterval(function () {
me.snake.Eat(me.food); me.snake.Move();
}, Common.speed);
};
}
/*蛇*/
function Snake() {
this.isDone = false;
this.dir = Direction.RIGHT;
this.pos = new Array(new Position());
/*移步 – 擦除尾部,向前移动,判断游戏停止(咬到温馨仍旧移出边界)*/
this.Move = function () {
document.getElementById(“box_” + this.pos[0].X + “_” +
this.pos[0].Y).className = “”;
//所有 向前挪动一步
for (var i = 0; i < this.pos.length – 1; i++) {
this.pos[i].X = this.pos[i + 1].X;
this.pos[i].Y = this.pos[i + 1].Y;
}
//重新设置头的岗位
var head = this.pos[this.pos.length – 1];
switch (this.dir) {
case Direction.UP:
head.Y–;
break;
case Direction.RIGHT:
head.X++;
break;
case Direction.DOWN:
head.Y++;
break;
case Direction.LEFT:
head.X–;
break;
}
this.pos[this.pos.length – 1] = head;
//遍历画蛇,同时判断游戏截止
for (var i = 0; i < this.pos.length; i++) {
var isExits = false;
for (var j = i + 1; j < this.pos.length; j++)
if (this.pos[j].X == this.pos[i].X && this.pos[j].Y ==
this.pos[i].Y) {
isExits = true;
break;
}
if (isExits) { this.Over();/*咬自己*/ break; }
var obj = document.getElementById(“box_” + this.pos[i].X + “_” +
this.pos[i].Y);
if (obj) obj.className = “snake”; else { this.Over();/*移出边界*/
break; }
}
this.isDone = true;
};
/*娱乐截止*/
this.Over = function () {
clearInterval(Common.workThread);
alert(“游戏停止!”);
}
/*吃食物*/
this.Eat = function (food) {
var head = this.pos[this.pos.length – 1];
var isEat = false;
switch (this.dir) {
case Direction.UP:
if (head.X == food.pos.X && head.Y == food.pos.Y + 1) isEat = true;
break;
case Direction.RIGHT:
if (head.Y == food.pos.Y && head.X == food.pos.X – 1) isEat = true;
break;
case Direction.DOWN:
if (head.X == food.pos.X && head.Y == food.pos.Y – 1) isEat = true;
break;
case Direction.LEFT:
if (head.Y == food.pos.Y && head.X == food.pos.X + 1) isEat = true;
break;
388棋牌官网首页,}
if (isEat) {
this.pos[this.pos.length] = new Position(food.pos.X, food.pos.Y);
food.Create(this.pos);
}
};
/*决定移动方向*/
this.SetDir = function (dir) {
switch (dir) {
case Direction.UP:
if (this.isDone && this.dir != Direction.DOWN) { this.dir = dir;
this.isDone = false; }
break;
case Direction.RIGHT:
if (this.isDone && this.dir != Direction.LEFT) { this.dir = dir;
this.isDone = false; }
break;
case Direction.DOWN:
if (this.isDone && this.dir != Direction.UP) { this.dir = dir;
this.isDone = false; }
break;
case Direction.LEFT:
if (this.isDone && this.dir != Direction.RIGHT) { this.dir = dir;
this.isDone = false; }
break;
}
};
}
/*食物*/
function Food() {
this.pos = new Position();
/*创办食物 – 随机地方创造立*/
this.Create = function (pos) {
document.getElementById(“box_” + this.pos.X + “_” +
this.pos.Y).className = “”;
var x = 0, y = 0, isCover = false;
/*排除蛇的职位*/
do {
x = parseInt(Math.random() * (Common.width – 1));
y = parseInt(Math.random() * (Common.height – 1));
isCover = false;
if (pos instanceof Array) {
for (var i = 0; i < pos.length; i++) {
if (x == pos[i].X && y == pos[i].Y) {
isCover = true;
break;
}
}
}
} while (isCover);
this.pos = new Position(x, y);
document.getElementById(“box_” + x + “_” + y).className = “food”;
};
}
function Position(x, y) {
this.X = 0;
this.Y = 0;
if (arguments.length >= 1) this.X = x;
if (arguments.length >= 2) this.Y = y;
}
</script>
</head>
<body>
<div id=”pannel” style=”margin-bottom: 10px;”></div>
<select id=”selSize”>
<option value=”20″>20*20</option>
<option value=”30″>30*30</option>
<option value=”40″>40*40</option>
</select>
<select id=”selSpeed”>
<option value=”500″>速度-慢</option>
<option value=”250″ selected=”selected”>速度-中</option>
<option value=”100″>速度-快</option>
</select>
<input type=”button” id=”btnStart” value=”开始” />
</body>
</html>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns=”http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>百度有啊通栏显示效果</title>
<style type=”text/css”>
body,div,dl,dt,dd,ul,li,h3{margin:0;padding:0;}
body{color:#333;font:12px/1.5 arial;}
li{list-style:none;}
a:link,a:visited,a:active{color:#333;text-decoration:none;}
a:hover{color:#F30;}
img{border:none;}
#box{width:740px;margin:10px auto;}
#container{position:relative;height:232px;background:#FCFCFC;}
#container
.item{position:absolute;top:0;left:0;width:492px;height:230px;overflow:hidden;background:#FAFAFA;border:1px
solid #ddd;z-index:1;opacity:1;}
#container .item
.pic{float:left;width:210px;height:200px;display:inline;margin:15px;}
#container .item .pic
img{width:210px;height:200px;vertical-align:top;}
#container .item .txt{float:left;width:250px;margin-top:12px;}
#container .item .txt dt{font-size:14px;font-weight:700;}
#container .item .txt .info{color:#999;}
#container .item .txt dd{height:24px;line-height:24px;}
#container .item .txt dd span{float:left;}
#container .item .txt
.star{position:relative;float:left;height:12px;width:69px;margin:6px 0 0
5px;}
#container .item .txt .star
.star_red{position:absolute;top:0;left:0;height:12px;width:69px;z-index:2;backgroundnull:url(http://js.fgm.cc/learn/lesson10/img/youa/star.png)
repeat-x scroll left top transparent;}
#container .item .txt .star
.star_grey{backgroundnull:url(http://js.fgm.cc/learn/lesson10/img/youa/star.png)
repeat-x scroll left -15px transparent;height:12px;width:69px;}
#container .item .txt .pink,#container .item .txt .blue,#container
.item .txt
.green{color:#FFF;font-weight:700;margin-right:2px;background:#F66B5B;padding:0
5px;}
#container .item .txt .blue{background:#96BAE7;}
#container .item .txt .green{background:#9CDBC3;}
#container .item .txt
.comment{width:232px;height:99px;margin-top:10px;background:#FFF;border:1px
solid #EAEAEA;}
#container .item .txt .comment
h3{font-size:12px;font-weight:400;height:24px;line-height:24px;border-bottom:1px
solid #E9E9E9;padding:0 10px;}
#container .item .txt .comment
.comment_list{width:220px;height:60px;overflow:hidden;margin:8px 0 0
10px;}
#container .item .txt .comment .comment_list ul{width:220px;}
#container .item .txt .comment .comment_list ul
li{height:20px;line-height:20px;white-space:nowrap;}
#container .item .txt .comment .comment_list ul li
b{color:#999;font-weight:400;}
#control{height:37px;text-align:center;backgroundnull:url(http://js.fgm.cc/learn/lesson10/img/youa/bg.png)
no-repeat;}
#control
span{width:8px;height:8px;font-size:0;line-height:0;cursor:pointer;display:inline-block;background-color:#FEFEFE;border:1px
solid #BCC1C5;margin:13px 2px 2px;}
#control span.active{background-color:#848484;border:1px solid
#6E6E6E;}
</style>
<script type=”text/javascript”>
function Youa (obj)
{
this.obj = $(obj);
this.container = $(“container”);
this.control = $(“control”);
this.items = $$$(“item”, this.container);
this.iCenter = 2;
this.aSort = [];
this.timer = null;
this.oData = [
{left:0, zIndex:2, opacity:30},
{left:40, zIndex:3, opacity:60},
{left:124, zIndex:4, opacity:100},
{left:208, zIndex:3, opacity:60},
{left:246, zIndex:2, opacity:30},
{left:40, zIndex:0, opacity:0}
];
this.__create__()
};
Youa.prototype.__create__ = function ()
{
var that = this;
var oSpan = null;
var i = 0;
for (i = 0; i < that.items.length; i++)
{
that.items[i].number = i;
that.aSort[i] = that.items[i];
oSpan = document.createElement(“span”);
oSpan.number = i;
that.control.appendChild(oSpan)
}
for (i = 0; i < 2; i++) this.aSort.unshift(this.aSort.pop());
that.aSpan = $$(“span”, that.control);
that.control.onmouseover = function (ev)
{
var oEv = ev || event;
var oTarget = oEv.target || oEv.srcElement;
if (oTarget.tagName.toUpperCase() == “SPAN”)
{
that.aSort.sort(function (a, b) {return a.number – b.number});
if (oTarget.number < that.iCenter)
{
for (i = 0; i < that.iCenter – oTarget.number; i++)
that.aSort.unshift(that.aSort.pop());
that.__set__();
return false
}
else if (oTarget.number > that.iCenter)
{
for (i = 0; i < oTarget.number – that.iCenter; i++)
that.aSort.push(that.aSort.shift());
that.__set__();
return false
}
else
{
that.__set__()
}
}
}
this.__set__();
this.__switch__();
this.__autoPlay__()
};
Youa.prototype.__set__ = function ()
{
var i = 0;
for (i = 0; i < this.aSort.length; i++)
this.container.appendChild(this.aSort[i]);
for (i = 0; i < this.aSpan.length; i++) this.aSpan[i].className =
“”;
this.aSpan[this.aSort[this.iCenter].number].className = “active”;
for (i = 0; i < this.aSort.length; i++)
{
this.aSort[i].index = i;
if (i < 5)
{
new Animate(this.aSort[i], this.oData[i]);
}
else
{
new Animate(this.aSort[i], this.oData[this.oData.length – 1])
}
}
};
Youa.prototype.__switch__ = function ()
{
var i = 0;
var that = this;
this.container.onclick = function (ev)
{
var oEv = ev || event;
var oTarget = oEv.target || oEv.srcElement;
var index = findItem(oTarget);

你或许感兴趣的著作:

if (index < that.iCenter)
{
for (i = 0; i < that.iCenter – index; i++)
that.aSort.unshift(that.aSort.pop());
that.__set__();
return false
}
else if (index > that.iCenter)
{
for (i = 0; i < index – that.iCenter; i++)
that.aSort.push(that.aSort.shift());
that.__set__();
return false
}
function findItem (element)
{
return element.className == “item” ? element.index :
arguments.callee(element.parentNode)
}
};
};
Youa.prototype.__autoPlay__ = function ()
{
var that = this;
that.timer = setInterval(function ()
{
that.aSort[3].click()
}, 3000);
that.obj.onmouseover = function ()
{
clearInterval(that.timer)
};
that.obj.onmouseout = function ()
{
that.timer = setInterval(function ()
{
that.aSort[3].click()
}, 3000)
}
};
function $ (id)
{
return typeof id === “string” ? document.getElementById(id) : id
};
function $$ (tagName, oParent)
{
return (oParent || document).getElementsByTagName(tagName)
};
function $$$ (className, element, tagName)
{
var i = 0;
var aClass = [];
var reClass = new RegExp(“(^|//s)” + className + “(//s|$)”);
var aElement = $$(tagName || “*”, element || document);
for (i = 0; i < aElement.length; i++)
reClass.test(aElement[i].className) && aClass.push(aElement[i]);
return aClass
};
function css (element, attr, value)
{
if (arguments.length == 2)
{
if (typeof arguments[1] === “string”)
{
return element.currentStyle ? element.currentStyle[attr] :
getComputedStyle(element, null)[attr]
}
else
{
for (var property in attr)
{
property == “opacity” ?
(element.style.filter = “alpha(opacity=” + attr[property] + “)”,
element.style.opacity = attr[property] / 100) :
element.style[property] = attr[property]
}
}
}
else if (arguments.length == 3)
{
switch (attr)
{
case “width”:
case “height”:
case “top”:
case “left”:
case “right”:
case “bottom”:
element.style[attr] = value + “px”;
break;
case “opacity” :
element.style.filter = “alpha(opacity=” + value + “)”;
element.style.opacity = value / 100;
break;
default :
element.style[attr] = value;
break
}
}
return element
};
function Animate (element, options, fnCallBack)
{
this.obj = $(element);
this.options = options;
this.__onEnd__ = fnCallBack;
this.__startMove__()
};
Animate.prototype.__startMove__ = function ()
{
var that = this;
clearInterval(that.obj.timer);
that.obj.timer = setInterval(function ()
{
that.__doMove__()
}, 30);
};
Animate.prototype.__doMove__ = function ()
{
var complete = true;
var property = null;
for (property in this.options)
{
var iCur = parseFloat(css(this.obj, property));
property == “opacity” && (iCur = parseInt(iCur.toFixed(2) * 100));
var iSpeed = (this.options[property] – iCur) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
this.options[property] == iCur || (complete = false, css(this.obj,
property, iSpeed + iCur))
}
complete && (clearInterval(this.obj.timer), this.__onEnd__ &&
this.__onEnd__.apply(this.obj))
};
window.onload = function ()
{
new Youa(“box”)
};
</script>
</head>
<body>
<div id=”box”>
<div id=”container”>
<div class=”item”>
<div class=”pic”>
<a href=”javascript:;”><img
src=”http://js.fgm.cc/learn/lesson10/img/youa/1.jpg” /></a>
</div>
<div class=”txt”>
<dl>
<dt><a href=”javascript:;”>必图拳馆</a></dt>
<dd class=”info”>不要把团结困住 你需要自由!</dd>
<dd><span>总体评价:</span><div
class=”star”><div style=”width:48px;”
class=”star_red”></div><div
class=”star_grey”></div></div></dd>
<dd><span>用户映像:</span><span
class=”pink”>过瘾</span><span
class=”blue”>带劲</span><span
class=”green”>有生命力</span></dd>
</dl>
<div class=”comment”>
<h3>用户评价</h3>
<div class=”comment_list”>
<ul id=”list”>
<li><b>thaifight:</b>是一个非常好的一个拳…</li>
<li><b>快乐小友:</b>散打课的实战机会挺多…</li>
<li><b>爱情赛车:</b>白天人很少,喜欢安静…</li>
</ul>
</div>
</div>
</div>
</div>
<div class=”item”>
<div class=”pic”>
<a href=”javascript:;”><img
src=”http://js.fgm.cc/learn/lesson10/img/youa/2.jpg"&gt;&lt;/a&gt;
</div>
<div class=”txt”>
<dl>
<dt><a
href=”javascript:;”>法国巴黎「七田阳光」全脑教育培训核心</a></dt>
<dd class=”info”>点亮孩子聪明人生</dd>
<dd><span>总体评价:</span><div
class=”star”><div style=”width:48px;”
class=”star_red”></div><div
class=”star_grey”></div></div></dd>
<dd><span>用户映像:</span><span
class=”pink”>亲切</span><span
class=”blue”>耐心</span><span
class=”green”>干净</span></dd>
</dl>
<div class=”comment”>
<h3>用户评价</h3>
<div class=”comment_list”>
<ul id=”list”>
<li><b>Jcenter:</b>如此由衷的教育机关
…</li>
<li><b>citaslin:</b>孩子的向上很大</li>
<li><b>甲鱼爱媛媛:</b>七田阳光很尊重灵魂,…</li>
</ul>
</div>
</div>
</div>
</div>
<div class=”item”>
<div class=”pic”>
<a href=”javascript:;”><img
src=”http://js.fgm.cc/learn/lesson10/img/youa/3.jpg” /></a>
</div>
<div class=”txt”>
<dl>
<dt><a
href=”javascript:;”>慕纱莹雪婚纱礼服馆</a></dt>
<dd class=”info”>物超所值的性价比,尽在慕纱莹雪!</dd>
<dd><span>总体评价:</span><div
class=”star”><div style=”width:62px;”
class=”star_red”></div><div
class=”star_grey”></div></div></dd>
<dd><span>用户印象:</span><span
class=”pink”>精致</span><span
class=”blue”>做工好</span><span
class=”green”>专业</span></dd>
</dl>
<div class=”comment”>
<h3>用户评价</h3>
<div class=”comment_list”>
<ul id=”list”>
<li><b>小企鹅快跑:</b>这一个周末去取了我定的…</li>
<li><b>月逢明时:</b>这家婚纱店的婚纱做工…</li>
<li><b>日历本丢了:</b>前一周末去取了婚纱,婚…</li>
</ul>
</div>
</div>
</div>
</div>
<div class=”item”>
<div class=”pic”>
<a href=”javascript:;”><img
src=”http://js.fgm.cc/learn/lesson10/img/youa/4.jpg"&gt;&lt;/a&gt;
</div>
<div class=”txt”>
<dl>
<dt><a
href=”javascript:;”>迪拜金三优装饰有限责任公司</a></dt>
<dd class=”info”>一站式服务让你省时、省力、省钱、省心</dd>
<dd><span>总体评价:</span><div
class=”star”><div style=”width:48px;”
class=”star_red”></div><div
class=”star_grey”></div></div></dd>
<dd><span>用户映像:</span><span
class=”pink”>口碑好</span><span
class=”blue”>规模很大</span><span
class=”green”>讲信誉</span></dd>
</dl>
<div class=”comment”>
<h3>用户评价</h3>
<div class=”comment_list”>
<ul id=”list”>
<li><b>紫婧之梦:</b>这家店不错哦!</li>
<li><b>gotometop:</b>装修工都还挺实在的,…</li>
<li><b>libangcheng1:</b>这家公司还足以,二零一八年…</li>
</ul>
</div>
</div>
</div>
</div>
<div class=”item”>
<div class=”pic”>
<a href=”javascript:;”><img
src=”http://js.fgm.cc/learn/lesson10/img/youa/5.jpg"&gt;&lt;/a&gt;
</div>
<div class=”txt”>
<dl>
<dt><a
href=”javascript:;”>鸿喜族休闲俱乐部—潘家园店</a></dt>
<dd class=”info”>专注人类健康,打造财富传奇!</dd>
<dd><span>总体评价:</span><div
class=”star”><div style=”width:48px;”
class=”star_red”></div><div
class=”star_grey”></div></div></dd>
<dd><span>用户映像:</span><span
class=”pink”>真好</span><span
class=”blue”>专业</span><span
class=”green”>手法好</span></dd>
</dl>
<div class=”comment”>
<h3>用户评价</h3>
<div class=”comment_list”>
<ul id=”list”>
<li><b>永封de铁盒:</b>环境挺不错,灯光控制…</li>
<li><b>老冯爱国:</b>不错的地方,是个很有…</li>
<li><b>白云寺方丈:</b>我不会打台球,但情人…</li>
</ul>
</div>
</div>
</div>
</div>
<div class=”item”>
<div class=”pic”>
<a href=”javascript:;”><img
src=”http://js.fgm.cc/learn/lesson10/img/youa/6.jpg"&gt;&lt;/a&gt;
</div>
<div class=”txt”>
<dl>
<dt><a
href=”javascript:;”>新加坡心拓城拓展培训</a></dt>
<dd class=”info”>客户首先 执行有力 心理劳苦 简单团结</dd>
<dd><span>总体评价:</span><div
class=”star”><div style=”width:48px;”
class=”star_red”></div><div
class=”star_grey”></div></div></dd>
<dd><span>用户印象:</span><span
class=”pink”>专业</span><span
class=”blue”>安全</span><span
class=”green”>积极</span></dd>
</dl>
<div class=”comment”>
<h3>用户评价</h3>
<div class=”comment_list”>
<ul id=”list”>
<li><b>janice19891:</b>很负总责~</li>
<li><b>旺达(Wanda)是条鱼:</b>朋友加入过他们的拓展…</li>
<li><b>bjftxiaoniu:</b>吼吼,在此地看到她们…</li>
</ul>
</div>
</div>
</div>
</div>
<div class=”item”>
<div class=”pic”>
<a href=”javascript:;”><img
src=”http://js.fgm.cc/learn/lesson10/img/youa/7.jpg"&gt;&lt;/a&gt;
</div>
<div class=”txt”>
<dl>
<dt><a
href=”javascript:;”>韩医务卫生人员专业祛痘连锁机构巴黎直营店</a></dt>
<dd class=”info”>大家只祛痘 所以更规范</dd>
<dd><span>总体评价:</span><div
class=”star”><div style=”width:62px;”
class=”star_red”></div><div
class=”star_grey”></div></div></dd>
<dd><span>用户映像:</span><span
class=”pink”>效果好</span><span
class=”blue”>细心</span><span
class=”green”>专业</span></dd>
</dl>
<div class=”comment”>
<h3>用户评价</h3>
<div class=”comment_list”>
<ul id=”list”>
<li><b>天涯hehaijiao:</b>这家店很好,顾客很多…</li>
<li><b>爱神马geili:</b>我看病了两天感觉的好…</li>
<li><b>天上的语言:</b>这几天已经观察明明效…</li>
</ul>
</div>
</div>
</div>
</div>
<div class=”item”>
<div class=”pic”>
<a href=”javascript:;”><img
src=”http://js.fgm.cc/learn/lesson10/img/youa/8.jpg"&gt;&lt;/a&gt;
</div>
<div class=”txt”>
<dl>
<dt><a
href=”javascript:;”>罗曼卡婚纱摄影</a></dt>
<dd class=”info”>口碑好 性价比高 无额外消费</dd>
<dd><span>总体评价:</span><div
class=”star”><div style=”width:62px;”
class=”star_red”></div><div
class=”star_grey”></div></div></dd>
<dd><span>用户映像:</span><span
class=”pink”>口碑好</span><span
class=”blue”>很喜爱</span><span
class=”green”>完美</span></dd>
</dl>
<div class=”comment”>
<h3>用户评价</h3>
<div class=”comment_list”>
<ul id=”list”>
<li><b>明确提议i:</b>拍的很不错,老妈都夸…</li>
<li><b>爱就一向走吗:</b>他们家服务态度好,衣…</li>
<li><b>爱过你me:</b>最后照片拍出来后朋友…</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id=”control”></div>
</div>
</body>
</html>