灰底細框的邊界範圍

最近練習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("我的程式碼");

    }

 

關於我

  關注社群|FB粉絲團追蹤IG:麻鼠揪麻將

◎  購買貼圖布丁鼠貼圖小元仔藥師貼圖

◎  點擊以下連結購物(您不會有額外支出,但我會有微薄的獎金)

蝦皮購物    hahow  

Klook  KKday  booking

 

 

 

 


arrow
arrow
    文章標籤
    CSS 灰底細框 痞克邦
    全站熱搜

    元元不絕 發表在 痞客邦 留言(0) 人氣()