美國NASDAQ上市公司
外商IT教育培訓企業

0800-777-100


週一到週五 09:00~21:00 週六到週日 09:00~18:00

熱門課程

CSS 基礎語法 - 2. 與區塊、邊框有關的CSS碼

  • 時間:2019-01-15
  • 發布:達內教育台灣
  • 來源:HTML5課程

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>"的屬性設定

屬性名稱 說明 設定範例
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;

上一篇:網路行銷人員也該上的HTML5教學2-認識HTML表格標籤
下一篇:網路行銷人員也該上的HTML5教學1-認識HTML基礎標籤與免費網頁編輯器
使用平板電腦搜尋網頁的使用者圖片|SEO優化|達內教育

2018年SEO八部曲之1-秒懂你的使用者

等網頁Loading等到想睡著的男性圖片|SEO優化|達內教育

2018年SEO 8部曲之2-你的網頁夠快嗎?

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO 8部曲之3-Title與Meta Description還是要做SEO優化

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO 8部曲之4-原來URL也可以做SEO優化

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO八部曲之5-圖片的 SEO 優化

使用平板電腦搜尋網頁的使用者圖片|SEO優化|達內教育

2018年SEO八部曲之7-Schema結構化資料

 

選擇城市和中心
貴州省

廣西省

海南省