html5 css3
html5輸入新增類型：search, email, url, date, tel, number, range, month, week, datetime, datetime-local, color.
使用的語法：<input type="類型" />
datalist：為選項列表，打開頭後，顯示有可能的值。
<input type="text" list="清單名稱" />
<datalist id="清單名稱（同上）">
<option value="可能值1">
<option value="可能值2">
...
</datalist>
placeholder：在輸入框未輸入時，所顯示的預設文字。
<input type="text" placeholder="預設的文字">
autofocus：預設游標，使用者進入後的游標第一位置。
<input type="text" autofocus />
required：為一boolean值，存在時，輸入文字即為表單填寫的值。
<input type="text" required />
pattern：限制輸入格式，[]：表示數字範圍；{}：表示次數。
<input type="text" pattern="[範圍]{次數}">
border-radius：設定邊界的圓弧。
.box{
background:pink;
height:150px;
width:200px;
#設定全部的角：
border-radius:15px;
#單角設定：
border-top/bottom-left/right-radius:15px;
#多角設定：
border-radius:左上 右上 右下 左下;
}
box-shadow：設定區塊的陰影。
.box{
#當<inset>沒寫，表示向外。
box-shadow:inset x軸偏移量 y軸偏移量 模糊強度 擴張強度 顏色;
}
text-show：設定文字陰影。
h2{
text-show:x軸偏移量 y軸偏移量 模糊強度 顏色;
}
color：設定顏色。
.element{
color:rgba(紅,綠,藍,透明度(0~1))
color:hsla(色調,飽和度(%),亮度(%),透明度(0~1))
}
opacity：設定透明度。
div{
#值在0~1之間
opacity:值;
}
gradients：分為線性漸層(linear gradient)和徑向漸層(radial gradient)。
方向： to top (0 deg)
↑
to left (270 deg)← → to right (90 deg)
↓
to bottom (180 deg)
形狀：circle以圖為中心，ellipse以外框為中心，還有四種size屬性(closest-side, closest-corner, farthest-side, farthest-corner)。
.element{
background:linear-gradient(方向(去to...),顏色1,顏色2);
background:radial-gradient(形狀 size,顏色)
#若想以某個角為圓心，可以這樣寫：
background:radial-gradient(形狀 at 位置, 顏色1,顏色2);
}
@font-face：設定字型，以方便之後使用。
#設定字型
@font-face{
#定義名稱
font-family:名稱;
#到哪邊會有這麼字型
src:url(http://位置/字型檔案);
#附加樣式，斜體、粗體...等等
font-style:italic;
font-weight:bold;
}
#呼叫套用
h1{
font-family:名稱;
}
transform：移動位置，只適合靜態區塊。
.element{
transform:translate(x軸位移量,y軸位移量)'
#只設定x軸位移量
transform:translateX(10px);
#只設定y軸位移量
transform:translateY(10px);
}
rotate：旋轉角度，從上(0deg)、右(90deg)、下(180deg)、左(270deg)。
.element{
transform:totate(角度);
}
transition：可以設定改變某些性質。
{
transition:欲改變之屬性 發生時間 (s) 發生速度 多久後開始發生;
}
架構：
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style>
ul li{
padding:10px;
border:pink solid 1px;
margin:15px;
display:inline;
}
.bodies{
padding:35px;
background-color:pink;
}
.block{
height:150px;
padding:15px;
border:white solid 1px;
margin:25px;
border-radius:5px 60px 0 60px;
box-shadow:2px 2px 5px green;
transition:transform;
background:linear-gradient(to right bottom, #CED8F6, white)
}
.block:hover{
transform:translate(5px,5px);
}
</style>
</head>
<body>
<div class="bodies">
<div class="block">
<h3>清單</h3>
<input type="text" list="list">
<datalist id="list">
<option value="apple">
<option value="banana">
<option value="cat">
<option value="dog">
<option value="dance">
</datalist>
</div>
<div class="block">
<h3>預設文字</h3>
<input type="text" placeholder="請輸入...">
</div>
<div class="block">
<h3>格式限制</h3>
輸入三位數字
<input type="text" pattern="[0-9]{3}"><br><br>
輸入五個小寫英文
<input type="text" pattern="[a-z]{5}">
</div>
</div>
</body>
</html>
沒有留言:
張貼留言