还原下图
还原思路:
先做出一个区域的还原,其余复制。
.q{ background: url(li1.jpg) no-repeat #fff;width: 200px;height: 230px;left:300px;top: 180pxborder:solid #999; background-size:100% 70%;position:relative;}
1.定义一块区域 设置宽高
2.通过background引入图片 设置背景颜色
3.background-size用%来设置图片填充大小
4.使用position人为定位
SALADS Lorem ipsum dolor sit amet,consectetur adipiscing elit.
在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.开发者工具微调
图: