模擬圖片與文字 in HTML

        接到案子的時候，有時候客戶來不及提供圖片及文字時，而工程師為了先看版面是否跟自己設計的一樣，需要先在裡面加入模擬的圖片或文字，不但圖片配合版面所需要的尺寸不盡相同，而且文字也需要隨機產生。

        要讓模擬的圖片不用自己找來裁減，而文字也不用很麻煩的去找，我們需要點工具。

        lorempixel 和 Lorem Ipsum 就是為這個應運而生的，以下來實際演示：

        lorempixel的頁面：http://lorempixel.com/

     

     
       程式的實作：

<img src="http://lorempixel.com/370/277" />

       規則：http://lorempixel.com/寬/高/類別/第幾個

       如果需要加文字在上面只需要在最後面加上 /你的文字。

       點開右上方的images，從右方跑出圖片區，依序可以選擇你要的圖片：

     

        Lorem Ipsum 用法則是十分容易，現在主流的編輯器像phpstorm有支援，而sublime也只要安裝emmet也可以直接使用，以下是實作：

lorem

        然後按下Tab，Done。（這裡為了排版我分了三行，原來是一行。）

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem est 

eveniet illo odit perspiciatis quae recusandae rerum sit ullam! Accusamus ad 

assumenda debitis exercitationem hic ipsum nostrum quae rem!

        如果你只想特定字數，只需要加上數字就行了：

lorem7

        按下Tab，Done。

Lorem ipsum dolor sit amet, consectetur adipisicing.