作者 | 杨小二
前言
你的想法会影响你的行动,你的行动会影响你的最终结果。如果你的想法总是不对,就会很难取得好的结果。比方很多人对于专业技能的学习,总是急于求成,想花几个月时间,就想达到别人五年十年的专业水平,而不明白,学习其实是一个需要时间,慢慢积累,循循渐进的过程。
而还有的人对于学习,总想着等到自己什么都学会了,或者自我感觉不错了,才会去行动,去进行实战练习,其实,这个也是不友好的一种学习方式,因为它容易导致学习效率低。
因此,我们在学习编程的过程中,我们不需要把所有知识都掌握了才开始去写代码,而是一边学习理论知识,一边敲代码。
这样我们会更清楚自己的学习情况,知道问题在那里,这样才能及时调整学习方法。
所以,从今天开始,敲下你的第一行代码。
从今天开始,每天坚持学习5分钟,实现一个简单的效果。
实例效果
PC端预览的效果:
移动端的效果:
要点解析
采用display: grid创建一个合适的响应网格布局。
将样式包装到媒体查询中,以适应于小尺寸屏幕。
案例代码
HTML代码:
<div class="image-mosaic">
<div class="card card-tall card-wide" style="background-image: url('http://www.webqdkf.com/skin/default/images/gksj-09.jpg')">
</div>
<div class="card card-tall" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/e1edfa3a0786f4df7c442a1895522109.jpg')">
</div>
<div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/e2ab18d0d9ef27d2e2f6f589c501e25b.jpg')">
</div>
<div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/11-12/1755875dfb05ec8dc263be2f56d124e5.jpg')">
</div>
<div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/859ecf02e0f70819ba71d5fee8f72f12.jpg')">
</div>
<div class="card" style="background-image: url('http: