云麓谷第二次

还原下图 还原思路: 先做出一个区域的还原,其余复制。 .q{ background: url(li1.jpg) no-repeat #fff;width:

还原下图

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

.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.开发者工具微调

在这里插入图片描述