HTML5教學基礎語法教學彙整

這次帶你從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; (設定值依序為粗細、線條樣式、顏色)

 給你最簡單的HTML5教學,讓你要當前端工程師也不難!

 

 推薦閱讀

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

    uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()