捐血一袋救人一命

江蘇拙政園

江蘇 拙政園

全家福

日本 和歌山城

賞楓之旅

千燈 夕照

水鄉千燈

蘆洲 微風運河

破曉時分

顯示具有 CSS 標籤的文章。 顯示所有文章
顯示具有 CSS 標籤的文章。 顯示所有文章

2016年3月25日 星期五

設計網站的好幫手

說實在的,如果不是熟悉 bootstrap ,我比較不建議使用 Dreamweaver 來設計網頁。

雖然它提示標籤、參數功能很棒,但是因為引入了 bootstrap 的 css 定義,很容易會造成越改越亂。

建議設計網頁還是從基礎學起,

先理解切版會用到的 Box Model,瞭解如何設定版塊大小、位置,以及對齊等方法,再來使用 Dreamweaver 這種進階的工具會比較好。

但是,新手要去記憶一大堆的 CSS Code,也很困難,所以,我建議新手可以利用以下的工具網站,來學習設計網頁。

即時可見的編輯器

  1. jsfiddle
  2. codepen
  3. jsbin
  4. liveweaver
  5. dabblet
  6. Plunker
  7. w3cschools
  8. RunJS
  9. CSSDesk

CSS 產生器

EnjoyCSS

CSS3 Generator

css3.me

CSS matic

Ultimate CSS Gradient Generator

CSS3 Maker

css3gen.com

css3 layout generator

CSS DIV Builder

Reponsive Web Design

RDW說穿了就是讓使用者能夠在各種媒體上都能很方便的看網頁,操作網頁,而不用時而放大,時而縮小。

內容編排的重要性我們不談,這裡只講技術的部份。

一種方式是用 Javascript 去抓螢幕寬度、長度,所有的大小,位置,全部由 Javscript 程式去控制 HTML Style Attributes

另一種就是使用 CSS 定義多組版面,至於何時該用哪個樣版 CSS 檔,則由 CSS Code @media 或是 HTML Code <link href media> 來設定。

另外,CSS 也提供了 calc()、expression() 等函式來動態計算變

css > border

border:寬度點數 顏色 樣式

樣式種類

  1. none:不顯示
  2. hidden:隱藏
  3. dotted:點狀
  4. dashed:虛線狀
  5. solid:實線
  6. double:雙線,寬度點數要在三點以上才看得出效果
  7. groove:立體樣式,寬度點數在三點以上才能呈現,但五點以上效果才明顯
  8. ridge:立體樣式,寬度點數在四點以上才能呈現,但五點以上效果才明顯
  9. inset:立體樣式,寬度點數在四點以上才能呈現,但五點以上效果才明顯
  10. outset:立體樣式,寬度點數在四點以上才能呈現,但五點以上效果才明顯
  11. initial:無線
  12. inherit:

2012年12月9日 星期日

如何讓網頁定時轉換其它網頁

<head></head>標籤之間利用 <meta http-equiv="refresh" content="SS ; url=URLADDR">

這樣的語法只有在 IE 才會生效,Chomre 是不會鳥這樣的語法

所以另一個變通的方法,就是利用 Java Script,

因為 Java Script 的指令相容性會比 HTML 高一些