首页 > 代码库 > 初学CSS3

初学CSS3

额,随便记下,笔记而已

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>table</title>
<style>
table{
border-collapse: collapse;
}
tr{
border: 1px solid red;
}
td{
border: 1px dashed blue;
}
</style>
</head>
<body>
<table border="1">
<tr>
<!--colspan横向合并列-->
<td colspan="2">1-1</td>
<td>1-2</td>
<!--<td>1-3</td>-->
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<!--<td>3-1</td>-->
<td>3-2</td>
<td>3-3</td>
</tr>
</table>

<hr/>

<table>
<tr>
<td colspan="4" align="right">123</td>
</tr>
<tr>
<td>AC</td>
<td>+/-</td>
<td>%</td>
<td>/</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>x</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
</tr>
<tr>
<td colspan="2">0</td>
<td>.</td>
<td>=</td>
</tr>
</table>

<hr/>

<!--cellspacing 列与列之间 单元格间距 cellpadding 单元格内边距-->
<table border="1" cellspacing="10" cellpadding="5">
<!--caption表名 标题-->
<caption>XX公司人员</caption>
<tr>
<!--th表头-->
<th>姓名</th>
<th>性别</th>
<th>职位</th>
<th>备注</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>小卖部</td>
<td> </td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>保洁</td>
<td> </td>
</tr>
</table>


<!--action 链接外部路径、地址 method 提交方式 get post disabled禁用 autofocus自动获取焦点-->
<form action="#" method="get">
<!--文本框-->
账号:<input type="text" placeholder="请输入账号" name="username" disabled/>
密码:<input type="password" maxlength="6" name="userPassword" autofocus/>
<!--按钮 不会发起提交-->
<input type="button" value="http://www.mamicode.com/点击我1"/>

<input type="submit"/>
<button>点击我可以提交</button>

<!--多选-->
篮球 <input type="checkbox" class="cb1"/>
足球 <input type="checkbox" class="cb1"/>
乒乓球 <input type="checkbox" class="cb1"/>
网球 <input type="checkbox" class="cb1"/>

同意 <input type="checkbox" checked="checked"/>
拒绝 <input type="checkbox"/>

<!--单选 name值自定义-->
男 <input type="radio" name="sex"/>
女 <input type="radio" name="sex"/>

<!--重置-->
<input type="reset"/>


<!--下拉框 下拉列表-->
<select name="" id="" class="">
<option value="http://www.mamicode.com/bj">北京</option>
<option value="http://www.mamicode.com/dj">东京</option>
<option value="http://www.mamicode.com/nj">南京</option>
<option value="http://www.mamicode.com/xj">西京</option>
</select>

<!--多行文本框-->
<textarea name="" id="" cols="30" rows="10"></textarea>

<!--数字-->
<input type="number" min="0" max="10"/>
<input type="email"/>
<input type="color"/>

<label for="man">男</label>
<input type="radio" name="sex" id="man"/>

<label for="woman"> 女</label>
<input type="radio" name="sex" id="woman"/>
</form>

 

</body>
</html>

还没学完,刚刚开始,感觉也不是很难

初学CSS3