Home
教學文集
盒模型bug的解決方法
boxtest div.boxtest{ border:20px solid #60A179; padding: 30px; background : #ffc; width : 400px; }
標準情況下，這個盒的寬度是:20+30+300+30+20=400px。
但是在IE5.0瀏覽器中，對盒模型的寬度解釋有個bug，它認為300 px是整個盒的總寬度，內容的寬度變成：300-20-30-20-30=200px。
為了彌補這個bug，採用一個技巧：即增加一個IE5不能解釋的聲音屬性"voice-family",讀到這個定義時瀏覽器就不再繼續閱讀，認為寬就是400px，但而其他符合標準的瀏覽器會繼續閱讀，並執行第二個真實值300px。
content div.content{ border:20px solid #60A179;; padding:30px; background: #ffc; width :400px; voice-family : "\"}\""; voice-family :inherit; width : 300px; }
同樣，在Opera7.0以前的瀏覽器也有這樣的解析bug。但我們並不需要使用偽值，有更簡單的辦法解決這個問題：
html>body .content { width :300; }
標準情況下，這個盒的寬度是:20+30+300+30+20=400px。
但是在IE5.0瀏覽器中，對盒模型的寬度解釋有個bug，它認為300 px是整個盒的總寬度，內容的寬度變成：300-20-30-20-30=200px。
為了彌補這個bug，採用一個技巧：即增加一個IE5不能解釋的聲音屬性"voice-family",讀到這個定義時瀏覽器就不再繼續閱讀，認為寬就是400px，但而其他符合標準的瀏覽器會繼續閱讀，並執行第二個真實值300px。
content div.content{ border:20px solid #60A179;; padding:30px; background: #ffc; width :400px; voice-family : "\"}\""; voice-family :inherit; width : 300px; }
同樣，在Opera7.0以前的瀏覽器也有這樣的解析bug。但我們並不需要使用偽值，有更簡單的辦法解決這個問題：
html>body .content { width :300; }
HTML基礎指令詳解
頁面結構
＜html＞
＜head＞
＜title＞標題＜title＞
＜/head＞
＜body＞..........文件內容.......... ＜/body＞
＜/html＞
1.文件標題 ＜title＞..........＜/title＞
2.文件更新--＜meta＞
【1】10秒後自動更新一次
＜meta http-equiv="refresh" content=10＞
【2】10秒後自動連結到另一文件
＜meta http-equiv="refresh" content="10；URL=欲連結文件之URL"＞
3.查詢用表單--＜isindex> 若欲設定查詢欄位前的提示文字：
＜isindex prompt="提示文字"＞
4.預設的基準路徑--＜base>
＜base href="放置文件的主機之URL"＞
版面部分
1.標題文字＜h#＞..........＜/h#＞ #=1~6；h1為最大字，h6為最小字
2.字體變化 ＜font＞..........＜/font＞
【1】字體大小＜font size=#＞..........＜/font＞ #=1~7；數字愈大字也愈大
【2】指定字型＜font face="字型名稱"＞..........＜/font＞
【3】文字顏色＜font color=#rrggbb＞..........＜/font＞ rr：表紅色（red）色碼gg：表綠色 （green）色碼bb：表藍色（ blue）色碼
3.顯示小字體＜small＞..........＜/small＞
4.顯示大字體 ＜big＞..........＜/big＞
5.粗體字 ＜b＞..........＜/b＞
6.斜體字 ＜i＞..........＜/i＞
7.打字機字體 ＜tt＞..........＜/tt＞
8.底線 ＜u＞..........＜/u＞
9.刪除線 ＜strike＞..........＜/strike＞
10.下標字 ＜sub＞..........＜/sub＞
11.上標字 ＜sup>..........＜/sup＞
12.文字閃爍效果＜blink＞..........＜/blink＞
13.換行 ＜br＞
14.分段 ＜p＞
15. 文字的對齊方向
＜p align="#"＞ #號可為left：表向左對齊（預設值） center：表向中對齊right：表向右對齊PS ＜p align= "#"＞之後的文字都會以所設的對齊方式顯示， 直到出現另一個＜p align="#"＞改變其對齊方向，或遇到＜hr＞ⅱ ＜h#＞標籤時會自動設回預設的向左對齊。
＜html＞
＜head＞
＜title＞標題＜title＞
＜/head＞
＜body＞..........文件內容.......... ＜/body＞
＜/html＞
1.文件標題 ＜title＞..........＜/title＞
2.文件更新--＜meta＞
【1】10秒後自動更新一次
＜meta http-equiv="refresh" content=10＞
【2】10秒後自動連結到另一文件
＜meta http-equiv="refresh" content="10；URL=欲連結文件之URL"＞
3.查詢用表單--＜isindex> 若欲設定查詢欄位前的提示文字：
＜isindex prompt="提示文字"＞
4.預設的基準路徑--＜base>
＜base href="放置文件的主機之URL"＞
版面部分
1.標題文字＜h#＞..........＜/h#＞ #=1~6；h1為最大字，h6為最小字
2.字體變化 ＜font＞..........＜/font＞
【1】字體大小＜font size=#＞..........＜/font＞ #=1~7；數字愈大字也愈大
【2】指定字型＜font face="字型名稱"＞..........＜/font＞
【3】文字顏色＜font color=#rrggbb＞..........＜/font＞ rr：表紅色（red）色碼gg：表綠色 （green）色碼bb：表藍色（ blue）色碼
3.顯示小字體＜small＞..........＜/small＞
4.顯示大字體 ＜big＞..........＜/big＞
5.粗體字 ＜b＞..........＜/b＞
6.斜體字 ＜i＞..........＜/i＞
7.打字機字體 ＜tt＞..........＜/tt＞
8.底線 ＜u＞..........＜/u＞
9.刪除線 ＜strike＞..........＜/strike＞
10.下標字 ＜sub＞..........＜/sub＞
11.上標字 ＜sup>..........＜/sup＞
12.文字閃爍效果＜blink＞..........＜/blink＞
13.換行 ＜br＞
14.分段 ＜p＞
15. 文字的對齊方向
＜p align="#"＞ #號可為left：表向左對齊（預設值） center：表向中對齊right：表向右對齊PS ＜p align= "#"＞之後的文字都會以所設的對齊方式顯示， 直到出現另一個＜p align="#"＞改變其對齊方向，或遇到＜hr＞ⅱ ＜h#＞標籤時會自動設回預設的向左對齊。
Photoshop 筆刷進階運用教學 發光的線絲
透過"發光的線絲"實作 教學 Photoshop 筆刷進階運用教學
CSS之li和ul標簽用法舉例
LI代碼的格式化:
1 .運用CSS格式化列表符：
ul li{
list-style-type:none;
}
2 .假如你想將列表符換成圖像，則：
ul li{
list-style-type:none;
list-style-image: url(/blog/images/icon.gif);
}
3 .為了左對齊，可以用如下代碼：
ul{
list-style-type:none;
margin:0px;
}
4 .假如想給列表加背景色，可以用如下代碼：
ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}
5 .假如想給列表加MOUSEOVER背景變色效果，可以用如下代碼：
ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }
說明：display:block;這一行必須要加的，這樣才能塊狀顯示！
6.LI中的元素水平排列關鍵FLOAT:LEFT：
ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}
< ul > <li >的區別
< LI > 的參數設定（常用）： 例如：
<li type="square" value="4">
type="square"
只適用于非順序清單，設定符號款式，其值有三種，如下，內定為 type="disc"：
符號 是當 type="disc" 時的列項符號。
符號 if" width=10 height=10 border=0> 是當 type="circle" 時的列項符號。
符號 是當 type="square" 時的列項符號。
value="4"
只適用于順序清單，設定該一項的數目，其後各項將以此作為起始數目而遞增，但前面各項則不受影響，其值只能是 1,2,3.. 等整數，沒有內定值。
<UL>稱為無序清單標記。
所謂無序清單就是在每一項前面加上 、、等符號，故又稱符號清單。
<UL> 的參數設定（常用）：
例如：
<UL type="square">
type="square"
設定符號款式，其值有三種，如下，內定為 type="disc"：
符號 是當 type="disc" 時的列項符號。
符號 是當 type="circle" 時的列項符號。
符號 是當 type="square" 時的列項符號。
<ul>是項目列表，<li>是列表項，項目列表就是用符號來列的，所以你列出來默認的就是黑點啦，還有一個是<ol>這個是編號列表，用數字來列的，也是用<li>做列表項
< li >是 list item 即列表項，但列表有很兩種，所以外面得有 <ul> 或者 <ol> 用來區別無序列表（小點點）和有序列表（1,2,3...）。
1 .運用CSS格式化列表符：
ul li{
list-style-type:none;
}
2 .假如你想將列表符換成圖像，則：
ul li{
list-style-type:none;
list-style-image: url(/blog/images/icon.gif);
}
3 .為了左對齊，可以用如下代碼：
ul{
list-style-type:none;
margin:0px;
}
4 .假如想給列表加背景色，可以用如下代碼：
ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}
5 .假如想給列表加MOUSEOVER背景變色效果，可以用如下代碼：
ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }
說明：display:block;這一行必須要加的，這樣才能塊狀顯示！
6.LI中的元素水平排列關鍵FLOAT:LEFT：
ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}
< ul > <li >的區別
< LI > 的參數設定（常用）： 例如：
<li type="square" value="4">
type="square"
只適用于非順序清單，設定符號款式，其值有三種，如下，內定為 type="disc"：
符號 是當 type="disc" 時的列項符號。
符號 if" width=10 height=10 border=0> 是當 type="circle" 時的列項符號。
符號 是當 type="square" 時的列項符號。
value="4"
只適用于順序清單，設定該一項的數目，其後各項將以此作為起始數目而遞增，但前面各項則不受影響，其值只能是 1,2,3.. 等整數，沒有內定值。
<UL>稱為無序清單標記。
所謂無序清單就是在每一項前面加上 、、等符號，故又稱符號清單。
<UL> 的參數設定（常用）：
例如：
<UL type="square">
type="square"
設定符號款式，其值有三種，如下，內定為 type="disc"：
符號 是當 type="disc" 時的列項符號。
符號 是當 type="circle" 時的列項符號。
符號 是當 type="square" 時的列項符號。
<ul>是項目列表，<li>是列表項，項目列表就是用符號來列的，所以你列出來默認的就是黑點啦，還有一個是<ol>這個是編號列表，用數字來列的，也是用<li>做列表項
< li >是 list item 即列表項，但列表有很兩種，所以外面得有 <ul> 或者 <ol> 用來區別無序列表（小點點）和有序列表（1,2,3...）。
Photoshop 文字編排 示範
在Photoshop如何自由的變化調整自已的文字排版?本次教學教你如何快速操作
Photoshop 步驟紀錄筆刷工具示範及運用
示範 Photoshop 步驟紀錄筆刷工具使用其運用方式
Photoshop濾鏡特效應用-墨彩效果
我們常會看到一些照片修飾成有手繪黑線的墨彩效果，在這裡我們示範如何使用photoshop修出這樣的效果!!
Photoshop CS5 新功能-內容感知
CS5 新功能示範(內容感知)，去除圖案變得更容易囉!!
Photoshop 自定筆刷圖案教學
Photoshop 中如何操作設計自己需要的圖樣自定筆刷圖案教學
photoshop CS5 新功能-操控彎曲
CS5 新功能示範(操控彎曲)，可以自由的彎曲圖形作更方便的自由的運用!!
illustrator教學-illustrator基本介面介紹
講解Illustrator基本介面介紹學習熟悉操作介面
illustrator教學-illustrator 貝茲曲線示範 愛心繪製
用Illustrator中的鋼筆工具(貝茲曲線)示範 愛心繪製
illustrator教學-illustrator 圓的透視感教學(效果3d的使用)
讓一排的圓具有透視感的illustrator教學
訂閱：
文章
(
Atom
)