2009/12/22

文字左右對齊方式css2的新方法~ text的direction

資訊來源:W3school

我們呈現文字的時候都是預設的從左到右,
當想要從右至左,平常可以使用 p align="right"
或者 css寫著 text-align:right

CSS2有個屬性,提供了新的方法 direction



用法超簡單,只要寫
direction:rtl
就是右(right)到(to)左(left)

同樣的,左到右就是ltr啦~

還滿特別的~ 呵


不可全文轉貼、可部份引用,請以本文網址連結方式註明出處。




2009/11/05

FM 100 Hue Test 測試你對色彩的敏感度!

http://www.xrite.com/custom_page.aspx?PageID=77

這個站測試你的色相的認知跟敏感度,同時考驗著眼力以及感知能力!
越低分代表你顏色判別跟重組能力越強。

畫面上列著四排隨機產生的色階,最左及最右的色塊是固定好的,必須根據顏色的色相去排列(例如:由藍到綠),點擊色塊拖曳到你想放的位置即可。

點圖可以直接連去測

我忘記之前做過是幾分... 只記得是個位數

2009/11/04

做簡體網頁遇到文字錯位問題的解決方法

我們在繁體中文的介面,做簡體網頁,常常會發現網頁顯示的中文字上下不齊、文字錯位的感覺,心中不斷暗罵該死的IE,討厭的簡體...

內地都會使用"宋體"字型呈現簡體中文,但是...我們看得還是會錯位啊!

其實,這有解決方法的!
解決這問題,要從兩個地方下手,沒錯!就是html和css

首先,來解決一般簡體文字會上下亂跑偏掉的問題...

【css的部份】

當然字體部份要設定好Arial跟宋體顯示,MiyaC是習慣寫成:

font-family:Arial, Helvetica, sans-serif,"宋体", "新細明體";


但是但是,我們的介面是繁體,網頁不會乖乖顯示宋體,還是會用新細明體顯示,很機車吧?!

所以,網頁宣告就很重要了! (之前有寫過meta的部份,可以點我去看看)
用上次那邊的 meta equiv="Content-Language" content="zh-CN" 這招是不夠的,怎樣他都還是不乖乖顯示宋體...
原來,要把網頁本身宣告就先加上語系,所以是要改這行:

html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"

加上紅色粗體的部份,嘖嘖... 文字終於齊了!好感動啊!!!


講完,以上~


> 延伸閱讀: http://3eye.ws/2008/11/19/simplified-and-traditional-chinese-web-page-problem/


不可全文轉貼、可部份引用,請以本文網址連結方式註明出處。



2009/10/04

使用簡單js判斷,讓不同螢幕尺寸看到不同css表現的外貌

這網站很炫喔
他加了簡單的js判斷
不同螢幕尺寸 讀不同的css 表現不同的樣式

JS原始碼

function dynamicLayout(){
var browserWidth = getBrowserWidth();

// Narrow CSS rules
if (browserWidth < 640){ changeLayout("narrow"); } // Normal (default) CSS rules if ((browserWidth >= 640) && (browserWidth <= 960)){ changeLayout("default"); } // Wide CSS rules if (browserWidth > 960){
changeLayout("wide");
}
}


詳情請看原始出處~

資訊來源節錄自:網頁設計知識庫


不可全文轉貼、可部份引用,請以本文網址連結方式註明出處。



2009/06/03

怎麼去除按鈕虛線和連結虛線? 兩種方法告訴你!

常常我們會看到網頁上的按鈕、連結,點擊之後會出現虛線,有的人覺得很醜,有的人覺得有比較好,因此會有必須消除虛線的需求存在...

通常,我們會直接在連結or按鈕 加上 onFocus="blur()"
例如:
< herf=" 連結連結 " onfocus="blur()"> 連結文字 < / a>


另外還有更高招的,使用CSS來解決!
利用 zoom、 outline 跟 邊框透明 的屬性來實現。
範例如下:




確定取消


原始檔:
樣式部份

. btns { zoom:1;}
. btns * {outline:0;zoom:1;}
. btns button::-moz-focus-inner{border-color:transparent!important;}




以上~~








2009/05/20

滑鼠手勢出不來怎麼辦?

有時候我們在網頁切版的時候,
希望整個區塊點了就可以到另一頁,通常會使用a去包,
偏偏有時候,不同瀏覽器看,有的卻不會出現滑鼠手勢...
這樣別人就不知道那個可以點,就失去我們的用意。

其實只要在CSS中,將那個連結滑過時的樣式,指定有滑鼠手勢即可。

例如:

a:hover{cursor:pointer;}



不可全文轉貼、可部份引用,請以本文網址連結方式註明出處。





2009/05/05

最近火狐firefox更新後,圖片會出現莫名邊框?

有沒有發現最近火狐firefox更新後,圖片會出現莫名邊框?
原來是圖片有連結,出現邊框的關係...

頁面這麼多,總不可能一頁頁網頁、一張張圖去設定 border=0


只要在css設定一開始加上
a img{border:0;}

即可


目前使用版本:
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10

2009/02/25

9個永不過時的CSS 3欄佈局技巧



Noupe發表一篇文章,收集了9個號稱永不過時的三欄佈局設計技巧(9 Timeless 3 Column Layout Techniques)


首先,任何一個佈局通常都有headers, navigation bars, content containers, sidebars以及 footers. 我們在設計三欄主題的時候,最重要的目的就是發揮其最大的靈活性和自適應高度,這樣才會看上去更加美觀。下面9個三欄CSS佈局將從多個方面來實現最好的 佈局方法,並都兼容IE和FF。



兩個固定欄和一個可變欄

1、3 Columns, The Holy Grail - 一個精緻的3欄佈局技巧示例

程序代碼 程序代碼
#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
}
#centercontent {
margin-left: 199px;
margin-right:199px;
margin-left: 201px;
margin-right:201px;
}
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}
#rightcontent {
position: absolute;
right:10px;
top:50px;
width:200px;
}


2、3 Column Fluid CSS Layout - 使用100%高度
程序代碼 程序代碼
#left { float: left; width: 155px; padding: 5px; position: relative; /*** IE needs this ***/ }
#right { float: right; width: 110px; padding: 5px; position: relative; /*** IE needs this ***/ margin-right: -120px; /** This negative margin-right value is the same as the right column width (width + padding). ***/ position: relative; /*** IE needs this ***/ }
#content { float: right; margin-right: -165px; /*** Same length as .outer padding-left but with negative value ***/ width: 100%; position: relative; /*** IE needs this ***/ }


3、3-col Layout Via CSS
不需要表格,不需要定位,不需要Hack,就能實現自適應的相同高度。呃,需要一張小小的GIF圖片。
程序代碼 程序代碼
#left { float:left; width:150px; margin:0; padding:0; background:url("corner.gif") top right no-repeat; font-size:80%; }
#right { float:right; width:150px; margin:0; padding:0; background:url("corner.gif") top right no-repeat; font-size:80%; }
#middle { margin:0 150px; background:yellow; font-size:80%; }


4、3 Columns - Flanking Menus
這是另外一個強大的3欄佈局技巧

三欄都固定

5、Multi-Column Layouts Climb Out of the Box
程序代碼 程序代碼
#container{ background-color:#0ff; float:left; width:500px; border-left:150px solid #0f0; ? /* The width and color of the left rail */ border-right:200px solid #f00; ? /* The width and color of the right rail */ }
#leftRail{ float:left; width:150px; margin-left:-150px; position:relative; }
#center{ float:left; width:500px; margin-right:-500px; }
#rightRail{ float:right; width:200px; margin-right:-200px; position:relative; }


6、LayoutGala』s 3 Fixed Columns
程序代碼 程序代碼
div#container {width:700px;margin:0 auto}
div#wrapper {float:left;width:100%}
div#content {margin-right: 300px}
div#navigation {float:left;width:150px;margin-left:-150px}
div#extra {float:left;width:150px;margin-left:-300px}


7、 3 Col Fixed SEO
程序代碼 程序代碼
#page_margins {width: 980px; min-width: 980px; max-width:none }
#main { float:left; width: 100%; background-color: transparent; background-image: url(../../images/bg_pattern.png); background-repeat:repeat-y; background-position:left; }
#col1 { width: 480px; float:left; margin-left: 240px; }
#col2 { width: 240px; float:left; margin-left: -720px; }
#col3 { margin-left: -5px; margin-right: 0; width: 240px; float:right;}


可變-百分比寬度

8、One True Layout
程序代碼 程序代碼
#block_1 { float: left; width: 34%; margin-left: 33%; }
#block_2 { float: left; width: 33%; margin-left: -67%; }
#block_3 { float: left; width: 33%; }


9、Max Design- Liquid insanity
A very good liquid example, could be used as a Newspaper like layout.

相關CSS佈局資源

CSS Layouts - 950 pixels - 簡化你的CSS佈局設計,輕鬆點擊即可生成

ThreeColumnLayouts - 這同樣是一個快速生成CSS佈局的網站服務,可以生成可變寬度和固定寬度的佈局



Little Boxes - 16個CSS佈局演示



Layout Gala - 40個CSS佈局分享。

教程和一些優秀的練習

The Perfect 3 Column Liquid Layout - 不需要CSS hacks. 友好的SEO . 不需要圖片。不需要JavaScript. 支持各大瀏覽器甚至兼容iPhone.

Position Is Everything - 提供一些有趣的CSS設計技巧和相關理論

Creating a CSS layout from scratch - 一步一步的教你學會CSS,總共12個頁面,簡單,直觀,強烈推薦給那些想學CSS的朋友。

2009/01/07

SEO的keyword(關鍵字)新知

一段時間以來, meta標籤中的keyword,它都被視為SEO重要關鍵之一

90年代中後期, meta 標籤的 keyword 被濫用, 來欺騙搜尋引擎, 吸引流量

98年搜尋引擎開始解決此問題, 直接檢視網頁實際內容, 而非meta 標籤的 keyword來作為搜尋依據

今天, 所有主要的搜尋引擎都有相關措施, 使meta 標籤的 keyword失效

可以省略它, 而不必擔心有損網站排名