<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.recipeStep li {
display: block;
margin: 0px 0px 35px;
}
.recipeStep li .recipeStep_img {
260px;
display: inline-block;
position: relative;
}
.recipeStep_img a {
cursor: auto;
100px;
height:100px;
background:red;
}
.recipeStep li .recipeStep_img img {
220px;
height:100px;
background:red;
}
img {
border: 0px none;
vertical-align: middle;
}
.recipeStep_num {
40px;
height: 40px;
background: none repeat scroll 0% 0% #E8E8E8;
border: 1px solid #BCBCBC;
border-radius: 20px;
position: absolute;
top: 50%;
right: 10px;
text-align: center;
line-height: 40px;
font-size: 30px;
color: #BA2020;
margin-top: -20px;
}
.recipeStep li .recipeStep_word {
370px;
display: inline-block;
vertical-align: middle;
color: #666;
font-size: 16px;
}
</style>
</head>
<body>
<div class="recipeStep">
<ul>
<li>
<div class="recipeStep_img">
<a href="javascript:void(0);" data-id="0">
<img src="">
</a>
<div class="recipeStep_num">1</div>
</div>
<div class="recipeStep_word">准备好所有的食材。</div>
</li>
<li>
<div class="recipeStep_img">
<a href="javascript:void(0);" data-id="1">
<img src="http://i3.meishichina.com/attachment/recipe/201111/18/p320_201111181304588.JPG">
</a>
<div class="recipeStep_num">2</div>
</div>
<div class="recipeStep_word">再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好再把调味料准备好。</div>
</li>
</ul>
</div>
</body>
</html>