[ 回上一頁 ]
一般的跑馬燈 |
| ||
左右來回彈的跑馬燈 | |||
帶著圖形  與 超連結 一起跑的跑馬燈 | |||
| 哇！好多不一樣的跑馬燈喔~ ^.^ 跑馬燈可以有很多變化，只要你了解一些關於跑馬燈的HTML語言... | |||
跑馬燈的基楚HTML： | 編輯網頁，打開原始碼
| ||
| |||
| HTML標籤語言通常是配對的， | |||
| 跑馬燈是以 結尾， | |||
| 在標籤語言中間所包含的就是要〝跑〞的東西。 | |||
| 註 ：HTML中『 < 』 與 『 > 』符號，是鍵盤上的〝大於〞、〝 小於〞 那個符號， 不是注音符號中的 括弧 喔! | |||
| 屬性 | |
| 跑馬燈不只只能向左跑，還可以改變 方向、速度... 還有設定範圍的的寬高，只要在標籤中加上「屬性」就可控制。 | |
| 加在那兒？ | |
| > 要跑的文字 | |
| 註：加屬性前記得按一格「空白鍵」， 〝空格〞 是「屬性」與「屬性」間的分段，你可以任意組合使用。 | |
屬 性 一 覽 表 | ||||
屬 性 | 其 他 說 明 | 範 例 | 範 例 的 完 整 語 法 | |
| 對齊 align="top" | 齊上 top 居中 midden 齊下 botton | |||
| 方向 direction="up" | 左 left 右 right 上 up 下 dun | 慢慢向上跑 | height="50" scrollamount="1"> 要跑的文字 | |
| 行為 behavior="altemate" | 左右來回 alternate 進入後停止slide 反覆 scroll | 左右來回彈 | > 要跑的文字 | |
進入後停止 | > 要跑的文字 | |||
| (備註：一般反覆scroll的指令不用寫，因為那是預設) | ||||
| 高 height="高的數字" | (跑馬燈區域的高度) | |||
寬 width="寬的數字" | (跑馬燈區域的寬度) | |||
| 速度 scrollamount="1" | 中間的數字是 「滑動步伐的寬」 | 步伐寬1 | 步伐寬5 | > 要跑的文字 |
| > 要跑的文字 | ||||
| 背景色 bgcolor="#0022FF" | "#0022FF"是HTML色碼，兩個 兩個為一組，由00~99,AA~FF所組成，代表紅R、綠G、藍B， 數字越小越深，數字越大越亮。 例：紅 #FF0000，綠 #00FF00，藍 #0000FF，黃 #FFFF00，紫 #9966CC，....。 | |||
| 圖片也可以跟著跑 | |||
| 在跑馬燈 標籤開始 至結尾，中間所包含的物件 都會跟著跑，包含文字、圖形、超連結... | |||
| 範例： | 圖 與 超連結 都可以夾帶一起跑 | ||
| 寫法： | |||
| |||
| 【說明】 | |||
| 註1. 顯示圖形的HTML是： | |||
例：我要顯示這張小圖→ | |||
| 假設我已把這張叫做「INDEX_LOGOME2.GIF」的圖上傳 放到我的http://www.liu-may.com網站空間的「img」裡， | |||
| 所以圖的絕對路徑位置是「http://www.liu-may.com/img/INDEX_LOGOME2.GIF」 | |||
| 那麼要顯示這張圖的HTML寫法就是↓ | |||
 | |||
| 註2. 超連結的HTML是：名稱 | |||
| target="_blank" 表示超連結開啟方式是「開在新視窗 」 | |||
| 例：我想要超連結到「奇摩」，並且開在新視窗，而奇摩的網址是「http://tw.yahoo.com」 | |||
| 那麼這段超連結的HTML寫法是： | |||
| 奇摩 | |||
| 滑鼠移入就會停止的跑馬燈 | ||
範例： |
| |
| 寫法： | ||
| 【說明】 | ||
| onMouseOver="this.stop()" 表示滑鼠移入〝範圍區〞既「停止」 | ||
| onMouseOut="this.start()" 表示滑鼠離開便「跑動」 | ||
| 在stop與start後面的『 ( 』與『 ) 』，是鍵盤上數字健9與0上方的那個括弧符號，不是數字〝零〞喲 ^.^ | ||
| PS：以上跑馬燈 整段HTML要改的只有〝要跑的文字〞 ^_^ | ||
本著作係採用創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣 授權條款授權.
控制鈕及表單
表單的標記為 或 ，表單之內必須放置控制鈕 ，可以設計成單鍵按鈕、按鈕表單、文字方塊、密碼、單選選單、多選選單、及捲軸選單等。 其功能為提供使用者輸入資料，如問卷或投票，以增進網頁互動的能力。 其語法如下：
表單所收集到的資料，上傳到伺服器後，通常以 CGI 程式或 ASP處理，詳見 ASP 語法；或是若無伺服器架設時，也可以傳送到特定的電子郵址。
單鍵按鈕
最常見的控制鈕為單鍵按鈕 (button)，單鍵按鈕的功能，可以是簡單的連結圖片或是較複雜的連結到資料庫。其語法為指定控制鈕 的 type 屬性即可。單鍵按鈕的 相關屬性如下：
| 屬 性 | 用 途 | 屬 性 值 |
| type | 單鍵按鈕的類型 | button/ submit/ reset |
| name | 單鍵按鈕代號，將於 ASP 程式使用 | (自訂) |
| value | 單鍵按鈕上呈現的文字 | (自訂) |
| size | 單鍵按鈕寬度 | (自訂) |
| style="..." | 單鍵按鈕文字或邊框的設定 | (自訂) |
至於按鈕文字 (text) 及按鈕邊框 (border) 的設定，則可使用 style="..."，有關 style 的設定請參閱 CSS 樣式表的「文字的特效」與「表格的特效」二節。常見的單鍵按鈕使用方式如下：
| 用 途 | HTML 語法 | 實 例 |
| 採用預設值的單鍵按鈕 ，例如： 按鈕長度與其文字長度有關。 | 預設的單鍵按鈕 | |
| 改變形狀的按鈕，例如： | 不同造型 的按鈕 | |
| 瀏覽檔案 | 開啟舊檔 | |
| 重設按鈕，按下後所有選取的東西都會清除 | 重設按鈕 | |
| 送出按鈕，按下後所有選取的東西都會送出 | 送出按鈕 | |
| 有圖片的在按鈕上 | 圖片按鈕 | |
| 圖片即按鈕 | 圖片按鈕 |
按鈕表單
| 用 途 | HTML 語法 | 實 例 |
| 空白複選單 選項一 選項二 選項三 | 框外文字 | 複選單 |
| 預設為已勾選的複選單 選項一 選項二 選項三 | 框外文字 | 有預設值的勾選單 |
| 單選單，只能勾選一項目，且選了無法刪除。注意：所有的 Name 必需相同 選項一 選項二 選項三 | 框外文字 | 單選單 |
| 表單樣式變化 選項一 選項二 選項三 | 框外文字 |
打勾的清單
文字方塊表單
| 用途 | HTML語法 | 實例 |
| 下拉式選單 選項一 選項二 選項三 觀看全部選項則使用右側箭頭，螢幕每次只列出一項，且為預設選項。 預設選項即有加上 selected的選項，點選後螢幕呈現點選項 | 框外文字 | 下拉式選單 |
| 全列式選單 第一項 第二項 第三項 全部選項均列在螢幕上，預設選項出現底色(high-lighted)。 點選後，換成點選項呈底色 | 框外文字 | 全列式勾選單 |
| 全列式可複選選單，複選時需按滑鼠左鍵往下拖曳或同時按control及滑鼠左鍵 第一項 第二項 第三項 | 框外文字 | 可多選的全列勾選單 |
空白框
| 用途 | HTML語法 | 實例 |
| 可供填寫的空白框 | 空白框 | |
| 建立有預設文字的框 | 有預設文字的框 | |
| 建立可掩蓋密碼的框 | 輸入密碼 | |
| 建立有捲軸的框 | 建議事項 個人資料 |
資料上傳
如果想將 form 的資料上傳，最簡單的方法就是利用 e-mail 來送出。但是 e-mail 資料無法處理大量資料，且無法執行進一步的分析或互動，若想讓 web 伺服器能自動處理 form 的輸入值，並迅速回報處理結果，則需 CGI 程式或 ASP 程式。詳見 ASP 動態網頁的「Request 語法」。
然而無論是 CGI 或 ASP 程式，要使選單具有上傳的功能，則需使用 的屬性。 的屬性如下：
| 屬 性 | 用 途 | 屬 性 值 |
| action | 資料上傳的位址 | (自訂) |
| method | 上傳資料的方式 | post 或 get |
| name | 表單的代號 | (自訂) |
若想在資料送出前做一些確認工作的話，則可以使用 JavaScript 程式，請參考 JavaScript 程式之 條件式語法。常見的資料上傳方式如下：
| 用 途 | HTML 語法 | 實 例 |
| 將表單的資料上傳到某一電子郵址。 | 以電子郵件處理滿意度問卷 | |
| 將表單的資料上傳到某一電子郵址，並預設電子郵件標題。 | ||
| 使用 ASP 程式擷取或分析上傳表單的資料。 | 以 ASP 程式處理滿意度問卷 | |
| 使用 ASP 程式擷取或分析上傳表單的資料，上傳內容將在網址顯現。 | ||
| 使用 CGI 程式擷取或分析上傳表單的資料。 |
| © 2003 版權為柴惠敏所有，如需引 |
本著作係採用創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣 授權條款授權.
JavaScript 教學
[到頁頂] [首頁] [速查表] |
本著作係採用創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣 授權條款授權.
| ★目前位置→第01章。何謂HTML | ||||
| 01.何謂Html | 02.基本架構 | 03.常用標籤 | 04.字體大小 | 05.字的變化 |
| 06.項目格式 | 07.走馬燈 | 08.超連結 | 09.貼圖標籤 | 10.圖片連結 |
| 11.表格運用 | 12.插入音樂 | 13.body設定 | 14.分割視窗 | 15.製作表單 |
| 在您想要擁有一個屬於自己的網站時，首先您必須先了解 HTML 是什麼，其全文為 HyperText Markup Language ，而 HTML 是根據 SGML 發展而成的，至於 SGML 是什麼，這不是我們的主題，簡單的說 HTML 它是一種描述文件結構的語法。
HTML它不是WYSIWYG『所見即所得』，還有當您在編寫您的網頁時所用到的每個元件並非會全部產生其作用，看來 HTML的限制有很多，不過 HTML是最初學的網頁設計了，或許有人會說，我使用可以即看即所得的軟體來設計不就好了，我還那麼痛苦的來學這個做什麼！是沒錯，那些軟體雖然簡單易學，不過總覺得格式差強人意，很難得到自己想要的格式，就算不介意那怪怪的格式，好吧！遇到問題時，一看原始檔，哇！這是什麼東東丫，再言之，柳宿討厭用那種軟體寫網頁還有一個原因，就是它很雞婆，沒事會幫你加一大堆跟本沒用的指令標籤進去，表面上看起來沒事，但你知道嗎，那可能就是拖慢你網頁載入速度的原因之一了，看來要寫出個網頁好像沒想像中簡單的樣子厚，不過先別放棄咩，還是學好這個吧！ 說了那麼多它的壞處還要您去學它有點說不過去，好吧！柳宿就很勉強的擠出它的一些好處好了，嗯～HTML 所編寫出來的網頁大至上檔案都很小很小，所以能很快速 的於網路傳送且快速的顯示在大家的面前的，且它是一種跨平台和裝置獨立性 的語言，只要您有一個瀏覽器就可以在任何平台上閱覽出來，它允許瀏覽器可以做格式上的決定，而語言本身就有很高的移植性，雖然它是一種標示語言，不過其本身是相當小且易於學習的，最重要的是當你學會了寫一般檔頁後，我想你還會想進階去學寫程式，凡舉Perl CGI、ASP或者當紅炸子雞PHP，不管是什麼都要有HTML語法的基礎，不然你會比喝巴拉松還痛苦，真得。至於背不背語法嗎？嗯～也不用去記很多，常用的用久了您自然就記得了，那些怪怪的、不常用的，也沒差啦！要背就背，不背就寫起來留著，下次看了就會懂那語法是作什麼的了，且用它來編寫還有個好處，不用擔心沒有FP2000或Netscape設計師等即看即所等的網頁編寫軟體，當然也有些專寫HTML的軟體，例如HTMLabc、CuteHTML或UltraEdit等，再看看您的電腦裡，很好～您都沒有吧！沒關係啦！您的電腦總有Windows的記事本吧！沒錯～就是附屬應用程式中的那個記事本啦，柳宿的所有網頁都是用記事本完成的，當然也可以用WordPad，如果你高興要用DOS下的漢書He5，在Unix下用vi等等都可以，當然我們常用的環境裡就是拿記事本來用嚕^^一起努力吧！ |
HTML語法測試區
| HTML語法練習 |
|
|
本著作係採用創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣 授權條款授權.
百花齊放新版CSS 《新版CSS架構圖解》 《各區塊名稱圖解》
/* CSS Document */
/*主體*/
html{ 屬性↓ 捲軸顏色↓ 《捲軸顏色生成器》
scrollbar-face-color:#EDF8FA; ←拉頁框主顏色
scrollbar-highlight-color:#A7DCEA; ←拉頁內框亮面
scrollbar-shadow-color:#A7DCEA; ←拉頁內框暗面
scrollbar-3Dlight-color:#EDF8FA; ←拉頁框立體亮面色
scrollbar-arrow-color:#A7DCEA; ←拉頁框箭頭色
scroll-track-color:#EDF8FA; ←拉頁框背景色
scroll-darkshadow-color:#EDF8FA; ←拉頁框立體暗面色
/*scrollbar-Base-Color:*/ ←拉頁框基底顏色
}
body{
margin:0px 0px 0px 0px; ←四周邊界距離 （上、右、下、左）
text-align: center; ←文字顯示置：左，中，右 基底背景圖↓（/*←不執行→*/）
/* background-image:url(http://s.blog.xuite.net/_image/skin/background/50/blogBg_1.jpg); */
background-attachment:fixed; ←背景圖不捲動 scroll←背景圖捲動
background-repeat:repeat; ←橫 直 重複排列(填滿) no-repeat←不重複排列
background-color:#FFFFFF; ←背景顏色
}
/*連結*/
A {
color: #00306B; ←文字顏色
text-decoration: none; ←（連結無底線）
}
A:link {
color:#004C99; ←連結的文字顏色
text-decoration: none; ←（連結無底線）
}
A:visited {
color: #00306B; ←瀏覽過的連結文字顏色
text-decoration: none; ←（連結無底線）
}
A:active {
color: #00479F; ←使用中的連結文字顏色
text-decoration: none; ←（連結無底線）
}
A:hover {
color: #00479F; ←滑鼠畫過的連結文字顏色
text-decoration: none; ←（連結無底線）
}
/*定位框*/
#container {
position:relative; ←相對原本的位置
text-align: left; /*width:100%;*/ ←文字顯示置：左，中，右 總體頁面 寬度↓
behavior:expression( this.style.width = (document.documentElement.offsetWidth<970)?"970px":"100%");
min-width:970px; ←總體頁面 寬度
padding:0px 0px 0px 0px; ←四周間距 （上、右、下、左）
margin:0px auto; ←邊界距離 自動調整 基底背景圖↓
background-image:url(http://s.blog.xuite.net/_image/skin/background/50/blogBg_1.jpg);
background-repeat:no-repeat; ←背景圖不重複排列
}
/*檔頭*/ 《檔頭圖解》
#banner{
margin: 0px 5px 0px 5px; ←檔頭四周邊界距離 （上、右、下、左）
padding: 0px; ←間距
height: 200px; ←檔頭高度
}
/*左欄*/ 《左欄圖解》
#linksLeft{
position:absolute; ←絕對位置
left:0px; ←靠左
width: 205px; ←欄位寬度
margin: 5px; ←離邊距離
}
/*右欄*/ 《右欄圖解》
#linksRight{
position:absolute; ←絕對位置
right:0px; ←靠右
width: 205px; ←欄位寬度
margin: 5px; ←離邊距離
}
/*中間欄*/ 《中間欄圖解》
#mid{
position:relative; ←相對原本的位置
margin: 0px 215px 0px 215px; ←四周邊界距離 （上、右、下、左）
padding: 5px 5px 5px 5px; ←四周間距 （上、右、下、左）
}
/*檔尾*/ 《檔尾圖解》
#footer{
clear: both; ←標籤兩邊都不能有任何文字
text-align:center; ←文字置中
font-size: 13px; ←字體大小
color:#00306B; ←文字顏色
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; ←指定的文字字型
line-height: 16px; ←樣式值 絕對行距
}
/*欄位名稱*/ 《欄位名稱 內容 圖解》
.sidetitle{
padding:2px; ←間距
border:#BDF2FF 1px solid; ←框線 顏色 大小
background:; ←背景顏色（無）
font-weight:normal; ←標準的 欄位背景圖↓
background-image:url(http://s.blog.xuite.net/_image/skin/windows/50/blog011_2.gif);
color:#004C99; ←文字顏色
font-family:Verdana, Arial, Helvetica, sans-serif; ←指定的文字字型
letter-spacing:0.1em; ←字元間距
font-size:15px; ←字體大小
margin-top:5px; ←離上邊距離
}
/*欄位內容*/
.side{
background:#ffffff; ←背景顏色
border:#BDF2FF 1px solid; ←框線 顏色 大小
font-size:12px; ←字體大小
font-weight:normal; ←標準的
line-height:140%; ←字型樣式 百分比
font-family:Verdana, Arial, Helvetica, sans-serif; ←指定文字字型
padding:4px; ←文字間距
}
.side li{
margin-left: 20px; ←項目符號左邊距離
list-style-position: outside; ←項目符號樣式
}
/*空白*/
.spacer{
clear:both; ←兩邊都不能有任何文字
}
/******************************************/
/*檔頭class*/
/*日誌名稱*/
.blogname{
font-size: 22px; ←字體大小
font-weight: bold; ←粗體的字形
color: #CC003A; ←文字顏色
padding-left:10px; ←左間距
padding-top:100px; ←離上間距
}
/*今日心情*/
.blogemotion{
/*visibility:hidden;*/ ←預設值 （ 改成→ display:none; 為不顯示）
} （/* ←前後有這個符號 這裡面的東東為不執行→ */）
/*加入最愛*/
.blogfavo{
/*visibility:hidden;*/ ←同上 （ visibility:hidden 為隱藏物件）
} （/* ← 前後符號刪除為執行 → */）
/*日誌描述*/
.description{
font-size: 15px; ←字體大小
color: #99CC00; ←文字顏色
padding-left:10px; ←左間距
}
/*選單列*/
.menulist{
padding-top:5px; ←離上間距
width:100%; ←寬度
}
/*選單*/
.menu{
padding-top:5px; ←離上間距
float:right; ←靠右
padding-right:80px; ←右間距
}
/*Logo*/
.logo{
visibility:visible; ←顯示物件
}
/******************************************/
/*中間欄位class*/
/*文章外框*/
#content{
padding: 5px; ←間距
margin: 5px; ←邊界距離
background-color:#ffffff; ←背景顏色
border: #BDF2FF 5px solid; ←框線 顏色 大小
}
/*文章標題列*/
.title{
width:100%; ←寬度
height:25px;
background:#E1F4FF; ←背景顏色
padding-top:5px; ←離上間距
}
/*文章標題名稱*/
span.titlename{
font-size:15px; ←字體大小
color:#00479F; ←文字顏色
font-weight:normal; ←標準的
padding-left:5px; ←左間距
}
/*文章日期*/
span.titledate{
float:right; ←靠右
height:25px; ←高度
padding-right:10px; ←右間距
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; ←指定的文字字型
font-size: 11px; ←字體大小
color: #00479F; ←文字顏色
}
/*文章評價列*/
.blogrank{
width:100%; ←寬度
line-height:200%; ←字型樣式百分比
margin-top:10px; ←離上邊距離
}
/*文章瀏覽數*/
span.counter{
float:right; ←靠右
margin-top:15px; ←離上邊距離
font-size: 12px; ←字體大小
color: #999999; ←文字顏色
}
/*文章瀏覽數項目符號*/
span.counter li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCounter.gif); ←符號圖示
}
/*文章分類*/
span.category{
float:right; ←靠右
margin-top:15px; ←離上邊距離
}
/*文章分類項目符號*/
span.category li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletContentArticle.gif);←符號圖示
}
/*文章主體*/
.blogbody{
word-wrap: break-word; ←視窗邊界換行，僅 IE 支援
width:100%; ←寬度
}
/*作者列*/
.posted{
width:100%; ←寬度
text-align:right; ←物件文字置右
}
/*上下文章*/
.selectbar{
width:100%; ←寬度
text-align:center; ←物件置中
}
/*引用列*/
.trackbacktitle{
position:relative; ←相對原本的位置
width:100%; ←寬度
margin-top:20px; ←離上邊距離
margin-bottom:5px; ←對齊元件下方 (不限文字或圖片)
border-top:1px dotted #cccccc;
border-bottom:1px dotted #cccccc;
font-size: 12px; ←字體大小
color: #CC6600; ←文字顏色
height:24px; ←高度
background:#FEFAED; ←背景顏色
}
/*引用網址*/
.trackbackurl{
width:100%; ←寬度
background:#F2F2F2; ←背景顏色
padding-top:20px; ←離上間距
padding-bottom:20px; ←下方間距
text-indent:10px; ←樣式值
}
/*引用日期*/
.trackbackdate{
width:100%; ←寬度
text-align:right; ←物件文字置右
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; ←指定的文字字型
font-size: 11px; ←字體大小
color: #7A75B9; ←文字顏色
}
/*引用內容*/
.trackbackcontent{
width:100%; ←寬度
line-height:150%; ←字型樣式百分比
margin-top:5px; ←離上邊距離
border-bottom:1px dotted #cccccc; ←框線（點）顏色
}
/*留言列*/
.comment{
width:100%; ←寬度
border-top:1px dotted #cccccc; ←上框線（點）顏色
border-bottom:1px dotted #cccccc; ←框線（點）顏色
font-size: 12px; ←字體大小
color: #00A1CE; ←文字顏色
height:24px; ←高度
margin-top:20px; ←離上邊距離
padding-top:5px; ←離上間距
padding-bottom:5px; ←下方間距
background:#FEFAED; ←背景顏色
}
/*留言名稱*/
span.commenttitle{
}
/*留言名稱項目符號*/
span.commenttitle li{
list-style-image:url(http://s.blog.xuite.net/_image/bulletMessageList.gif); ←符號圖示
}
/*留言按鈕*/
span.commentbutton{
float:right; ←靠右
}
/*留言作者列*/
.author{
width:100%; ←寬度
}
/*留言作者名稱*/
span.authorname{
}
/*留言日期*/
span.commentdate{
float:right; ←靠右
text-align:right; ←物件文字置右
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; ←指定的文字字型
font-size: 11px; ←字體大小
color: #7A75B9; ←文字顏色
}
/*留言內容*/
.commenttext{
word-wrap: break-word; ←視窗邊界換行，僅 IE 支援
width:100%; ←寬度
margin-top:10px; ←離上邊距離
margin-bottom:10px; ←對齊元件下方
}
/*留言編輯按鈕*/
.commentedit{
width:100%; ←寬度
border-bottom:1px dotted #cccccc; ←框線 顏色
}
/*留言者信箱*/
span.email{
}
/******************************************/
/*左欄class*/
/*關於我*/
.avatar{ /* 2006-05-09 修改 */
background:#FFFFFF; ←背景顏色
border:#BDF2FF 1px solid; ←框線 顏色 大小
font-size:12px; ←字體大小
font-weight:normal; ←標準的
line-height:140%; ←字型樣式百分比
font-family:Verdana, Arial, Helvetica, sans-serif; ←指定的文字字型
padding:5px; ←間距
}
/*照片*/
.avatarPhoto{
text-align:center; ←物件（照片）置中
}
/*帳號*/
.avatarID{
}
/*我的描述*/
.avatarDesciption{
/*visibility:hidden;*/ ←預設值（/*不執行*/）
}
/*關於我按鈕*/
.avatarbutton{
text-align: right; ←物件（按鈕）置右
}
/*文章分類*/
.categoryTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCategory.gif); ←符號圖示
}
.categoryTitle{
}
.categorySide li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.categorySide{
}
/*日曆*/
.calendarTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCalendar.gif); ←符號圖示
}
.calendarTitle{
}
.calendarSide li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.calendarSide{
}
/*日曆table*/
.calMonth{
width:95%; ←寬度
}
/*日曆首列*/
.calMonthNav{
}
/*日曆上個月*/
.calMonthBackward{
}
/*日曆目前顯示年月*/
.calMonthCurrent{
font-size: 12px; ←字體大小
font-weight: bold; ←粗體的字形
color: #000000; ←文字顏色
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; ←指定的文字字型
}
/*日曆下個月*/
.calMonthForward{
color: #FF0000; ←顏色
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; ←指定的文字字型
font-size: 12px; ←字體大小
}
/*日曆星期列*/
.calMonthHeader{
}
/*日曆日欄*/
.calMonthDay{
font-size: 10px; ←字體大小
color: #999999; ←文字顏色
text-align:center; ←物件置中
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; ←指定的文字字型
}
/*日曆今日日期*/
.calMonthToday{
font-size: 11px; ←字體大小
text-align:center; ←物件置中
}
/*日曆假日日期*/
.calholiday{
font-size: 11px; ←字體大小
color: #FF3300; ←文字顏色
text-align:center; ←物件置中
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; ←指定的文字字型
}
.calendarbutton{
text-align: right; ←物件置右
}
/*搜尋文章*/
.searchTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletSearch.gif); ←符號圖示
}
.searchTitle{
}
.searchSide{
text-align:center; ←物件置中
}
.searchbutton{
text-align:center; ←物件置中
padding:2px; ←間距
}
/*我的哈拉室*/
.chatTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletChat.gif); ←符號圖示
}
.chatTitle{
}
.chatSide{
}
/*已建立的日誌*/
.bloglistTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletBlogList.gif); ←符號圖示
}
.bloglistTitle{
}
.bloglistSide li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.bloglistSide{
}
/*訂閱電子報*/
.epaperTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletEpaper.gif); ←符號圖示
}
.epaperTitle{
}
.epaperSide{
text-align:center; ←物件置中
}
.epaperbutton{
text-align:center; ←物件置中
padding:2px; ←間距
}
/*自由欄位*/
.customTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCustom.gif); ←符號圖示
}
.customTitle{
}
.customSide{
}
/*日誌使用資源*/
.resourceTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletBlogResource.gif);←符號圖示
}
.resourceTitle{
}
.resourceSide{
text-align:center; ←物件置中
}
/*留言塗鴉版*/
.paintTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletPaint.gif); ←符號圖示
}
.paintTitle{
}
.paintSide{
text-align:center; ←物件置中
}
/******************************************/
/*右欄class*/
/*背景音樂*/
.musicTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletMusicBox.gif); ←符號圖示
}
.musicTitle{
}
.musicSide{
}
.musicbutton{
text-align:left; ←物件置左
padding:2px; ←間距
}
/*最新文章*/
.articleTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletArticleList.gif);←符號圖示
}
.articleTitle{
}
.articleSide li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.articleSide{
}
/*最新留言*/
.messageTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletMessageList.gif);←符號圖示
}
.messageTitle{
}
.messageSide{
text-indent: -3ex; ←樣式值
margin-left: 3ex; ←項目符號左邊距離
}
.date {
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; ←指定的文字字型
font-size: 11px; ←字體大小
color: #7A75B9; ←文字顏色
}
/*參觀人次統計*/
.countTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCounter.gif); ←符號圖示
}
.countTitle{
}
.countSide{
}
/*我的訂閱*/
.rssrollTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletRssRoll.gif); ←符號圖示
}
.rssrollTitle{
}
.rssrollSide li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.rssrollSide{
}
.backbtn li{
list-style-image:url(http://s.blog.xuite.net/_image/blog038.gif); ←符號圖示
}
.backbtn{
text-align:right; ←物件文字置右
}
.morebtn li{
list-style-image:url(http://s.blog.xuite.net/_image/blog037.gif); ←符號圖示
}
.morebtn{
text-align:right; ←物件文字置右
}
/*日誌評價*/
.rankTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletRank.gif); ←符號圖示
}
.rankTitle{
}
.rankSide{
}
/*已建立的相簿*/
.albumTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletAlbum.gif); ←符號圖示
}
.albumTitle{
}
.albumSide{
}
/*最愛連結*/
.linkTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletLink.gif); ←符號圖示
}
.linkTitle{
}
.linkSide li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.linkSide{
}
/*個人項目---- 2006-5-11 Modify*/
.personallink{
display: block; ←資料內容分段顯示
width:190px; ←寬度
margin:0px 0px 0px 0px; ←四周邊界距離 （上、右、下、左）
}
/*關於我*/
.plink li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.plink{
}
/*我的相簿*/
.pphoto li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.pphoto{
}
/*加入好友*/
.pfriend li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.pfriend{
}
/*我的留言板*/
.pboard li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.pboard{
}
/*文章分類---- 2006-5-12 Modify*/
.pTitle li{
list-style-image:url(http://s.blog.xuite.net/_image/bulletPersonal.gif); ←符號圖示
}
.pTitle{
}
/*欄位名稱---- 2006-5-12 Modify*/
.personaltitle{
padding:2px; ←間距
border:#BDF2FF 1px solid; ←框線 顏色 大小
background:;
font-weight:normal; ←標準的 欄位背景圖↓
background-image:url(http://s.blog.xuite.net/_image/skin/windows/50/blog011_2.gif);
color:#004C99;
font-family:Verdana, Arial, Helvetica, sans-serif; ←指定的文字字型
letter-spacing:0.1em; ←字元間距
font-size:15px; ←字體大小
margin-top:5px; ←離上邊距離
}
/* Applied by Chyuko@Xuite.net */
/*我的影音*/
.pvlog ul{
list-style-type:none; ←不編號
margin:0 0px; ←邊界距離
padding:0px 2px 0px 20px; ←四周間距 （上、右、下、左）
word-wrap: break-word; ←視窗邊界換行，僅 IE 支援
display: block; ←資料內容分段顯示
float:left; ←文繞圖(圖在左) 【FLOAT: right←文繞圖(圖在右)】
}
.pvlog li{
padding:0 0 0 0px; ←四周間距 （上、右、下、左）
margin:0px 0px 0px 0px; ←四周邊界距離 （上、右、下、左）
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif); ←符號圖示
}
.pboard{
padding:0 0 0 0px; ←四周間距 （上、右、下、左）
WIDTH: 90px; ←寬度
}
/*下方換頁-----2007-04-02*/
.page {
margin-top: 10px; ←離上邊距離
margin-bottom: 10px; ←對齊元件下方
font-size: 12px; ←字體大小
color: #00479F; ←文字顏色
line-height: 24px; ←樣式值 絕對行距
vertical-align:middle; ←元件的中點對齊
}
.page a:link, .page a:visited, .page a:active {
font-size: 12px; ←字體大小
color: #004C99; ←文字顏色
line-height: 24px; ←樣式值 絕對行距
text-decoration: none; ←連結不顯示底線
}
.page a:hover {
font-size: 12px; ←字體大小
color: #00479F; ←文字顏色
line-height: 24px; ←樣式值 絕對行距
text-decoration: underline; ←滑鼠畫過連結 顯示底線
}
說明：
top上 right右 bottom下 lefty左 center中 width寬 height高
padding ←間距 （物件文字 與框之間的距離）
margin ←邊距 （欄框(表格) 向外的距離）
margin-top: ?px; /*上邊界值
margin-right: ?px; /*右邊界值
margin-bottom: ?px; /*下邊界值
margin-left: ?px; /*左邊界值
display 屬性值
display:none ←隱藏不顯示任何資料內容
display:lnline ←將資料顯示再同一行不分段
display:block ←將資料內容分段顯示
visibility:hidden ←為隱藏物件（/*前後有/**/為不執行*/）
CSS串聯樣式表一覽
list-style-type:none; /*不編號
list-style-type:decimal; /*阿拉伯數字
list-style-type:lower-roman; /*小寫羅馬數字
list-style-type:upper-roman; /*大寫羅馬數字
list-style-type:lower-alpha; /*小寫英文字母
list-style-type:upper-alpha; /*大寫英文字母
list-style-type:disc; /*實心圓形符號
list-style-type:circle; /*空心圓形符號
list-style-type:square; /*實心方形符號
list-style-image:url(dot.gif); /*圖片式符號
list-style-position:outside; /*凸排
list-style-position:inside; /*縮排
框線
border-bottom: ?px solid 色碼; /*下面的框線
border-top: ?px solid 色碼; /*上面的框線
border-left: ?px solid 色碼; /*左邊的框線
border-right: ?px solid 色碼; /*右邊的框線
一般常用線條
solid(實心線)、dotted(點)、dashed(短線)、double(雙實線)
立體效果線條
groove(立體內凸框)、ridge(立體浮凸框)、inset(凹框)、outset(凸框)
連結
text-decoration:
none(連結無底線)、underline(連結加底線)、overline(連結加頂線)、
linethrough(連結加刪除線)、blink(連結閃爍)
引用 http://blog.xuite.net/piyu777/tw/12038082
本著作係採用創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣 授權條款授權.
| CSS由來 CSS是「Cascading Style Sheets」的縮寫，Cascading是串接、連接之意；Style則是風格、款式之意；Sheets則是一頁紙、表的意思。 所以呢，要以中文來解釋CSS的話呢，您可以稱之為「串接樣式表」。 很奇怪的一串名詞是否？其實，當您CSS用習慣後，您就會發覺它會這樣被稱呼還蠻貼切的。 CSS的作用 CSS能夠使你的網頁更整齊，它可控制網頁中的字型.字體.大小.連結.表格.圖片....等。 需要的工具 編輯CSS不需要任何工具，只要你有記事本就可以編輯了，當然有更好的網頁編輯軟體也是一各相當不錯的幫手。 |
|
插 入 c s s |
| 插入CSS語法 是告訴瀏覽器，從此段開始都為CSS語法，而要插入CSS語法， 都在網頁中的..和..之間 例如以下方式 .....網頁內容 外部呼叫指令 要在網頁插入CSS也可以用到外部呼叫的指令 匯入指令 以另外一種方式，也就是直接將CSS檔案匯入在網頁中。 |
|
網 頁 標 籤 |
|
應 用 連 結 |
| 一般超連結 此為一般超連結的顏色，色碼可依自己喜好調整。 碰觸超連結 碰觸超連結，也就是當你的滑鼠游標移動到超連結上以後，他會產生何種顏色，以下色碼可依自己喜好調整。 執行超連結 執行超連結，就是你的滑鼠按下超連結以後，他會產生何種顏色，以下色碼可依自己喜好調整。 執行後的超連結 執行後的超連結，一個已經按過的連結，他所產生的顏色，色碼可依自己喜好調整。 |
|
宣 告 方 法 |
| 宣告方法 所謂的宣告方法，其實就是設定該標籤的定義內容，而宣告當然以網頁標籤來作宣告囉， 例如....我想要我的網頁中的文字大小為9pt 而顏色色碼要為 #000000 但是此時...我還沒有說明我要定義哪種標籤， 如果我選擇的標籤為 table table ← 這是什麼呢？ table它是表格的開頭 如果我要宣告他所有文字大小都為 9pt 色碼為 #000000 的話 我可以如下方式寫 第一次看到這個也許不知道是什麼意思 其實他的意思很簡單 也就是網頁中 都為 9pt大小 而顏色代碼為 #000000 的意思 如果上述還不懂，就拿以下的簡單表格表單來作示範，
上面這段簡單的表格表單就是再歡迎光臨的外圍會有一個邊框表格， 而若我用了上述的CSS定義宣告table的文字大小 簡單的說..就是歡迎光臨這四個字會變成大小9pt 顏色代碼為 #000000的意思 看到這裡如果懂了，那麼你對CSS的了解又更深一步囉。 |
|
多 項 定 義 |
| 多項定義 多項定義呢，也就是如果我有許多設定要再同一個標籤中， 例如我以 body 這標籤來作定義， 我要和包起來的文字大小.顏色.字型統一改變的話， 而我要的大小為9pt 色碼為 #333333 字型為 新細明體 那麼寫法如下方式： 在這裡要注意的是..!! 在CSS區分各種標籤定義時，都要以 ; 來作區分 而被定義的內容都要以{ 跟 }來作才行 簡單的說，就是這樣子： |
|
分 項 宣 告 |
| 分項宣告 分項宣告就是網頁中同一種標籤，但卻分成兩次來宣告，例如以下： 如果各位對前面的幾篇教學都有認真看的話 這裡應該都難不倒各位了 也就是被和包住的文字大小為9pt 而顏色色碼為#000000 那麼在這裡的分項宣告，其實就以上面的寫法， 他對了body標籤做了兩次的宣告 但其實所得到的結果還是跟以下的寫法一樣的： 所謂的分項宣告 就是同一種網頁標籤分成兩次.或好幾次以上的宣告方式。 先後順序 若我有同樣的標籤，而宣告內容有重複的，或是不一樣的定義內容，例如以下： 以上寫法都是定義body標籤的文字顏色，但色碼卻不同， 那麼哪一宣告會被成立呢，答案為後者， 也就是 body{color:#999999} 會被成立 在CSS寫法中若有相同而設定值不同的都以後者來執行的。 |
|
單 向 定 義 |
| 單向定義 單項定義，也就是將CSS的定義內容直接寫在標籤裡頭，以下列為示範： 網頁標籤 這是一個文字粗體標籤，也就是被和包起來的文字 都會變成粗體文字，那麼如果我要定義他的大小為9pt 一般CSS的用法則為： 這樣網頁中所有被和包起來的文字就都為粗體而且為9pt的大小了， 那麼..單項定義的寫法呢....？ 單項定義的寫法很簡單，就如以下： 我是粗體文字大小為9pt 所謂單項定義，就是你針對網頁中的標籤設定他的值， 而也只有被設定的標籤才會產生作用。 注意 如果網頁上有兩個定義，如下： | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
標 籤 定 義 |
| 標籤定義 多樣標籤定義意思就是，再網頁中有許多的標籤要定義為一種內容， 簡單來說就是把許多標籤設定為一種樣式的意思， 現在各位若懂了什麼是標籤，那這裡就難不倒你的， 在網頁中，要宣告五種標籤，要讓他都為同一種設定， 以下面五種標籤來說：
|
本著作係採用創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣 授權條款授權.
| 本章範例 |
BODY之間為主要語法所在哦，文字也是打在這之中哦 |
| 作者： 醒吾商專 國貿科 陳義元 E-mail 完成日期：1999年1月8日 |
本著作係採用創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣 授權條款授權.
- Follow Us on Twitter!
- "Join Us on Facebook!
- RSS
Contact