<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CODING COFFEE</title>
<style type="text/css">
/*background-image:url('IMG_0396.JPG');*/
h1{
background-color:rgba(255,0,0,0.1);
}
.introduce{
width: 1080px;
border: 2px ridge red;
margin:0 auto;
padding:10px;
}
.lanshan{
float:left;
}
.para{
float:right;
width:50%
}
h1,h2{
text-align:center;
}
body{
background-image:url('IMG_0396.JPG');
background-repeat:repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<div>
<h1>CODINF COFFEE MENU<h1>
<hr>
</div>
<div class="introduce" onClick="like(this)">
<div>
<img class="lanshan" src="./img/c3.jpg" height="200">
</div>
<div class="para">
<h2 id="lanshan">蓝山咖啡</h2>
<p>源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。</br>
如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。</p>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<div class="introduce" onClick="like(this)">
<div>
<img class="lanshan" src="./img/c7.jpg" height="200">
</div>
<div class="para">
<h2 id="natie">拿铁咖啡</h2>
<p>每一款臻选咖啡豆，都有着自己的个性和故事。它因人因地因天气而有着别样的风味。<br>
当你来到星巴克臻选门店，这场相遇才刚开始。和我们的黑围裙大师一起，用不同煮制方式，
走进原产地的风情中。</p >
</div>
<div style="clear:both;"></div>
</div>
<hr>
<div class="introduce" onClick="like(this)">
<div>
<img class="lanshan" src="./img/c8.jpg" height="200">
</div>
<div class="para">
<h2 id="yishi">意式咖啡</h2>
<p>作为在中国上市的第一款单一产地系列咖啡，东帝汶塔塔迈劳咖啡豆将当地的风味浓缩其中，<br>
一起来星巴克门店，感受它那平衡的草本风味吧。</p >
</div>
<div style="clear:both;"></div>
</div>
<hr>
<div class="introduce" onClick="like(this)">
<div>
<img class="lanshan" src="./img/c8.jpg" height="200" >
</div>
<div class="para">
<h2 id="kabu">卡布基诺</h2>
<p>源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。<br>
如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。</p >
</div>
<div style="clear:both;">
</div>
</div>
<hr>
<div class="introduce" onClick="like(this)">
<div>
<img class="lanshan" src="./img/c5.jpg" height="200">
</div>
<div class="para">
<h2 id="moka">摩卡咖啡</h2>
<p>源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。<br>
如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。</p >
</div>
<div style="clear:both;">
</div>
</div>
<hr>
<script type="text/javascript">
function loodAll(){
var item = document.getElementsByClassName("introduce");
for(var i=0;i<item.length;i++){
item[i].style.setProperty("background-image","none");
}
if(localStorage.length>0){
for(var i=0;i<localStorage.length;i++){
var id = localStorage.key(i);
document.getElementById(id).parentNode.parentNode.style.setProperty("background-image","url('big_head.jpg')");
}
}
}
function like(obj){
var id = obj.childNodes[3].childNodes[1].id;
var name = obj.childNodes[3].childNodes[1].innerHTML;
for(var i=0;i<localStorage.length;i++){
if(localStorage.key(i)==id){
localStorage.removeItem(id);
console.log(localStorage);
loodAll();
return;
}
}
localStorage.setItem(id,name);
loodAll();
console.log(localStorage);
}
</script>
</body>
</html>
04-29
04-29
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
