可以将一个表格分为三个部分
<body>
<table border="1" width="50%" align="center">
<!--
可以将一个表格分为三个部分
头部 thead 头部的单元格用 th 来表示
主体 tbody
底部 tfoot
如果表格中没有使用tbody而是直接使用tr的话
浏览器会自动创建一个tbody，并将首页tr放入其中
tr不是tbody的子标签
align="center"
此方法可以使表格居中
-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
<th>武力值</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>11</td>
<td>北京</td>
<td>30.09</td>
</tr>
<tr>
<td>张三</td>
<td>11</td>
<td>北京</td>
<td>30.09</td>
</tr>
<tr>
<td>张三</td>
<td>11</td>
<td>北京</td>
<td>30.09</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>评价</td>
<td>b2</td>
<td>c3</td>
<td>d4</td>
</tr>
</tfoot>
</table>
</body>表格的CSS样式的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格的CSS样式的使用</title>
<style>
table{
width: 50%;
border: 5px solid rgb(85, 85, 83);
border-spacing: 10px;
/* border-spacing 用来指定边框之间的距离 */
border-collapse: collapse;
/* border-collapse 设置边框的合并
可选值： separate 默认值，不合并
collapse 合并单元格
*/
}
td{
border: 1px solid rgb(10, 90, 10);
height: 40px;
/* vertical-align: center; */
/* vertical-align 用来设置单元格内文字位置
可选值：
top 上
right 右
left 左
bottom 下
center 居中
*/
text-align: center;
/* text-align: center;
直接设置表格内文字垂直居中，不受任何其他影响
*/
}
tr:nth-child(2n+1){
background-color: #bfc;
/*
tr:nth-child(2n) 选择偶数行的表格，2n+1为奇数行
*/
}
th{
border: 1px solid rgb(10, 90, 10);
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
<th>武力值</th>
</tr>
</thead>
<!-- 如果表格中没有使用tbody而是直接使用tr的话
浏览器会自动创建一个tbody，并将首页tr放入其中
tr不是tbody的子标签 -->
<tbody>
<tr>
<td>张三</td>
<td>11</td>
<td>北京</td>
<td>30.09</td>
</tr>
<tr>
<td>张三</td>
<td>11</td>
<td>北京</td>
<td>30.09</td>
</tr>
<tr>
<td>张三</td>
<td>11</td>
<td>北京</td>
<td>30.09</td>
</tr>
<tr>
<td>张三</td>
<td>11</td>
<td>北京</td>
<td>30.09</td>
</tr>
<tr>
<td>张三</td>
<td>11</td>
<td>北京</td>
<td>30.09</td>
</tr>
<tr>
<td>张三</td>
<td>11</td>
<td>北京</td>
<td>30.09</td>
</tr><tr>
<td>张三</td>
<td>11</td>
<td>北京</td>
<td>30.09</td>
</tr><tr>
<td>张三</td>
<td>11</td>
<td>北京</td>
<td>30.09</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>评价</td>
<td>b2</td>
<td>c3</td>
<td>d4</td>
</tr>
</tfoot>
</table>
</body>
</html>表单的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单的使用</title>
</head>
<!--
-表单在现实生活中用于提交数据
-在网页中也可以使用表单，网页中的表单用于将本地的数据提交到远程服务器
-使用form来创建一个表单（form元素中一定要有action来确定提交到的服务器地址）
-->
<body>
<form action="fwq.html" target="_blank">
<!--
target 标签用来指定超链接打开的位置
_self 标签表示默认在当前页面直接打开
_blank 标签表示，重新打开一个新页面
-->
<!-- text 文本框（提交时必须指定name） -->
文本框: <input type="text" name="wbk" value="wenbenkunag">
<br><br>
<!-- password 密码框（提交时必须指定name） -->
密码框：<input type="password" name="mmk" >
<br><br>
<!--
radio 单选按钮（提交时必须指定name，并且每个按钮的设置名要相同）
value 用来分辨区分按钮，所以每个按钮名一般不相同
checked 默认显示确定此按钮
"-->
单选按钮: <input type="radio" name="dxan" value="a">
<input type="radio" name="dxan" value="b" checked>
<input type="radio" name="dxan" value="c">
<br><br>
<!--
checkbox 多选按钮（提交时必须指定name，并且每个按钮的设置名要相同）
value 用来分辨按钮，所以每个按钮名一般不相同
checked 默认显示确定此按钮
-->
多选按钮：<input type="checkbox" name="dxann" value="壹">
<input type="checkbox" name="dxann" value="贰" checked>
<input type="checkbox" name="dxann" value="叁">
<br><br>
<!--
select 下拉按钮（提交时必须指定name）
option 下拉选项按钮
value 用来分辨按钮，所以每个按钮名一般不相同
selected 默认显示确定此按钮
-->
下拉按钮：<select name="xlan" id="">
<option value="aaa">后羿</option>
<option value="bbb" selected>狄仁杰</option>
<option value="ccc">虞姬</option>
</select>
<br><br><br>
<input type="submit">
</form>
</body>
</html>表单各种按钮的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单各种按钮的使用</title>
</head>
<body>
<!--
autocomplete="off" 关闭自动补全
readonly 将表单设置为只读，数据会提交
disabled 将表单设置为禁用，数据不会提交
autofocus 设置此表单自动获取焦点，默认以此开始
-->
<form disabled action="fwq.html" >
<input type="text" name="ptbd" autofocus>
<br><br>
<input type="submit">
<!-- submit 提交按钮 -->
<input type="reset">
<!-- reset 重置按钮 -->
<input type="button" value="自选">
<!-- button 自定义按钮，点击后没有任何作用，在使用JS后可以赋予此标签无限可能 -->
<br><br>
<button type="submit">提交按钮</button>-
<button type="reset">重置按钮</button>
<button type="button">自选按钮</button>
<!-- button 是一个双标签，作用和input基本相同，但是双标签相对于input单标签能处理更为复杂的结构，
例如：引入图片作为按钮 -->
</form>
</body>
</html>小米搜索栏练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米搜索栏练习</title>
<link rel="stylesheet" href="../../阿里矢量图/iconfont.css">
<style>
.bx{
width: 700px;
/* 设置宽度 */
height: 300px;
/* 设置高度 */
background-color: aquamarine;
/* 设置背景颜色 */
}
.bx1{
width: 400px;
height: 70px;
background-color: rgb(255, 0, 76);
}
.bx1 .bx2{
float: left;
/* 向右浮动 */
padding:0 0 0 10px;
/* 设置右内边距 */
width: 319px;
height: 68px;
border: 1px solid rgb(150, 150, 150);
/* 设置边框 */
border-right :none;
/* 设置右边框为无边框 */
}
.bx1 .bx2:focus{
border-color:rgb(255, 104, 3);
}
.bx1 .bx2:hover{
border-color:rgb(255, 104, 3);
}
.bx1 .bx3{
width: 70px;
height: 100%;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(179, 178, 178);
}
.bx1 .bx3:hover{
background-color: rgb(255, 104, 3);
border-color: rgb(255, 104, 3);
}
.bx1 .bx3 i{
font-size: 25px;
/* 设置图标字体的大小 */
color: rgb(179, 178, 178);
}
.bx1 .bx3:hover i{
color: rgb(255, 255, 255);
}
.bx2:focus{
border-color: rgb(255, 104, 3);
}
.bx2:hover{
border-color: rgb(255, 104, 3);
}
</style>
</head>
<body>
<div class="bx">
<div class="bx1">
<!-- 定义一个块元素 -->
<input class="bx2" type="text" name="wbk">
<!-- 定义搜索框 -->
<button class="bx3" type="submit">
<!-- 定义提交框 -->
<i class="iconfont"></i>
<!-- 引入图标矢量图 -->
</button>
</div>
</div>
</body>
</html>
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
