云麓谷第二次

还原下图

还原思路：
先做出一个区域的还原，其余复制。

.q{ background: url(li1.jpg) no-repeat #fff;
    width: 200px;
    height: 230px;
    left:300px;
    top: 180px
    border:solid #999; 
    background-size:100% 70%;
    position:relative;
  }

1.定义一块区域设置宽高
2.通过background引入图片设置背景颜色
3.background-size用%来设置图片填充大小
4.使用position人为定位

<div class="q">
   <div class="w">
   SALADS 
   </div>
   <div class="e">
  <p style="color:#999;font-size:1px"> Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
   </div>
 </div>

在div中划分div，方便文本内容的定位

.w{position:absolute;
     right:30px;
     bottom:30px;
     font-size:15px;
     font-weight: bold;
     color:#121a2a;
     
     }
.e{position:absolute;
     left:10px;
     bottom:0px;
   }

完成文本的定位
底部图案设置：
1.给div加上上边框，实现横线
2.作圆，加入图片，通过margin负值移动至覆盖横线
3.开发者工具微调
图：

云麓谷第二次