最近練習JAVA的程式碼,找了一些題目來玩。
我練習用的環境是Netbean,完成題目之後,寫成筆記然後放上部落格,避免以後忘記,告訴未來的自己曾經寫出來過。
不過因為程式碼直接貼上來,與敘述文字放在一起,看起來很突兀又不美觀,所以還是用邊框框起來好了,各個程式大神在網路上撰寫程式碼,貼到部落個得時候也會用框起來,做好區隔。
今天就寫一個小小的灰底邊框,方便以後使用。
▼像這樣將程式碼包起來,看起來就一目了然。
寫一個灰底細框的程式碼
灰底細框的程式碼:
<div style="border-width:1px;border-style:solid;border-color:#D0D0D0;background-color:#FCFCFC;padding:15px 25px;">貼上我的程式碼</div>
貼上來就長這個樣子:
public static void main(String[] args) {
System.out.print("我的程式碼");
}點選撰寫文章的"原始碼",貼上去,並用<div>程式碼內容</div>包覆程式碼的內容就好了
另外,為了部落格版面的美觀,我之前將套用的主題行距調高了三倍,所以大家看我的文章,兩行之間的距離比較寬,是因為我我調整過了。
不過三倍的間距,放上編寫的程式碼,真的太寬了(如上面顯示的樣子)。
所以我打算在邊框裡面做一些調整,將裡頭的文字行距縮短,
(調整後)灰底細框的程式碼:
<div style="border-width:1px;border-style:solid;border-color:#D0D0D0;background-color:#FCFCFC;padding:15px 25px; line-height: 50%;">我的程式碼</div>
補上了:line-height: 30%,將行與行的間距調整為原本的30%
貼上來就長這個樣子:
public static void main(String[] args) {
System.out.print("我的程式碼");
}
留言列表