前端大概

Insist___發表於2020-10-26

1佈局

在這裡插入圖片描述
在這裡插入圖片描述

2垂直居中和水平居中

在這裡插入圖片描述
在這裡插入圖片描述

3 表格

在這裡插入圖片描述

4列表

在這裡插入圖片描述

5 form

5.1 文字框

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

在這裡插入圖片描述

5.2 密碼框

<form>
Password: <input type="password" name="pwd">
</form>

在這裡插入圖片描述

5.3單選按鈕

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

在這裡插入圖片描述

5.4 核取方塊(Checkboxes)

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

在這裡插入圖片描述

5.5 提交按鈕

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

在這裡插入圖片描述

5.6 下拉選單

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

在這裡插入圖片描述

5.7 文字域

<textarea rows="10" cols="30">
我是一個文字框。
</textarea>

6 css

6.1 文字

在這裡插入圖片描述

相關文章