布萊恩的創業小窩

上次的HTML5教學內容讓你掌握了文字,現在再給你一個bonus,教你邊框和區塊,現在想要怎麼排版都可以啦! 1. 跟外框相關的CSS設定 (常用) 屬性名稱 說明 設定範例 border-style 設定邊框的線條樣式，可設定為實線、虛線、點點等。 border-style: dotted； border-style: dashed； border-style: double； border-style: solid； border-style: groove； border-style: ridge； border-style: inset； border-style: outset； border-width 設定邊框的線條粗細 small、large、pt、px、cm、% border-width:6px; border-color 設定邊框的顏色 也可以直接使用"bold"指定之 border-color:blue; border-top border-left border-bottom border-right 針對邊框的上方線條做單獨調整 針對邊框的左方線條做單獨調整 針對邊框的下方線條做單獨調整 針對邊框的右方線條做單獨調整 border-top:2px dotted blue; (設定值依序為粗細、線條樣式、顏色) 2. 區塊"<span>"與"<div>"的屬性設定 其實除了文字之外， 前端工程師 在 HTML5教學 網頁的各個元素進行 CSS 格式設定時，有一個 「盒子模型 (box model) 」 的概念：就是所有要被設定的元素，都會被視為一個盒子"<span>"或"<div>"。 而些盒子的內容都是被框 (border) 包著的，內容與框中間又有所謂的留白 (padding)。而這個框 (border )的粗細是可以調整的。 屬性名稱 說明 設定範例 width 區塊寬度 width: 600p...

HTML5教學也有涉略電子書?從此看書擁有好多樂趣,有了這些特效,再也不會看書看到睡著了! 1. HTML5 書本翻頁動畫特效 ​ 這是手動翻書頁面特效的基本款。這款 HTML5 翻頁動畫可以用鼠標拖動頁面來模擬手動翻頁的效果，也可以點擊書頁的邊框來快速翻頁。 ▶網頁上展示 ▶原始碼下載 2. HTML5 3D書本翻頁特效 ​ 利用 HTML5 和 CSS3，不但可以實現翻頁動畫，還可以 3D 的立體形式實現。下面這款書本翻頁特效，使用鼠標拖拽書本頁面即可翻動頁面，在翻頁的過程中，書本還可以呈現出3D立體的效果 - 包括書本中的圖片也是。 ▶網頁上展示 ▶原始碼下載 3. HTML5/CSS3書本翻頁3D動畫 ​ 另一種 前端工程師 設計的簡潔版書本3D動畫特效，當我們將鼠標滑過書本時，書本就會自動一頁頁翻過去，書本的3D效果非常鮮明、極簡舒服。 ▶網頁上展示 ▶原始碼下載 4.超逼真書本翻頁動畫(CSS3版) ​ 這款 CSS3 動畫效果是 前端工程師 模擬書本翻頁的動畫特效。當鼠標滑過書本右上角時，書本即可向前翻一頁，而且翻頁動畫非常逼真。由於 CSS3 的運用，我們並不需要使用複雜的圖片來製造逼真的書本效果，書本翻頁可以很簡單地完成。 ▶網頁上展示 ▶原始碼下載 5.超逼真書本翻頁動畫(jQuery版) ​ 這款 jQuery 書本翻頁 3D 動畫，功能更加強大，支援頁數不限，並且也有非常逼真美觀的視覺效果。書本的內容支持所有的 HTML5教學 中的元素，彈性高、強大好用。 ▶網頁上展示 ▶原始碼下載 6.jQuery/CSS3書本翻頁動畫特效 ​ 這是一款基於 jQuery 和 CSS3 的書本翻頁動畫特效，外觀清新、還有指示便於操作。除了典籍滑鼠來翻頁之外，我們還可以直接點擊左右按鈕進行翻頁。 ▶網頁上展示 ▶原始碼下載 相關連結： HTML5教學的三個基本款(1):入門時,這兩樣東西一定要知道 HTML5教學的三個基本款(2):原來這東西這麼關鍵!? HTML5教學的三個基本款(3):標籤正在進步中,你呢?? 達內教育開幕　培養台灣IT人才進入全球企業 人工智慧時代怕失業?有了Python課程,你就是比別人...

不能不上的網路設計課程在這裡!除了解釋CSS語法,還告訴你該怎麼在網站中生效,讓你少走冤枉路! 我們可以把網頁設計課程CSS 想像成是 HTML 標記的「化妝師」。除非你做的是整體網頁的設計，不然每一個 CSS 片段都是依附在一個標記、id 或是 class 之下。 標準的 網頁設計課程  CSS 語法如下： tag1,tag2,..., tagn { attribute 1: value; attribute 2: value; … attribute n:value; } 語法解析： tag1,tag2,..., tagn：最前方以要設定的標記名稱 ( 如本例為「tag1」) 為開始。如有超過一個以上的標記，就使用逗號隔開。 { }：以大括號來包含該標記的所有的設定 attribute 1: value;："attribute "為要設定的屬性名稱，"value"為屬性值，屬性名稱與值以冒號來做隔開。如有超過一個以上的屬性設定，就使用分號隔開。 以上例子為所有的標記名稱 (tag1,tag2,..., tagn) 均設定同樣的屬性，但這些標記各自獨立，無依屬關係。如有依屬關係則為以下所示： tag1 tag2 { attribute 1: value; attribute 2: value; … attribute n:value; } 此例中，tag1 與 tag2 中間無任何的逗號，而 tag2 在 tag1 的後方，意思為「tag2 是 tag1 裡面的標記」，也就是我們要設定的屬性值是「tag1 裡面的 tag2 所屬的內容」，而不是把 tag1 和 tag2 設定成同一組屬性值。 至於如何把所設定的 CSS 值在網站中生效？ 網路行銷課程 和 網頁設計課程 提供兩種方法： 1. 以外部的檔案存檔 先把上述的 css 內容以「.css」的檔案名稱存在網站主機上。此例為「style.css」，然後在其對應的 HTML 檔案中使用「<link>」標記引入，如下所示： <link rel=stylesheet type=“text/css” h...