CSS, WEB DESIGN
HTML5

HTML5教學解碼網頁區塊圖和表格

2019-01-15

HTML5教學解碼網頁區塊圖和表格
HTML5教學解碼網頁區塊圖和表格

沒上過HTML5教學的人一定不知道網頁上常見的色塊,表格和圖片其實都可以用程式語言堆建出來!

CSS DIV 排版對前端工程師已經是基本的網頁排板方式,透過簡單的 DIV 排版可以很容易創造出各式各樣的網頁版型,本文主要講解 CSS DIV 單欄式的網頁排版設計,算是透過 DIV 排版最入門的方式了,請在HTML5教學中多搭配練習。

1. 區塊“<span>”“<div>”的屬性設定

屬性名稱 說明 設定範例
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 設定邊框的線條粗細
smalllargeptpxcm%
border-width:6px;
border-color 設定邊框的顏色
也可以直接使用“bold”指定之
border-color:blue;
border-top
border-left
border-bottom
border-right
針對邊框的上方線條做單獨調整
針對邊框的左方線條做單獨調整
針對邊框的下方線條做單獨調整
針對邊框的右方線條做單獨調整
border-top:2px dotted blue; (設定值依序為粗細、線條樣式、顏色)

2. 跟外框相關的CSS設定 (常用)

屬性名稱 說明 設定範例
width 區塊寬度 width: 600px
height 區塊高度 height: 400px
margin 邊界距離設定
共四個數值,分別為上、右、下、左
margin:30px 10px 10px 30px;
border-radius 邊界方框導圓角的圓角程度,數值越大越圓
共四個數值,分別為上、右、下、左
border-radius:50px 0px 50px 0px
background-color 區塊背景顏色 background-color:red
background-image 區塊背景圖片 background-image:url
background-repeat 區塊背景圖片重複方式
分別有 no-repeat(不重複) repeat-xrepeat(重複) repeat-y
background-repeat:no-repeat
background-position 區塊背景圖片放置位置
分別有top,center,bottom等,也可能是百分比或數值
background-position:center left

其實除了文字之外,前端工程師在HTML5教學網頁的各個元素進行 CSS 格式設定時,有一個 「盒子模型 (box model) 的概念:就是所有要被設定的元素,都會被視為一個盒子“<span>”“<div>”

以上這兩種身為前端工程師不可不知的HTML5教學你學會了嗎?

推薦閱讀:

HTML5教學上完還不夠,加強CSS語法讓你的網站獨樹一格

上到賺到,HTML5教學還不夠,老師還繼續教CSS語法

網路行銷課程上完落實阿宅的生涯規劃,在家工作+電動的斜槓人生

超強HTML5基礎教學(上):教你基本功,一秒就上手!

超強HTML5基礎教學(中):活用表格標籤指令

超強HTML5基礎教學(下):利用標籤指令輕鬆掌控多媒體

CSS是什麼?網頁設計課程教你認識他!!基礎一:在HRML中導入CSS!!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料