【CSS】- PIXNET 痞客邦部落格各種格式範例 - 框線 @ 隨手記錄

【CSS】- PIXNET 痞客邦部落格各種格式範例 - 框線

對不懂CSS程式語法的我們，看到別人的部落格各種的框線、排版時，想要學，卻也沒有那麼簡單。既然已經學不會，那就直接用「複製、貼上大法」。再直接修改裏面的原始碼。所以著手收集看到的格式。

使用方法：

看到想要使用的範例時，直接複製下面的原始碼，並貼到自己的部落格即可。可以用痞客邦編輯工具直接編輯的，這邊就不再贅述。
用綠色標註之處，如何修改。請直接參考說明即可。

以下將陸續更新。

(廣告)

範　例01

台北|新北百貨週年慶九月開始

原始碼

<div class="jane_bar" style="border: 1px solid gray; margin: 0px 0px 15px; padding: 5px; border-radius: 5px; width: 100%; background-color: rgb(245, 155, 238);box-sizing: border-box; line-height: initial; color: rgb(0, 0, 255); font-family: "Microsoft JhengHei", cwTeXHei, "Open Sans"; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 1px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
<center style="text-align: center;"><font size="6"><strong style="border:0px; font-family:noto sans tc,microsoft jhenghei,arial !important; font-size:32px; font-weight:bold; margin:0px; padding:0px; vertical-align:baseline">台北|新北百貨週年慶九月開始</strong></font></center>
</div>

說　明

① 外框線的設定：線的種類、寬度、顏色。找到關鍵字「border」。依序的參數為：線寬、種類、顏色。

② 框的寬度單位：可以用px、%兩種單位。px為實際的像素寬。%則為顯示比例。個人偏好用%，因為可隨使用的的螢幕自動調整比例。如設定為95%，則框的寬度，不論在手機、電腦、平板，皆會自動調整為95%的大小。

③ 框的背景顏色：找到關鍵字「background-color」。只要改rbg( , , )裏面的數字即可。若找不到此關鍵字，則 background-color: rgb(245, 155, 238); 整段copy/paste到框的原始碼中即可。

④ 框如何置中：找到緊跟在border後面的「margin」，其文字如下margin: 0px 0px 15px，如下置中將其改為 margin: auto auto 15px 即可。

⑤ 直角框或是圓角框：找到關鍵字「border-radius」，修改後面的數值。0px 是90度的直角，5px則為圓角。數值愈大，則框愈圓。

⑥ 線的種類：

solid；實線
dashed；虛線
double；雙線
dotted；點線
groove；凹線
ridge；凸線
inset；嵌入線
outset；浮出線

(廣告)

範　例02

⬛ 店家名稱：北斗麻糬冰粽發明館
⬛ 地　　址：彰化縣埤頭鄉和豐村六號巷107號
⬛ 營業時間：08:30~17:00；08:30~17:30(六)
⬛ 聯絡電話：04 878 3393

原始碼

<blockquote style="margin: 15px auto; padding: 0px 1em; box-sizing: border-box; color: #000000; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 13px; line-height: inherit; font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Arial; letter-spacing: 0.91px; text-align: left; border: 1px dashed #aaaaaa; background-color: #eeeeee;">
<p style="margin: 15px auto; padding: 0px; box-sizing: border-box; font: 16px 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; letter-spacing: 0.07em; text-align: left; border: 0px none;"><span style="font-size: 16px;"><span style="color: #000000;"><span style="margin: 0px auto;"><strong style="margin: 0px auto;">⬛ </strong></span></span></span>店家名稱：北斗麻糬冰粽發明館<br style="margin: 15px auto; padding: 0px; box-sizing: border-box; font: 16px 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; letter-spacing: 0.07em; text-align: left; border: 0px none;"><span style="font-size: 16px;"><span style="color: #000000;"><span style="margin: 0px auto;"><strong style="margin: 0px auto;">⬛ </strong></span></span></span>地　　址：彰化縣埤頭鄉和豐村六號巷107號<br style="margin: 0px auto;" /><span style="font-size: 16px;"><span style="color: #000000;"><span style="margin: 0px auto;"><strong style="margin: 0px auto;">⬛ </strong></span></span></span>營業時間：08:30~17:00；08:30~17:30(六)<br style="margin: 0px auto;" /><span style="font-size: 16px;"><span style="color: #000000;"><span style="margin: 0px auto;"><strong style="margin: 0px auto;">⬛ </strong></span></span></span>聯絡電話：04 878 3393</p>
</blockquote>

範　例03

如何包紅包？包紅包有哪些禁忌、規矩？

原始碼

<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; width:100%">
   <colgroup>
       <col style="mso-width-source:userset;mso-width-alt:3211;width:69pt" width="92" />
   </colgroup>
   <tbody>
       <tr height="21" style="height:15.5pt">
           <td class="xl65" height="21" style="height: 15.5pt; width: 69pt; text-align: center;border-radius:16px; background-color: rgb(218, 41, 28);" width="92"><strong><span style="color:#FFFFFF"><span style="font-size:18px">如何包紅包？包紅包有哪些禁忌、規矩？</span></span></strong></td>
       </tr>
   </tbody>
</table>

一、使用新鈔

原始碼

說　明

以上兩個只差別在寬度。可以搜尋一下「width」，一個是設定100%，一個是300 px。

(廣告)

範　例04

新竹溫泉🔍

新竹美食🔍

新竹景點🔍

新竹夜市🔍

新竹健身房🔍

新竹游泳池🔍

原始碼

<div class="jane_bar" style="border: 1px dashed gray; margin: auto auto 5px; padding: 5px; border-radius: 25px; width: 300px; background-color: rgb(255, 255, 255); box-sizing: border-box; line-height: 30px; color: rgb(0, 0, 255); font-family: "Microsoft JhengHei", cwTeXHei, "Open Sans"; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 1px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; text-align: center;"><span style="font-size:16px"><a href="https://ytliu0.pixnet.net/blog/post/225621671" target="_blank">新竹健身房</a>🔍</span></div>

<div class="jane_bar" style="border: 1px dashed gray; margin: auto auto 5px; padding: 5px; border-radius: 25px; width: 300px; background-color: rgb(255, 255, 255); box-sizing: border-box; line-height: 30px; color: rgb(0, 0, 255); font-family: "Microsoft JhengHei", cwTeXHei, "Open Sans"; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 1px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; text-align: center;"><span style="font-size:16px"><a href="http://ytliu0.pixnet.net/blog/post/225089864" target="_blank">新竹游泳池</a>🔍</span></div>
</div>

(廣告)

範　例05

原始碼

說明

紅色標註處：背景的顏色
綠色標註處：左邊粗槓的顏色
藍色標註處：顯示的文字
紫色標註處：連結的網址

(廣告)

範　例06

延伸閱讀

原始碼

<h2 class="ih-heading" 
style="
box-sizing: border-box; 
font-family: inherit; 
font-weight: 400; 
color: inherit; 
margin: 0px 0px 25px; 
font-size: 2rem; 
line-height: 1; 
padding: 0px; 
border-width: 0px 0px 2px; 
border-top-style: initial; 
border-right-style: initial; 
border-bottom-style: solid; 
border-left-style: initial; 
border-top-color: initial; 
border-right-color: initial; 
border-bottom-color: rgb(254, 195, 64); 
border-left-color: initial; 
border-image: initial; 
font-style: inherit; 
font-variant: inherit; 
font-stretch: inherit; 
vertical-align: baseline;">
<span style="
box-sizing: border-box; 
font-family: inherit; 
font-weight: inherit; 
margin: 0px; 
padding: 8px 12px 5px; 
border: 0px; 
font-style: inherit; 
font-variant: inherit; 
font-stretch: inherit; 
font-size: 14px; 
line-height: inherit; 
vertical-align: baseline; 
display: inline-block; 
background-color: rgb(254, 195, 64); 
color: rgb(255, 255, 255);
">延伸閱讀</span></h2>

說明

方框的顏色：background-color: rgb(254, 195, 64)
底線的顏色：border-bottom-color: rgb(254, 195, 64)
字的顏色：color: rgb(255, 255, 255) 曘後一個

(廣告)

範　例07

樣式一樣式二樣式三樣式四樣式四樣式五

原始碼

</p>

找到你要的答案了嗎？若是，請別急著走，更不要吝嗇你的掌聲，撥個兩秒鐘，幫忙按個「讚」吧。另外，工商服務的視窗也是很精采的，別忘了多留意一下，是否有你需要的資訊。

賈伯斯說：求知若渴，虛懷若愚。處處留心皆學問，說不定這些精采的廣告，還可以讓你的人生旅途更加的豐富、更加的精采。

① 為了讓下一個查詢資料的人，可以更快速的查詢到正確的資料，如您有其它資訊可提供，或發現以上訊息有誤時，煩請留下訊息，我們將立即更正。

② 以上資料僅供參考，實際費用仍以原始店家公告為準。

延伸閱讀

(廣告)

痞客邦 - CSS

News123

隨手記錄

News123 發表在痞客邦留言(4) 人氣()

隨手記錄

本部落格由數名好友共同撰寫。記錄生活中的點點滴滴。內容包含食、衣、住、行、育、樂上的各種記錄及經驗分享。若有牽涉到店家的任何資訊，皆僅供參考。正確性及時效性，請依原店家公告為主。

2023 各縣市活動