回到首頁
About Me!
字體變
字體正常
字體變小
訂閱我的RSS
捎信來
顯示具有 CSS教學 標籤的文章。 顯示所有文章
顯示具有 CSS教學 標籤的文章。 顯示所有文章

2008年5月1日 星期四

快速標籤

lomo
如果沒有CSS基礎,請不要輕易嘗試此教學...。

因為我的標籤數越來越多,未來也希望能夠把LOMO當作BLOG的重點之一,所以我今天就把這幾個標籤獨立出來。因為Blogger對於CSS語法和平常的網站不太一樣,如果用DIV的寫法,就必須把每個元素包起來才可以,不然會造成高度不足,溢位的形況。下面有程式碼和CSS參考:)


HTML
<div id="lomo">
<div id="lomo_top"><a href="http://hnigel.blogspot.com/search/label/LOMO">LOMO</a></div>
<div id="lomo_info"><a href="http://hnigel.blogspot.com/search/label/Fish Eye">Fish Eye</a></div>
<div id="lomo_info"><a href="http://hnigel.blogspot.com/search/label/LCA">LCA</a></div>
<div id="lomo_info"><a href="http://hnigel.blogspot.com/search/label/Vivitar">Vivitar</a></div>
</div>


CSS
#lomo{
border: thin solid #000000;
width:180px;
text-align:center;
}

#lomo_top{
padding-top:20px;
display:block;
}

#lomo_top a{
font-size:56px;
color:#666666;
text-decoration: none;
}

#lomo a:visited{
color:#666666;
text-decoration: none;
}

#lomo_info{
font-size:24px;
display:block;
padding:3px;
margin:3px;
background-color: #CCCCCC;
}

#lomo_info a{
color:#ffffff;
}

#lomo_info a:visited{
color:#ffffff;
}

Read more!

2007年7月11日 星期三

Top 50 網頁設計師的靈感網站 

top50

點這裡瞧瞧


我大概遊覽過一次,感覺他所推薦的每個網站,風格和手法都不太相同,設計風格也於台灣的網站上少見,算是滿好玩一的個精選集。大家有空可以去逛逛,會有不錯的收穫喔!有空的話我會對挑幾個我個人覺得比較好的網站,再介紹給大家知道。

p.s.其中也有包刮一些教學網站,以及設計網站內又介紹許多設計網站,如果要全部逛完,應該要花不少時間。
Read more!

2007年4月16日 星期一

53種你不能不知道的CSS

53CSS

上一次有人整理出25種CSS實用技巧最近又有人整理出53種你不能不知道的CSS ,雖然有一些重覆 ,又像是一種噱頭,但其實裡面的都是最近創新的CSS用法。大部分也能於自己的Blog實做,還算是不錯的整理。有空可以每個都去看看,會有不錯的收穫。


CSS在最近幾年越來越紅,也越來越普遍。又由於Blog的普遍,可以說人人都在學CSS。不知道新HTML出來的時候,會不會壓不過CSS目前的壯大的氣勢,就拭目以待吧。

最近我要準備期中考,所以接下來幾天不一定會有時間更新,先跟大家說聲抱歉囉^^"。今天小考也考差了,我不敢再鬆懈下去了QQ...
Read more!

2007年3月27日 星期二

25種CSS實用技巧

是一個tutorial所發表的,內容是以英文呈現,但是都有圖文解說,只看圖也能輕易了解。除了CSS,裡面的內容已經可以出一本網站設計書了,現在對國內的網站設計書,已經越來越失望了。

25種CSS實用技巧 part1
25種CSS實用技巧 part2


這些東西就夠我春假玩一個禮拜了,CSS強者就應該要這樣玩呀。我果然還只算是小兒科,只會排版不會創新。看來小樹要成長,還要好長一段時間囉!
Read more!

2007年3月23日 星期五

火狐打噴嚏事件

因為firefox無法遊覽,我又抓不到原因,只好先改回最初的版本,然後重新改一次...經過一個小時的搶救,終於抓到這個小bug,那就是空樣式。


#CSS{}

沒想到這個空樣式會對firefox造成如此大的影響,真是令我傻眼。以常理來說,不就是沒有套用CSS而已嗎?看來ie也有他可愛的一面XD


這次火狐打噴嚏事件圓滿的解決,正義使者又再度的拯救了世界。不過現在換正義使者打噴嚏了...

Read more!

2007年2月25日 星期日

widget css設定

widget是指blog右邊你所增加的HTML元件,假設你的元件的原始碼是A,要如合修改A的CSS?直覺是直接用<div id="A"></div>把A給包起來,再去增加#A的CSS內容,但是此法卻行不通。


其實還有一個更簡單的方法,先到設定->修改HTML。拉到接近底部,可以看到類似下面的程式碼。


<b:widget id='HTML6' locked='false' title='Widgert的名稱' type='HTML'/>

把他的ID記下來(此範例是HTML6),之後拉到上方的CSS程式碼區塊,找個你喜歡的位置加入以下的程式碼。

#HTML6{
/*你所要的CSS Code*/
}

如此一來就成功了!

如果你是新手,可以參考一下widget常用的CSS碼。

  • text-align:center; 置中對齊

  • text-align:left; 置左對齊

  • text-align:right; 置右對齊


Read more!

2007年2月14日 星期三

配色網站

從網路上收集而來的配色網站
不用懂色彩學~不用買書~
就可以做出賞欣悅目的網站


自動挑出六種適合的顏色
ColorMatch.dk

自動挑出九種適合的顏色
ColorMatchs

框架式自動配色
themaninblue
wellstyled

特點是還能調節亮度與飽和度
Color Schema Generator 2

可以於Search by Tag鍵入關鍵詞~
他會幫你找配色(Sun,tree...連taxi都找的到XD)
colr
Read more!

2007年2月8日 星期四

Code外框

首先必須先修改Blogger的樣式表
在樣式表中加入下面這個屬性
顏色可以照個人喜好更改


#code {
BORDER-RIGHT: rgb(51,153,0) 1px solid;
PADDING-RIGHT: 10px;
BORDER-TOP: rgb(51,153,0) 1px solid;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
BORDER-LEFT: rgb(51,153,0) 1px solid;
COLOR: rgb(0,102,0);
PADDING-TOP: 10px;
BORDER-BOTTOM: rgb(51,153,0) 1px solid;
}

之後在文章用法如下

<div id="code">

你的所要加上外框的文章

</div>

它的原理其實就是CSS當中外框的設定
如果需要基本的教學
可以去GOOGLE收尋關鍵字"CSS 外框"或"CSS BORDER"即可
在此就不多作介紹
Read more!

CSS 基本教學

由於網路上已經有許許多多的CSS教學,所以只在這裡推薦一些書和教學網站。



基本教學網站
洛杉磯中文學習中心
凱哥CSS教學
網站建置百寶箱

基本教學書籍

web css網頁樣式設計學
CSS網頁設計師手札:101個您一定會遇到的問題與解答


作品欣賞書籍

The Zen of CSS design
向世界最Top的網站學CSS網頁設計
Read more!

為什麼要使用CSS?

CSS是Cascading Style Sheets的縮寫,中文可以簡單稱為「樣式表」,由W3C所制定的。很多人會問HTML用得好好的,為什麼要改用CSS?其實如果你想要堅持傳統,當然可以使用HTML,但是建議你先看看下面CSS的優點。



  • 更新方便。你可以一次更新一整個網站相同的內容,而不用每個網頁分別更新。例如:小明今天想要把他網站所有標題內容從置中改到靠右,只需要更改一份CSS文件,即可達成任務。

  • CSS能讓我們更精確的控制網頁版面的元素。例如:我要把這隻皮卡丘的圖片定義在螢幕(100px,200px)的位置上。

  • CSS簡單來說把「內容」和「樣式」分開。同一份內容可以穿不同的樣式。不同的內容也 可以穿同一樣式。如此一來還能加快網頁的讀取速度。

  • 適用於各種作業平台。不管你是挺微軟還是反微軟,都能見識到它的好處。

  • 省時。綜合以上優點,當你一熟悉CSS,即可以省掉許多作網站所需要的時間。



延伸閱讀



Read more!