• 1 最新網頁技術,隨時分享給您
    邦立資訊透過知識結合,連結技術分享
  • 2 jQuery Timeline - 時程表運用
    網頁設計中,常常會看到流程表、時間表的呈現,通常都是很單純的一次顯示所有的流程或時間,利用卷軸下拉方式作呈現..
  • 3 AddThis - 社群網站圖示語法
    "AddThis" 是一個自動提供語法的網站,可以讓您的網站或部落格上同時顯示包含 Facebook、Twitter、Google+ 等大型國際社群網站的人氣指數..

幾點囉!

這是個CSS3+jQuery所設計成成"很大很清楚"的時間表

不知道哪天會有網站會想要秀出這個時間表

但網頁設計總是非常的奇妙,任何東西都可以結合在網站當中

也許某一天這個時間表就能成為您的網站重要的功能唷!

Clock[點我看範例]

...

相信 CSS 老手都知道,在設計 CSS 之前,一定要先把 CSS 重設,讓所有的 CSS 設定歸零,這樣才能確保在不同瀏覽器上都能呈現一致的結果。

這篇文章我們分享了最受歡迎之一的 CSS Reset ,是由 Eric Meyer 所建立的,CSS 語法如下:

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
 
 
...

這是一個可收納且非常節省空間的帳號登入表單

在設計空間缺少,或要讓使用者快速登入時

這個簡便的下拉登入表單,很容易就可以登入使用

達成使用者快速登入的需求!!

 

觀看範例

...

目前 CSS3 已經成為現代Web設計師和開發人員在全球各地的常用語法。

藉其突破性的特點,CSS3使網頁設計師的工作更加輕鬆和充滿樂趣。

而這個CSS3的下拉式選單,充分利用CSS3的優勢,完全不使用任何圖片

即可呈現出很好的效果!!

 

觀看範例

...

網頁設計在運用頁面當中,常常會遇到文字或圖片沒有地方顯示,或者是一些文字需要註解的時候,

一個分顏色的標籤提示,可以非常方便的讓瀏覽者清楚的看到所有內容

並可提高網站空間運用的特性。

而且這個語法是使用CSS3的特性,非常方便使用,完全不需要任何圖片就能夠做呈現!

 

觀看範例

...