css表格和表单
2018-11-26 本文已影响0人
邵毅超
表格:table,也可以设置布局，现已被div盒子所替代。那么大概的一个格式就是table-th-tr-td，th：表头，边框线border的值collapse
<!DOCTYPE html>
<html lang='en'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格</title>
<style type="text/css">
.title {
font-weight: bold;
}
table{
border-collapse:collapse;
}
tr:nth-child(even){
background-color:#FCC;
}
tr:hover{
background-color:#FF6;
}
</style>
</head>
<body>
<table width="767" height="257" border="1" align="center">
<tr class="title">
<th scope="col">学号</th>
<th scope="col">姓名</th>
<th scope="col">性别</th>
<th scope="col">住址</th>
</tr>
<tr>
<td align="center">1</td>
<td align="center">孙悟空</td>
<td align="center">男</td>
<td align="center">花果山</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">沙和尚</td>
<td align="center">男</td>
<td align="center">大唐</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">唐僧</td>
<td align="center">男</td>
<td align="center">水里</td>
</tr>
</table>
</body>
</html>
image.png
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
<style type="text/css">
p{
margin: 0px;
}
</style>
</head>
<body>
<form action="#" class="noone">
<fieldset>
<legend>基本信息</legend>
<label for="um">您的名字</label>
<input id='um' type="text" name="username">
<br><br>
<label for="sex">手机号码</label>
<input id='sex' type="text" placeholder="CN +86中国区">
<br><br>
</fieldset>
</form>
</body>
</html>
image.png
