Skip to main content

Posts

Showing posts from 2011

Featured Post

Adobe UI 設計大賽

感覺很好拿到獎項的比賽 似乎沒多少人知道 https://www.iiiedu.org.tw/adobeXD/ https://www.iiiedu.org.tw/adobeXD/rule.html 但有一組似乎限制了特定人參加!!

瀏覽器演進史

回想當年用記事本寫網頁 再來用 Netscape gold寫網頁 再來用 Visual Home Page寫網頁 到現在 看到這瀏覽器的進化史 真是心有戚戚焉啊!! Ultimate HTML5 Cheatsheat by Tech King

網頁的組成要素

HTML 全名為HyperText Markup Language 組成的結構要素主要分成<head><body> 裡面會再包含其他要素 變成一個階層結構 形成所謂的親子關係 子層以後會繼承父層的樣式

認識CSS

CSS 的全名是 Cascading Style Sheets (串接樣式表)。它是由許多樣式名稱和樣式指定值所組成的字串,我們可以利用設定好的樣式表,指定給某一種 HTML 標籤,或某一群組 HTML 標籤來使用。而被套用的 HTML 標籤,將會依據所套用的 CSS 來顯式它的外觀。 CSS 可說是 JavaScript 物件模型的一個重要部份,因為在 CSS 設定之後,我們還可以利用 JavaScript 重新指定不同的值給元件,而達成動態改變的效果( JavaScript 動態改變的功能 IE 已完全支援,但 NC 只支援極少部份)。試想我們利用 CSS 將一段文字設為紅色,再利用 JavaScript 將它改變為藍色,這就是一種動態網頁效果啦( NC 目前做不到)! css 是用來延伸 html 而非取代 htnl, 是用來補 html 的不足(請不要誤會它) CSS寫法(必須寫在<head>內) <style type="text/css"> h1,h2 {         font-family: Arial, Helvetica, sans-serif;         color: #3366CC; } </style> 每個 CSS 樣式定義都有兩項元件:選取器 (selector) 、內容 (property) ,選取器定義要套什麼樣式,內容則描述要產生的效果。

中文段落文字對齊設定

中文的文字對齊一直很麻煩 針對非拉丁語系國家 CSS有幾個控制標籤可以使用 text-align:justify; 強制文章內文左右對齊包含吊尾文字 但是發現只有FF可以執行 IE與其他瀏覽器是無法完全執行的 接下來再加上 text-justify:distribute; 對IE有效 text-justify:distribute; 但是發現也不見得所有瀏覽器都會支援 目前IE跟FF都有效,連吊尾的文字都可以拉齊 但是對Safari與Chrome吊尾無法調整 text-justify:inter-ideograph;  與   text-justify:newspaper; 測試結果都與 text-justify:distribute; 相同 (IE測試6,7,8三版 FF測試3.6版本 safari5.0 Chrome10.0.648.151)

一個使用CSS3+HTML5作測試的網站

http://www.cssplay.co.uk/index.html

glish有很多CSS資源的網站

http://glish.com/css/

w3school

http://www.w3schools.com/default.asp

CSS Zengarden

http://www.csszengarden.com/

眼睛會動的小叮噹

http://blog-imgs-42-origin.fc2.com/s/h/o/shopdd/dora_css3.html 進入網站後要等一下小叮噹的眼睛會動

用HTML5作的網站

http://www.thewildernessdowntown.com/

CSS3.0 Maker

常用的CSS 3.0標籤 http://www.css3maker.com/