- 博主打算為自己在vps上掛載的服務(wù), 建立一個(gè)導(dǎo)航頁(yè), 于是寫(xiě)一個(gè)靜態(tài)頁(yè)面, 貼了幾個(gè)超鏈接
- 后來(lái), 感覺(jué)不美觀, 就放了幾張圖片
- 服務(wù)器存儲(chǔ)的圖片看了幾遍就看膩了, 于是找了一個(gè)高質(zhì)量圖片的api, 每次打開(kāi)導(dǎo)航頁(yè)都能看到隨機(jī)的封面
開(kāi)源圖片api的使用
- 我想獲得
300*300, 關(guān)于book和library的圖片"
https://source.unsplash.com/300x300/?book,library - 將隨機(jī)圖片嵌入到html中
<img src="https://source.unsplash.com/300x300/?book,library">
隨機(jī)封面效果展示
- 第一次打開(kāi):
- 第二次打開(kāi)
- 第三次打開(kāi)
- 第N次打開(kāi)...
隨機(jī)封面測(cè)試地址(頁(yè)面每次刷新峡蟋，都能看到不同的封面): https://fangyuanxiaozhan.com
頁(yè)面部分源碼:
<body>
<section class="clearfix">
<div class="item">
<a >
<img src="https://source.unsplash.com/300x300/?program" alt="">
<div class="item-title">私有Git倉(cāng)庫(kù)</div>
</a>
</div>
<div class="item">
<a >
<img src="https://source.unsplash.com/300x300/?document" alt="">
<div class="item-title">私有云網(wǎng)盤(pán)</div>
</a>
</div>
<div class="item">
<a href="http://www.reibang.com/u/c5d047065c42">
<img src="https://source.unsplash.com/300x300/?book,library" alt="">
<div class="item-title">簡(jiǎn)書(shū)主頁(yè)</div>
</a>
</div>
<div class="item">
<a >
<img src="https://source.unsplash.com/300x300/?github" alt="">
<div class="item-title">Github主頁(yè)</div>
</a>
</div>
<div class="item">
<a href="">
<img src="https://source.unsplash.com/300x300/?cartoon" alt="">
<div class="item-title">在線爬蟲(chóng)(建設(shè)中)</div>
</a>
</div>
<div class="item">
<a href="">
<img src="https://source.unsplash.com/300x300/?beauty" alt="">
<div class="item-title">資源分享(建設(shè)中)</div>
</a>
</div>
</section>
</body>
小結(jié):
- 使用隨機(jī)化開(kāi)源圖片封面, 能讓我們每次打開(kāi)頁(yè)面都有驚喜.
- 對(duì)于剛剛接觸前端的小伙伴, 使用開(kāi)源的圖片庫(kù), 能讓你的頁(yè)面更加豐富多彩, 提升學(xué)習(xí)的興趣.
- 對(duì)于前端老司機(jī),可以獲取定制化的開(kāi)源圖片, 提升頁(yè)面展示效果.
- 如果你對(duì)圖片的質(zhì)量有極致的追求,https://source.unsplash.com 提供了豐富的接口參數(shù)設(shè)置,可以定制化隨機(jī)圖片的范圍, 當(dāng)然也可以在unsplash.com 注冊(cè)一個(gè)賬號(hào), 訂閱特別主題的圖片.
