字體：小 中 大 |
|
|
||
| 2006/09/09 22:00:23 | ||
|
１）單擊小色塊 ── 讓訪客自己選用字色。 ２）雙擊小色塊 ── 恢復原來的深灰色字。 ３）下拉式選單 ── 選取底色甚至背景圖。 這是借用網誌風格選擇背景「綠意盎然」作個深色背景的例子，但刻意保留淺色背景的深灰字色，以便秀出：訪客自行「選色看字」的作用來。 <body style="background: #4180c0 url(/community/img/style032/bg.gif) no-repeat; background-attachment: fixed;"> <form style="position: absolute; top: 131px"> <style>.TC {width: 20px; height: 20px; border: 1px solid #cc0000; margin-left: 4px}</style> <input type="button" class="TC" style="background: #4180c0" onClick="mainbody.style.color='#4180c0';" ondblClick="mainbody.style.color='';"> <input type="button" class="TC" style="background: #c6fffe" onClick="mainbody.style.color='#c6fffe';" ondblClick="mainbody.style.color='';"> <input type="button" class="TC" style="background: #ffc9c6" onClick="mainbody.style.color='#ffc9c6';" ondblClick="mainbody.style.color='';"> </form> 標籤 select option 連起來貼，就像標題上列的小色塊「橫陳」型態。 如果想試試，或用在自己的網誌上，只須拷貝一個 input 即可 ── 簡化瀏覽過程和使用效果 ── 因為無需「換色」很多次才看得見文字吧！？ 標籤 select option 分行貼入，會像左列以「縱走」狀態呈現。 補充說明： Ａ）若這篇文章不想改變預設的背景圖，就毋需使用 body 標籤。 Ｂ）用在網頁的話 ， 語法是這樣：onClick="document.bgColor='色標'" 用在 city 網誌寫法要這樣改：mainbody.style.color='色標'" Ｃ）背景圖的顏色不太複雜的話，用一個按鈕應該就夠了。 把 input 改成 .gif 動態 icon 的話，應該不壞！！ Ｄ）若用 select option 來做，語法相同。 此例把 onChange 寫作 body.style.background 就變成換背景色。 試試選點第一個或最後一個選項 □ 可換背景圖。 ？ 但不知道為什麼：no-repeat 和 fixed 失效！ 動動捲軸就知道，和「重新整理」結果不同。 ？ 不寫它們更糟糕：背景失效！ 玩玩，感覺不壞。將就啦∼∼ Ｅ）怎樣才抓得住「區塊 id 名目」改變 color 和 background 呢？ 網誌全頁背景改色換圖：body ── 這是約定俗成的一般規則 網誌文章區塊改內文色：mainbody ── 這是 city.udn 網誌定的名稱 網誌文章區塊改背景色：content ── 也是 city.udn 網誌定的名稱 以上毋需把 id="" 寫在任何地方，因為網誌已設定。想改屬性就要寫入。 以下必須把 id="" 寫在自訂區塊標籤內讓 onclick 或 onchange 能指認。 網誌文章內的自訂 <div id="╳╳">區塊</div> 物件 <font id="╳╳">元素</font> 元件 ── 同檔各種ｎ個，都須自訂不同名稱。 Ｆ）如果不用 input 和 select 物件，就毋需 id 名目，這樣寫就好： <span onclick="this.style.color='#FFFFFF';" ondblclick="this.style.color='';">試 [onclick | ondblclick] 看變化</span>物件「自我控制」用 this 代替 id 毋需為 id="╳╳" 命名傷腦筋。 右邊的幾個模擬塊塊， 結構彷同 city.udn 網誌裡的用法； 形狀小些容易看明白。 區塊的 id 是 BODY1, CONTENT1, abc3, 變綠字的，都在 id="MAINBODY1" 範圍內, 變紫字的， 都以 this 代替 id 而各行其是 。 其中其外共五個紅色小方塊， 效果像按鈕 [ 單擊｜雙擊 ] 可知： 區塊內外的控制和變化狀態。 ■ 細節懶得檢查了！ 繡 花 塊 塊 ，算是完成！ 2006.09.16.23:50 ■預設 BODY 是整頁範圍 預設 span id="MAINBODY" ■ 是指 所貼的文字 行列 ■預設 id="content" 是貼文區塊 ■自訂 id="dd" 則是任意區塊 涵蓋 文章內文 ── 全文以字行為準 <font id="dd1" color="#FFCCFF"> |
||
| ( 網路資訊｜網頁設計 ) |
