2012年11月26日 星期一

如何設計漂亮邊框(04)-邊框圓角設定-[border-radius]


0000標題028
再來,橙來說明最喜歡用的指令了,就是邊框圓角的指令了,在以前,圓角的製作方式,須要利用小畫家等繪圖軟體來設定,然後當作該區塊的背景,才能有圓角的效果,如今,新版的css3來說,就不須要這樣麻煩了,僅須在css裡設定,即可以表現圓角的效果。
因為這個為css3的設計,設計時還是要考量瀏灠器版本的問題喔!以下是支援的表格
2012-11-21_153031 
以上是支援的版本,ie 8 不支持喔!還是要注意一下喔,他的使用者最多(目前來說)!
橙喜歡圓角的感覺,特別在一些設計的版面,圓角的設定,讓整個畫面有了質感的感覺(個人覺得啦),特別現在有許多東西,都特愛用圓角的設定來表現,許多的手機不是都愛如此嗎? iphoto 不也愛用 哈哈
離題了,橙還是來寫一段html 吧!(和上一篇一樣 = =)
<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>魚和橙的結合</title>
</head>

<body>
<p id="bord1">border1</p>
<p id="bord2">border2</p>
<p id="bord3">border3</p>
<p id="bord4">border4</p>
</body>
</html>
再來加入css 吧!
<style type="text/css">
p {
    display: block;
    width: 150px;
    border-style: solid;
    background-color: #CCC;
    color: #000;
}
#bord1 {
    border-radius: 5px; /*左上、左下、右上、右下設定為5px*/
}
#bord2 {
    border-radius: 3px 10px; /*左上、右下設 3px 及 右上、左下設 10px*/
}
#bord3 {
    border-radius: 4px 5px 10px; /*左上設4px 及 右上、左下設5px 及 右下設10px*/
}
#bord4 {
    border-radius: 1px 3px 0px 10px; /*左上設1px 及 右上設3px 及 右下設0px , 左下設 10px*/
}
</style>
  橙先將<p>設定為寬度150px、實線、背景為灰色、字體為黑色、容器為block屬性。
在設定#bord1~#bord4 ,分別設置了四種形式,其說明在程式碼的註解裡,可以看到各設定的方向,各位可看看試試!
我們來看看輸出結果吧!
2012-11-21_153714 
在這可以做很多的變化,各位試試,可以設定很多質感的邊框喔!

2012年11月23日 星期五

[video]boby did not want to call her dad


baby cry cry babe said:no no no

如何設計漂亮邊框(03)-邊框的上下左右關係-[border-top][border-bottom][border-left][border-right]


0000標題027  
之前,橙都是以全部的邊框來設定,當然,有時候,我們不需要四個邊都需要設定,只須要一個邊來表示時,此時,我們可以指定我們要的方向來設定,無須四個邊都要設定。
而設定的方式,僅須要以 top、bottom、left、right 來分別,再加上屬性即可,而我們先設定基本要改的html 吧!
<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>魚和橙的結合</title>
</head>

<body>
<p id="bord1">border1</p>
<p id="bord2">border2</p>
<p id="bord3">border3</p>
<p id="bord4">border4</p>
</body>
</html>
 此例和上篇是一樣的,而我們在#bord1~#border4 中,各別加入上下左右的條件,分別改變其id的邊框顏色、樣式及粗細,橙子將css 加入吧!
<style type="text/css">
p {
    display: block;
    width: 150px;
}
#bord1 {
    border-top-color:red;
    border-top-style:dashed;
    border-top-width:1px;
}
#bord2 {
    border-bottom-width: 1px;
    border-bottom-color: gray;
    border-bottom-style: double;
}
#bord3 {
    border-left-width: thin;
    border-left-style: double;
    border-left-color: blue;
}
#bord4 {
    border-right-width: thick;
    border-right-style: dotted;
    border-right-color: black;
}
</style>
橙子將css 加入了一些條件,橙將<p>標籤中設立了寬度為150px,容器屬性為block(區塊)。
而在bord1 加入了border-top-color 為紅色,border-top-style 為虛線,border-top-style為1px寬,各位看下去,其實設定的方式就是將前幾篇所說的,中間加入了方向名詞,即可產生你要的效果。
所以,#bord2~#bord4 就分別修改下、左、右的屬性,我們就來看看,我們修改的結果吧!
2012-11-21_144907  
是不是就改成你要結果的呢?可以試試看喔!

2012年11月22日 星期四

Html基本說明(01)-html各項版本編寫差異


Html 有許多的格式,但基本的使用和目前常用的,也就那幾種,看各位想要哪一種,就選用那一種方式編寫,以下就介紹一些抬頭宣告的說明,這是基本的規格,各位可將之存成單一文檔,就可在新增網頁的時候,就不用再打一次了,多打多錯!

XHTML格式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>魚與橙的結合</title>
</head>

<body>
</body>
</html> 
Html 4.01 格式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>魚與橙的結合</title>
</head>

<body>
</body>
</html>
 HTML 5 格式
<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>魚與橙的結合</title>
</head>

<body>
</body>
</html>
以上,可選擇其一複制,當作每個網頁的開頭,其差別在於抬頭的宣告,其實也是告訴瀏覽器說,你的文件是那一種文件檔案。
XHML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5
<!doctype html> 
特別把他標示出,這些宣告是必須要寫的,如果不寫,瀏覽器會認定為這個網頁是很早很早以前設計的,而進入一種模式叫怪異模式,也就是說瀏覽器將會誤認你的網頁,就會發生,圖片和文字混亂的狀況!各位只要確定你要哪種寫法寫,你就把以上的文字做成固定文檔,要的時候再取出另存一個檔,就不會有問題了!
不過要注意的是,每個寫法內容都是一樣的,只是在寫的時候,XTML 和 HTML5 是比較嚴謹一點,必須在每個文檔皆有結束的標籤,HTML 4 就相對鬆散一點,其中的差異不大,但是要注意就是了。

Html 基本說明(02)-HTML基本結構說明


再來我們就html 結構來說明,以下以html5 的結構來說明!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚與橙子的結合</title>
</head>

<body>
</body>
</html>
在Html 抬頭宣告中,已簡化成 <!doctype html>,不再是一長串文字了,這對有些人來也許是個好消息,這個宣告還是必要的,所以在每個網頁上面,都必須有這個文檔類型。 
1、<html> </html>:為最頂層元素,網頁的所有內容都寫在裡面(包在裡面)。
2、<head> </head>:通常放在這裡面的有<meta>,<title>,javascript,css 編寫或路徑,一般而言,網頁實際是不顯示該區域的內容的
3、<body> </body>:網頁編寫及顯示的位置,將你要顯示的內容,皆寫在裡面。
4、<meta> :附加文件的額外資訊,如例<meta charset="utf-8">即為告知瀏覽器為utf-8的文字編碼,另有name屬性,可標示關鍵字的部份,例:
<meta name="Keywords"content="刀具,cnc,切削刀具"> 
提供搜尋機器人(google ,bing)搜尋的重點,內容不要寫太多關鍵字,寫太多沒有用,只要寫幾個就好了,這是有關於SEO的部份,在此不多做討論。 
再附加一個也是關鍵字的部份,也可以增加搜尋機會,例:
<meta name="Description" content="魚和橙的結合,網頁設計,網頁與你分享。"/> 
上述也是告知機器人知道你的網頁內容,利於搜尋即閱讀!
5、<title> Html 基本說明(二)</title>:表示網頁抬頭的部份,顯示於網頁上頭的文字,也是搜尋機器人(google,bing)關鍵字的重點之一
2012-06-29_113110    
以上,為html基本結構,再來就要從這個基準點裡面,開始寫你所想的網頁了!

2012年11月21日 星期三

如何設計漂亮邊框(02)-邊框顏色及粗細-[border-width][border-color]


0000標題026
 由前篇介紹了邊框的樣式,我們再來說明前篇未說明的部份,就是邊框的粗細及顏色,他們的屬性分別為 border-width 及 border-color ,而我們就依上篇例子,再來做點修正吧!
由前篇的html 橙子改一下,再來說明!
<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>魚和橙的結合</title>
</head>
<body>
<p id="bord1">border1</p>
<p id="bord2">border2</p>
<p id="bord3">border3</p>
<p id="bord4">border4</p>
</body>
</html>
 再來橙將<p>邊框都設定為實線,宽度150px ,容器為 block ,加入基本css 吧!
<style type="text/css">
p {
    display: block;
    width: 150px;
    border-style: solid;
}
</style>
再來橙將#bord1~#bord4 都加上寬度的屬性和顏色的屬性,來看看其中差異吧,加入css吧!
<style type="text/css">
p {
    display: block;
    width: 150px;
    border-style: solid;
}
#bord1 {
    border-color: red;
    border-width: 1px;
}
#bord2 {
    border-color: gray;
    border-width: thin;
}
#bord3 {
    border-color: blue;
    border-width: medium;
}
#bord4 {
    border-color: black;
    border-width: thick;
}
</style>
我們可以設定顏色為各種顏色,本例中,我設了紅色、灰色、藍色、黑色,當然也可使用rgb 值,在這裡用英文顏色來表示,會比較清楚點!
 而粗細方面,我們可以利用數字設定邊框粗細,也可使用thin(細)、medium(中等)、thick(粗),來設定,一般而言,橙子還是習慣用數字來表示,因為前面三個值,並不會是橙所要的粗細大小,還是用數字來設定,有時才會有橙所需要的粗細大小。
我們來看一下輸出結果吧!
2012-11-21_105552  
輸出之後,可以看到各類線條的粗細,你可以選擇你要的粗細,設定在你的網頁中!

2012年11月20日 星期二

如何設計漂亮邊框(01)-各類邊框樣式-[border-style]


0000標題025
今天來說一下邊框,而邊框在網頁的使用其實用量還不少,主要由於在css使用後,每個標籤的設定就像容器一般,而在容器中,就可以設定每個容器的邊框樣式,以下來介紹幾種常用的邊框樣式。
邊框樣式,有實線、點、虛線、雙線等等的邊框樣式可以選擇,以下的設定中,有些在部落格還沒有說明到,容橙子在後面在一一說到,橙將一系列介紹邊框的各種用法,讓大家有基本上的了解。
我們先來寫一段html 吧!
<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>魚和橙的結合</title>
</head>

<body>
<p id="bord1">border1</p>
<p id="bord2">border2</p>
<p id="bord3">border3</p>
<p id="bord4">border4</p>
<p id="bord5">border5</p>
<p id="bord6">border6</p>
<p id="bord7">border7</p>
<p id="bord8">border8</p>
</body>
</html>
 先設了一堆的id ,來分別加入css
橙先將<p>一些共用的設定放入,如下
<style type="text/css">
p {
    border-width: 1px;
    border-color: #ccc;
    display: block;
    width: 150px;
}
</style>
 橙設定了邊框共用的條件,因為本篇主要介紹邊框樣式,橙將共用的幾個條件,就放在<p>的裡面了,而裡面有設定邊框的粗細為1px,邊框的顏色為灰色,<p>容器皆為block的型式,和<p>容器的寬度為150px,這些設定,橙後面的文章也會寫,就先記著吧!
然後,橙再加入各式邊框的樣式,就加入css吧!
<style type="text/css">
#bord1 {
    border-style:dashed; /* 虛線 */
}
#bord2 {
    border-style: dotted; /* 點*/
}
#bord3 {
    border-style: double ; /*雙線*/
}
#bord4 {
    border-style: groove; /*槽線*/
}
#bord5 {
    border-style: inset; /*上陰影線 */
}
#bord6 {
    border-style: solid; /*實線*/
}
#bord7 {
    border-style: outset; /*下陰景線*/
}
#bord8 {
    border-style: ridge; /*立體線*/
}
</style>
 橙將每個 #bord 都利用 border-style 設定了一個樣式,而輸出即會產生不同的結果,而在上面都有用註解說明該屬性的結果,其中,橙比較常用的就是實線和虛線了,實線主要用提出主題用,虛線主要用於下邊框用,咋用呢?就是在文章中,不都有分類細類嗎?可以利用虛線來讓使用者更快找到分類重點。
我們來看看輸出結果吧!
2012-11-20_094511  
利用這個,就可以設定你要的邊框樣式了,可以試試看喔!