一次學齊HTML5教學的基礎語法,不用怕這些程式碼太難,讓我們從從簡單的學起
前端工程師教你 HTML5教學之區塊及外框設定!
1. 區塊"<span>"與"<div>"的屬性設定
| 屬性名稱 | 說明 | 設定範例 |
|---|---|---|
| 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-x、 repeat(重複)、 repeat-y | background-repeat:no-repeat； |
| background-position | 區塊背景圖片放置位置 分別有top,center,bottom等， 也可能是百分比或數值 | background-position:center left； |
2.跟外框相關的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; (設定值依序為粗細、線條樣式、顏色) |
達內時代科技教育集團簡介
搶救低薪大作戰,再不來上Java課程就來不及了!
美國NASDAQ上市公司、外商IT教育培訓企業
輕鬆學HTML5教學裡的標籤
HTML5教學之靈活運用網頁設計
HTML5教學之標籤的重要性-網頁設計更上手的小秘密
Python課程新趣知:中國惹谷歌不開心,腰斬飛龍計畫(下)