11.10学习了第九章表单
知识点:form标签,单行文本框简介属性、密码文本框简介属性
11.11今天学习了表单
知识点:
单选框、复选框、普通按钮、提交按钮、重置按钮、文件上传、对行文本框、下拉列表、select标签、option标签
11.12今天学习了框架、css简介、css选择器
知识点:
iframe标签、 外部样式表 、内部样式表 、行内样式表 、元素选择器、id、class、后代、群组选择器
11.13今天学习了字体样式
知识点:字体类型、大小、粗细、风格、颜色
11.14
今天学习了第十四章文本样式
知识点:首行缩进、水平对齐、文本修饰、大小写、行高、间距
11.15今天完善了上周的网页
11.16今天完成了部分表单网页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>员工管理</title>
<style type="text/css">
.span1{
font-weight: 700;
}
.span2{
color:grey;
}
.span3{
color: orange;
}
.button1{
background-color: rgb(44, 133, 206);
color:white;
width: 100px;
}
.button2{
background-color: rgb(44, 133, 206);
color:white;
width: 150px;
}
.t1{
width: 50px;
text-align: center;
}
.t2{
width: 100px;
text-align: center;
}
.t3{
width:120px;
text-align: center;
}
.t4{
width: 100px;
text-align: center;
}
.t5{
width: 100px;
text-align: center;
}
.t6{
width: 150px;
text-align: center;
}
.t7{
width: 200px;
text-align: center;
}
.t8{
width: 100px;
text-align: center;
}
td{text-align: center;}
</style>
</head>
<body>
<form method="post">
<span class="span1">姓名</span> <input type="text" size="20" value="请输入员工姓名" class="span2"/>
<span class="span1">性别</span> <select>
<option selected class="span2">请选择</option>
<option>男</option>
<option>女</option>
</select>
<span class="span1">入职时间</span> <span class="span1">从</span>
<input type="date" name="开始时间"> 至 <input type="date" name="结束时间">
<input type="button" value="查询" class="button1">
</form>
<br>
<input type="button" value="+新增员工" class="button2">
<input type="button" value="-批量删除" class="button2">
<br><br>
<table border="1">
<tr>
<th class="t1"><input type="checkbox"></th>
<th class="t2">姓名</th>
<th class="t3">图像</th>
<th class="t4">性别</th>
<th class="t5">职位</th>
<th class="t6">入职日期</th>
<th class="t7">最后操作时间</th>
<th class="t8">操作</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵敏</td>
<td></td>
<td>女</td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2022-07-22 12:05:20</td>
<td class="span3">编辑 删除</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵敏</td>
<td></td>
<td>女</td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2022-07-22 12:05:20</td>
<td class="span3">编辑 删除</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵敏</td>
<td></td>
<td>女</td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2022-07-22 12:05:20</td>
<td class="span3">编辑 删除</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵敏</td>
<td></td>
<td>女</td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2022-07-22 12:05:20</td>
<td class="span3">编辑 删除</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵敏</td>
<td></td>
<td>女</td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2022-07-22 12:05:20</td>
<td class="span3">编辑 删除</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵敏</td>
<td></td>
<td>女</td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2022-07-22 12:05:20</td>
<td class="span3">编辑 删除</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵敏</td>
<td></td>
<td>女</td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2022-07-22 12:05:20</td>
<td class="span3">编辑 删除</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵敏</td>
<td></td>
<td>女</td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2022-07-22 12:05:20</td>
<td class="span3">编辑 删除</td>
</tr>
</table>
</body>
</html>
11.17今天完善了表单制作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>员工管理</title>
<style type="text/css">
.span1{
font-weight: 700;
}
.span2{
color:grey;
}
.span3{
color: orange;
}
.span4{
color: red;
}
.span5{
text-align: right;
}
.span6{
color:grey;
width: 5px;
}
.button1{
background-color: rgb(44, 133, 206);
color:white;
width: 100px;
}
.button2{
background-color: rgb(44, 133, 206);
color:white;
width: 150px;
}
.button3{
background-color: orange;
color: white;
}
.t1{
width: 150px;
text-align: center;
}
.t2{
width: 100px;
text-align: center;
}
.t3{
width:120px;
text-align: center;
}
.t4{
width: 100px;
text-align: center;
}
.t5{
width: 100px;
text-align: center;
}
.t6{
width: 150px;
text-align: center;
}
.t7{
width: 200px;
text-align: center;
}
.t8{
width: 100px;
text-align: center;
}
td{text-align: center;}
</style>
</head>
<body>
<form method="post">
<span class="span1">姓名</span> <input type="text" size="20" value="请输入员工姓名" class="span2"/>
<span class="span1">性别</span> <select>
<option selected class="span2">请选择</option>
<option>男</option>
<option>女</option>
</select>
<span class="span1">入职时间</span> <span class="span1">从</span>
<input type="date" name="开始时间"> 至 <input type="date" name="结束时间">
<input type="button" value="查询" class="button1">
</form>
<br>
<input type="button" value="+新增员工" class="button2">
<input type="button" value="-批量删除" class="button2">
<br><br>
<table border="1">
<tr>
<th class="t1"><input type="checkbox"></th>
<th class="t2">姓名</th>
<th class="t3">图像</th>
<th class="t4">性别</th>
<th class="t5">职位</th>
<th class="t6">入职日期</th>
<th class="t7">最后操作时间</th>
<th class="t8">操作</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵敏</td>
<td></td>
<td>女</td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2022-07-22 12:05:20</td>
<td class="span3">编辑 删除</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵敏</td>
<td></td>
<td>女</td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2022-07-22 12:05:20</td>
<td class="span3">编辑 删除</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵敏</td>
<td></td>
<td>女</td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2022-07-22 12:05:20</td>
<td class="span3">编辑 删除</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵敏</td>
<td></td>
<td>女</td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2022-07-22 12:05:20</td>
<td class="span3">编辑 删除</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵敏</td>
<td></td>
<td>女</td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2022-07-22 12:05:20</td>
<td class="span3">编辑 删除</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵敏</td>
<td></td>
<td>女</td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2022-07-22 12:05:20</td>
<td class="span3">编辑 删除</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵敏</td>
<td></td>
<td>女</td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2022-07-22 12:05:20</td>
<td class="span3">编辑 删除</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵敏</td>
<td></td>
<td>女</td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2022-07-22 12:05:20</td>
<td class="span3">编辑 删除</td>
</tr>
</table>
<br><br>
<span class="span1">每页展示记录数</span>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<span class="span5">共<span class="span4">500</span>条数据</span>
<input type="button" value="<">
<input type="button" value="1" class="button3">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="...">
<input type="button" value="50">
<input type="button" value=">">
<span>跳至</span>
<input type="text" value="1" class="span6"><span>页</span>
</body>
</html>
11.18今天学习了第15、16章的内容
知识点:边框演示简介、整体样式、布局样式、列表项符号、列表项图片