Selected Category: 語法、教學 (17)

View Mode: Post List Post Summary
                                   
按鈕語法:
<input style="background: Color1; width: npx; height: npx;" value="Text" onclick="body.style.backgroundColor='Color2'; document.body.style.color='Color3';" type="button" />

background: Color1
==> 設定按鈕的背景顏色(最好與網頁背景色相同),
例如:background: white;  or  background: #FFFFFF;

body.style.backgroundColor='Color2'
==> 設定網頁的背景顏色,與 document.body.style.color 參數可並存或單獨設置,
例如:body.style.backgroundColor='black' or body.style.backgroundColor='#000000'

, , , , ,

Posted by 企鵝 at 痞客邦 PIXNET 留言(0) 引用(0) 人氣()

企鵝碎碎唸 歡迎光臨企鵝碎碎唸~ 企鵝碎碎唸の優格推薦


 ◆ 跑馬燈的基本語法&執行預覽
<marquee>顯示內容</marquee>
歡迎光臨企鵝碎碎唸~

 ◆ 全部屬性的使用說明&執行預覽:
(1) WIDTH="數值"
說明: 設定跑馬燈的寬度(單位:像素/px),若不指定則預設為版面寬度
預覽: 1.不加屬性「WIDTH=" "
歡迎光臨企鵝碎碎唸~
1.
2.設定屬性「
WIDTH="500"
歡迎光臨企鵝碎碎唸~

Posted by 企鵝 at 痞客邦 PIXNET 留言(12) 引用(0) 人氣()

    
 畫面展示:

 Photobucket


 相關介紹:

這是由「GirnarSoft」網站免費分享的一款語法轉換掛件-Html/Javascript Code Converter for xml
您可以利用這款掛件將Html、Java語法中的某些特殊字符,例如:
&、"、<、> …等等
轉換成為XML語法的
&amp;、&quot;、&lt;、&gt; …,非常滴實用喔~

註:不過粉可惜的是…不能夠輸入中文,否則轉換後就會變成亂碼一堆囉…憾 
 

Posted by 企鵝 at 痞客邦 PIXNET 留言(0) 引用(0) 人氣()

    
 畫面展示:


 相關介紹:

您只需先將寫好的HTML語法程式碼複製黏貼到掛件的測試框當中,
接著按下「Test The Code」按鈕,便會另開新視窗顯示如下圖般的執行網頁
非常的方便且實用喔~


Posted by 企鵝 at 痞客邦 PIXNET 留言(2) 引用(0) 人氣()

    
 畫面展示:


 相關介紹:

這是由日本「無料ブログ テンプレート カスタマイズ」網站製作並免費分享的一款語法轉換掛件
您可以利用這款掛件將HTML語法中的某些特殊字符,例如:
&、"、<、> …等等
轉換成為XML語法的
&amp;、&quot;、&lt;、&gt; …,非常滴實用喔~
此外…該網站亦提供網頁模式的轉換器,方便您一次轉換大量的HTML語法
網址 => http://html.seo-search.com/js/html_convert01.html
 

Posted by 企鵝 at 痞客邦 PIXNET 留言(0) 引用(0) 人氣()

    
 畫面展示:

 Photobucket


 相關介紹:

 這款部落格掛件可以幫助您將html語法的tag碼(如:p、body、span、table、ul、ol…等等)轉換成css語法
 您只需在掛件內的選項中設定各項內容(如:文字、顏色、字型、位置、背景、對齊方式…等等),便會在畫面
 下方的空格內
同步顯示出相對應的CSS語法
 這對於想美化自家的網誌版面卻又不太熟悉CSS用法的網友們而言,可以說是非常實用的一款工具唷~~
 另外…當您點擊畫面上方的「CSS GIZMO」按鈕後就會顯示如下圖般的選單,您可以利用這個選單直接到掛件

Posted by 企鵝 at 痞客邦 PIXNET 留言(0) 引用(0) 人氣()

 

畫 面
展 示
 
Photobucket
 
名 稱

用 途
 【部落格小玩意】HTML網頁色碼對照表外掛-Color Code Widget
相 關
介 紹
 這款小玩意可以讓您輕鬆的將任何顏色轉換成為顏色代碼…
 只需用滑鼠點選畫面中的任一顏色,就會在上方的預覽區出現該顏色的代碼囉~
安 裝
方 法
 首先點選「這裡」連結到掛件的展示頁面
 接著到網頁的右側設定畫面尺寸大小和語言,完成後按下「Get Widget」按鈕
 最後再將語法複製到自己的部落格上就可以囉~
 或是直接張貼文章下方的語法亦可。(英語&預設大小)
畫 面

Posted by 企鵝 at 痞客邦 PIXNET 留言(0) 引用(0) 人氣()

 

畫 面展 示
 
Photobucket
 
名 稱用 途  【部落格小玩意】iframe語法框架外掛-Iframer(可內嵌外部網頁) 
相 關介 紹  iframe算是評價蠻兩極化的一個語法標籤,雖然很好用卻也容易引起不必要的侵權糾紛。
 因為它的主要功能就是能將外部網頁內嵌進您的版面之中,而最大的爭議就在這「外部網頁」上面,
 如果是自家的或是已取得授權的狀況下當然沒有任何問題!
 可要是在未取得原主人同意的情況下私自「借用」的話…那問題可就大囉~~
 所以各位網友在使用時可得注意是否已取得來源網頁的合法授權,以免引起不必要的侵權爭議!!
安 裝方 法  首先點選「這裡」連結到網站的說明頁面
 接著在網頁右側設定標題(Text above Iframe)/可不設定、外部網頁的網址 和 畫面尺寸大小。
 設定完成後按下「Get Widget」按鈕並將語法複製到自己的部落格上就可以囉~
畫 面預 覽
 
 
 
執 行語 法
 請參照文章上方「安裝方法」的介紹說明。

 


Posted by 企鵝 at 痞客邦 PIXNET 留言(1) 引用(0) 人氣()

    
企鵝在之前的文章中有介紹兩種常見的部落格下拉式選單,以第一種為例:



只需複製、修改 <option value="網址&_blank"/>部落格名稱 這行語法就可以不斷的增添新的連結
不過還可以再作如下的修改,讓下拉式選單更加的美觀。

<select onchange="jump(this.form)" name="choice" size="1">
語法中增添 id="變數名稱"
修改成為
<select id="變數名稱" onchange="jump(this.form)" name="choice" size="1">

接著到部落格的CSS編輯區中增添如下的CSS語法:

Posted by 企鵝 at 痞客邦 PIXNET 留言(3) 引用(0) 人氣()

《圖示》官網: / 討論區: 相關網頁: 站內其他文章:    

圖片
 
Photobucket
 
名稱 版本 語言 連結 評價
CSS Tab Designer
2.0
英文版

★★★★★
軟體
介紹
 CSS Tab Designer 提供60組直式和橫式的表單範例。
 讓您可以輕易的做出各種美觀的純文字CSS表單,當然也可以隨您喜好自行添加圖片上去。
 完成後按下「
Generate HTML & Images」按鈕輸出成HTML檔案,就可以輕鬆的做出美美
 滴表單來囉~
介 面
說 明
 底下大略介紹一下軟體的操作介面:

Posted by 企鵝 at 痞客邦 PIXNET 留言(1) 引用(0) 人氣()

 

dsf@#$sgvfg
HTML表格(table)的常用語法
xffdg%TYvfdgd
!@#$%^&IKJHGR%YG
 一.基本樣式){:liuyjhfd
<KOI(*&^TGF
 語法:_{}"dweder$%yuihgrd
 <table border="0">
    <caption>標題部份</caption>
   <tbody>
    
<tr>
       <td>內容部份1</td>
      
<td>內容部份2</td>

Posted by 企鵝 at 痞客邦 PIXNET 留言(4) 引用(0) 人氣()

 

 
語法框語法<textarea>常用的幾個參數
 
基本型(無參數)
語法 <textarea>內容</textarea>
預覽
 
加上列數/寬(cols)& 行數/高(rows)
語法 <textarea cols="50" rows="3">內容</textarea>
* 數字大小請自選 *
預覽
 
改變內容字體的大小
語法 <textarea cols="50" rows="3" style="font-size:9px">內容</textarea>
*?px -> 字體大小請自選 *
預覽
 
按下滑鼠左鍵自動反白
語法 <textarea cols="50" rows="3" style="font-size:9px" onfocus="this.select()">內容</textarea>
預覽
 
滑鼠靠近自動反白
語法 <textarea cols="50" rows="3" style="font-size: 9px;" onfocus="this.select()" onmouseover="this.focus()">內容</textarea>
預覽
 
取消捲軸
語法 <textarea cols="50" rows="3" onfocus="this.select()" onmouseover="this.focus()" style="font-size: 9px; overflow:hidden">內容</textarea>
預覽
 
取消或更改邊框寬度、樣式
語法 <textarea cols="50" rows="3" onfocus="this.select()" onmouseover="this.focus()" style="font-size: 9px; overflow:hidden; border:0">內容</textarea>
* 取消邊框:style="border:0" *
* 邊框寬度:style="border:?px 樣式"(? -> 任意數字)*
*邊框樣式:
solid(實線)、dashed(虛線)、double(雙線)、dotted(點線)、

Posted by 企鵝 at 痞客邦 PIXNET 留言(6) 引用(0) 人氣()


HTML語法部份:


範例:
<DIV style="top :20px; left : 8px; position : absolute;" id="TEST">內容</DIV>


其中「top :20px; left : 8px; 」是用來定位物件的位置!(top:與頂部的距離;left:與右側的距離)
ID="XXX" => 可以任意取名,不要重複到現有的就可以了!


CSS語法部份:

Posted by 企鵝 at 痞客邦 PIXNET 留言(1) 引用(0) 人氣()


網路上可以搜尋到不少下拉式選單的寫法…

也有好心的網友寫出選單產生器的網頁,如下面兩個網址:


http://yzcomm.googlepages.com/h004.html

http://home.educities.edu.tw/nkhs9323005/B7.htm


另外也搜尋到簡潔許多的寫法,如下所示:

Posted by 企鵝 at 痞客邦 PIXNET 留言(0) 引用(0) 人氣()

語法:

<textarea cols="50" rows="5">框內的語法描述</textarea>



其中:

cols 是框的「寬度」

rows 是框的「行數」

Posted by 企鵝 at 痞客邦 PIXNET 留言(0) 引用(0) 人氣()

將下面的語法加入即可!
其中紅色的部份改成影片或flash遊戲的網址
width="640" height="480"  => width=寬;height=高


語法:
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,124,0" width="640" height="480"
<param name="bgcolor" value="#000000">
<param name="src" value="xxxxx.swf"><embed scale="noscale" type="application/x-shockwave-flash" src="xxxxx.swf" bgcolor="#000000" width="640" height="480"></object></p>


Posted by 企鵝 at 痞客邦 PIXNET 留言(0) 引用(0) 人氣()

    
 前言:

首先點選「這裡」連結到網站的說明頁面
再將網頁上滴語法複製到自己的部落格上就可以囉~
或是直接張貼文章下方的語法亦可。


 相關介紹:

標題:指定字型樣式
備註:

說明 不 加   粗 體   斜體   標準字體  
語法   <b>企鵝碎碎唸</b>

Posted by 企鵝 at 痞客邦 PIXNET 留言(0) 引用(0) 人氣()