一、表格
1.table裏的屬性
table{
bordr-collapse:collapse(合併)|separate(不合並)
/*不合並邊框的時候,可以讓空的單元格隱藏*/
/*empty-cells: hide;*/
//單元格里的文字左右居中
text-align: center;
}
2.
<!-- border邊框 和 css的border不一樣
cellspacing:單元格之間的距離
單元格邊距(表格填充)(cellpadding) 代表單元格外面的一個距離,用於隔開單元格與單元格空間
單元格間距(表格間距)(cellspacing) 代表表格邊框與單元格補白的距離,也是單元格補白之間的距離
-->
3.a. rowspan 跨行
b. colspan 跨列-->
二、表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表單</title>
<style type="text/css">
</style>
</head>
<body>
<!-- <br/>換行單標籤 -->
asdffd<br />ajjdkj
<!-- action:表單要提交的服務器接口
method:表單提交方式,默認GET
一般用POST
-->
<form action="" method="">
<!-- input 框類型 -->
<!-- 輸入框 -->
<!-- placeholder="請輸入用戶名" 佔位符 給用戶的一種提示 -->
<!-- value="baidu" 最終要發送給服務器的值 -->
<!-- name 給服務器值得時候標識這個值是什麼值(身高,體重,姓名等 -->
<input type="text" placeholder="請輸入用戶名" name="userName" value="baidu">
<label for="sg">身高</label>
<input id="sg" type="text" name="sg" placeholder="請輸入身高">
<br />
<!-- 密碼框 -->
<input type="password"
placeholder="請輸入密碼" >
<br />
<!-- 單選框 -->
<input type="radio" name="gender" value="男">
<input type="radio" name="gender" value="女">
<input type="radio" name="gender" value="人妖">
<br />
<!-- 複選框 -->
<input type="checkbox" name="複選" value="nan">
<input type="checkbox" name="1複選" value="nv">
<input type="checkbox" name="2複選" value="renyao">
<br />
<!-- 上傳文件
multiple 可以上傳多個文件
-->
<input type="file" multiple>
<br />
<!-- 按鈕 -->
<input type="button" value="我是按鈕">
<br />
<!-- 隱藏的東西
如果想要收集一些不需要用戶填寫的信息。。
可以使用hidden類型input。如:註冊時的設備類型
-->
<input type="hidden" name="type" value="Mac">
<br />
<!-- 提交信息按鈕 -->
<input type="submit" value="註冊">
<br />
<!-- 清空表單信息 -->
<input type="reset" value="清空">
<br>
<input type="email" multiple="">
<br />
</form>
<!-- 如果重置/提交按鈕在form外,點擊按鈕是無效的,可以通過
form屬性關聯到form表單ID來綁定到一起
-->
<input form="first" type="reset" name="" value="清空">
<!-- 下拉框 -->
<textarea></textarea>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</body>
</html>
三、行塊對齊方式
“`
div{
/display: inline-block;行塊級標籤/
display: inline-block;
/*
baseline 基線對齊
bottom
top
middle
*/
vertical-align: baseline