程式碼列表的框框

Posted by: 邱小新 at 上午11:41:00 in

由於 xmp.code 及 xmp.cmd 會繼承 xmp 的所有設定,所以相同的部份就不用再寫一次,只要寫出相異的部份即可,這樣可以省下很多空間,加速網頁傳送速度。另外儘量使用 TAB 來代替 space 可以省下更多的空間;但是請注意在 <xmp></xmp> 中間不要使用 TAB,是無效的。

框框一

<style type="text/css"> xmp { padding: 1em; display: block; font-family: Tahoma,Arial; font-size: 10pt; letter-spacing: 0px; max-height: 1200px; line-height: 1.2em; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ color: black; border: 1px dashed #2f6fab; background-color: #f9f9f9; } </style>

框框二

<style type="text/css"> xmp.code { color: #000000; border: 1px solid #cccccc; background: #cccccc url(https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vRt4vIne13Jj0b_YBM9xhQZTusjb-wnx6m9UDp3YT4Xkv6L5Ik8AHDK0dKdeDtqSlj15CFV2oFJthyT0OHx-XBDf-MJoVnfWx5L9fTW8KUYRhQ=s0-d) left top repeat-y; } </style>

框框三

<style type="text/css"> xmp.cmd { color: #cccccc; border: 1px solid #cccccc; background: #000000 url(https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_u0qGrN8OQE00HVipzkXHteBGj1E2BLQmdPVM3yTdWcXCU_-0yWlLP7Ro8q6HsaU5Pn3cCPvdZdx0Ug5B1zLwKHwnNNi4gLcDf6Hd11pgw2gSI=s0-d) left top repeat-y; } </style>

框框四

<style type="text/css"> xmp.file { font-family: 'Georgia'; color: #000; border: 1px solid #cccccc; background: #FFF url(https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uHO3EMh06E5MS3TEqSZw9b7XKDiaQxP_BTtVQOatDImZnhG9hwf4Fa-BKxkaglcP1csWjN9FWL9WloKr9_plg-oX0Ieff-J4dvKez4JUI=s0-d) left top repeat-y; } </style>

框框五

<style type="text/css"> xmp.html { color: blue; border: 1px solid #cccccc; background: #FFF url(https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sIGqLlJz1KG05mWp8Ic_WdxU-Q5l3OVexwAiGvDKbVtFgrzDA93qNuMtmaSZpdZRYql9M5DiP8GmRLQQfBvU9TIHJuEYuPCYq05-jH3ik=s0-d) left top repeat-y; } </style>

框框六

<style type="text/css"> xmp.latex { color: #660000; border: 1px solid #cccccc; background: #FFF url(https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tixQQbLatJDt0a6O25IM1z0fed81bXW8Wsb7prc2gxJ2TL4UoiRivJazaB4gVU5l6xPVwAxHsuQvBRpbuVEO2mE7peZn7KyHZhomC7nky1=s0-d) left top repeat-y; } </style>

框框七

<style type="text/css"> xmp.comment { padding: 1.2em; color: #CC00FF; border: 1px solid #cccccc; background: #FFFF66 url(https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_ucRbtHRlRBAM-xIqEQ7pdSh-01HI_13KVoJr4L9_IZnuYJiae6pXn7rQfL-z_lCYsqzCTCzLuinRlK2c6xnvRq4qEPu7rKY8eeFUGTuhTQOM0=s0-d) left top repeat-y; } </style>

框框八

<style type="text/css"> xmp.ref { border: 1px dotted #a88; background: url(https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_ttgx8-XEEpodS6Su027qvu3l05Qxsew-msv2Ncaz-OhQcb1Wgo7y2QI3-UM6PoNHjiG0d3-XwPxBVfG-JlkWigjvyi5Az-vkXHi6ILaRHD1-0K6fJP_Io=s0-d) left top no-repeat; line-height: 1.6em; font-size: 13px; font: normal normal 100% 'Lucida Grande',Georgia,'Trebuchet MS'; } </style>

0 意見

張貼留言