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教學,讓你要當前端工程師也不難!

 

​ 推薦閱讀

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

arrow
arrow
    文章標籤
    Python人工智慧 UI課程 Java Python UI 機器學習 AI AI人工智慧 人工智慧 HTML5教學 社群行銷 python搜尋引擎 HTML5
    全站熱搜

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

    E-mail轉寄