1 任务要求
1.1 任务一#电子账单
1.2 任务二#李白诗词
1.3 任务三#豆瓣电影
1.4 任务四#登录注册
2 制作过程
2.1 任务一代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--创建页面标题-->
<title>表格标签</title>
</head>
<body>
<!--在内部创建一个一级标题-->
<h1>工商银行电子汇款单</h1>
<!--创建列表;border生成线框,cellpadding缩小间距,cellspacing将线框变为单横线-->
<table border="1" cellpadding="0" cellspacing="0">
<!--tr指令创建一行-->
<tr>
<!--td指令创建一列,colspan属性列合并，rowspan属性行合并,style属性修改-->
<td colspan="2"><b>回单类型</b></td>
<td style="width: 200px;">网上转账汇款</td>
<td colspan="2"><b>指令序号</b></td>
<td style="width: 200px;">HQH0000000000000013878172</td>
</tr>
<tr>
<td rowspan="4"><b>收 <br>款 <br>人</b></td>
<td>户名</td>
<td style="width: 200px;">老牟</td>
<td rowspan="4""><b>付 <br>款 <br>人</b></td>
<td>户名</td>
<td style="width: 200px;">老刘</td>
</tr>
<tr>
<td><b>卡号</b></td>
<td style="width: 200px;">0000000000001</td>
<td><b>卡号</b></td>
<td style="width: 200px;">0000000000002</td>
</tr>
<tr>
<td>地区</td>
<td style="width: 200px;">南京</td>
<td>地区</td>
<td style="width: 200px;">杭州</td>
</tr>
<tr> <td><b>网点</b></td>
<td style="width: 200px;">工商江苏南京业务处理中心</td>
<td><b>网点</b></td>
<td style="width: 200px;">江苏徐州业务中心</td>
</tr>
<tr>
<td colspan="2"><b>币种</b></td>
<td style="width: 200px;">人民币</td>
<td colspan="2"><b>钞汇标志</b></td>
<td style="width: 200px;"><u>钞票</u></td>
</tr>
<tr>
<td colspan="2"><b>金额</b></td>
<td style="width: 200px;">1.00元</td>
<td colspan="2"><b>手续费</b></td>
<td style="width: 200px;">0.57元</td>
</tr>
<tr>
<td colspan="2"><b>合计</b></td>
<td colspan="4">人民币(大写)：壹元整</td>
</tr>
<tr>
<td colspan="2"><b>交易时间</b></td>
<td style="width: 200px;"><i>2017年6月1日</i></td>
<td colspan="2"><b>时间戳</b></td>
<td style="width: 200px;"><i>2017-06-01-13.00.00。0000</i></td>
</tr>
</table>
<!--打印行-->
<p>
票据打印时间:2017-0-01 15:00:12
</p>
<p>
<!--文字加中划线-->
<del>票据打印单位:江苏徐州业务中心</del>
</p>
<p>
操作员:大管
</p>
</body>
</html>
2.2 任务二代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>李白诗词</title>
</head>
<body>
<!--big放大字体-->
<h1><big>将进酒</big> 君不见黄河之水天上来</h1>
<table >
<tr>
<!--img插入图片其中src里的图片路径与html代码文件在同一文件夹，图片是网上随便找的-->
<td><img width="300px" height="432px" src="img/屏幕截图 2025-01-08 131929.png" alt="十步杀一人"></td>
<td>
<p>君不见，黄河之水天上来，奔流到海不复回。</p>
<p>君不见，高堂明镜悲白发，朝如青丝暮成雪！</p>
<p>人生得意须尽欢，莫使金樽空对月。</p>
<p>天生我材必有用，千金散尽还复来。</p>
<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
<p>岑夫子，丹丘生，将进酒，杯莫停。</p>
<p>与君歌一曲，请君为我倾耳听。</p>
<p>钟鼓馔玉不足贵，但愿长醉不复醒。</p>
<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
<p>主人何为言少钱，径须沽取对君酌。</p>
<p>五花马、千金裘，呼儿将出换美酒，与尔同销万古愁！</p></td>
</tr>
</table>
</body>
</html>
2.3 任务三代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>豆瓣电影</title>
</head>
<body>
<h1>热门电影模块</h1>
<!--hr标签，生成一个分割线-->
<hr>
<table>
<tr>
<td><big><b>最近热门电影</b></big></td>
<!--&emsp转义符，即水平制表符-->
<td> 热门</td>
<td> 最新</td>
<td> 豆瓣高分</td>
<td> 冷门佳作</td>
<td> 华语</td>
<td> 欧美</td>
<td> 韩国</td>
<td> 日本</td>
<td>  <a href="#">更多>></a></td>
</tr>
</table>
<hr>
<table>
<tr>
<!--img标签导入图片;src属性写入图片路径-->
<td><img src="img/霸王别姬.png" alt="" width="200ox" height="300px"><p>霸王别姬</p></td>
<td><img src="img/功夫.png" alt="" width="200px" height="300px"><p>功夫</p></td>
<td><img src="img/喜剧之王.png" alt="" width="200px" height="300px"><p>喜剧之王</p></td>
<td><img src="img/大话西游之月光宝盒.png" alt="" width="200px" height="300px"><p>大话西游之月光宝盒</p></td>
</tr>
<tr>
<td><img src="img/大话西游之大圣娶亲.png" alt="" width="200px" height="300px"><p>大话西游之大圣娶亲</p></td>
<td><img src="img/千与千寻.png" alt="" width="200px" height="300px"><p>千与千寻</p></td>
<td><img src="img/疯狂动物城.png" alt="" width="200px" height="300px"><p>疯狂动物城</p></td>
<td><img src="img/蜡笔小新剧场版大人帝国的反击.png" alt="" width="200px" height="300px"><p>蜡笔小新剧场版大人帝国的反击</p></td>
</tr>
</table>
</body>
</html>
2.4 任务四代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录注册</title>
<!--利用css统一修改指定类的属性，这里只修改颜色和对齐方式-->
<style>
.title{
text-align: center;
background-color: gray;
}
.tip{
background-color: gainsboro;
text-align: right;
}
.input{
background-color: gainsboro;
}
</style>
</head>
<body>
<!--table标签创建表格-->
<table>
<tr>
<!--colspan属性合并列单元格,class属性分配类,为节省时间需熟练使用粘贴复制-->
<td colspan="2" class="title">用户注册</td>
</tr>
<tr>
<td class="tip">用户名</td>
<!--placeholder属性,指在输入框内做提示内容-->
<td class="input"><input type="text" name="用户名" placeholder="请输入您的用户名"></td>
</tr>
<tr>
<td class="tip">密码</td>
<td class="input"><input type="password" name="密码" id="" placeholder="请输入您的密码"></td>
</tr>
<tr>
<td class="tip">性别</td>
<td class="input">
<!--checked属性，指在打开页面时默认选择-->
<input type="radio" name="性别" id="" value="男" checked>男
<input type="radio" name="性别" id="" value="女">女
</td>
</tr>
<tr>
<td class="tip">爱好</td>
<td class="input">
<input type="checkbox" name="爱好" id="">写作
<input type="checkbox" name="爱好" id="">听音乐
<input type="checkbox" name="爱好" id="">体育
</td>
</tr>
<tr>
<td class="tip">省份</td>
<td class="input">
<!--select标签创建提供选项菜单的控件，option标签为可选择的属性-->
<select name="省份" id="">
<option value="安徽省">安徽省</option>
<option value="陕西省">陕西省</option>
<option value="四川省">四川省</option>
</select>
</td>
</tr>
<tr>
<td class="tip">自我介绍</td>
<td class="input">
<!--textarea标签创建可输入大段文字的输入框-->
<textarea name="自我介绍" id="" style="width: 200px; height: 100px;"></textarea>
</td>
</tr>
<tr>
<td colspan="2" class="title">
<input type="submit" name="提交" style="background-color: ;">
<input type="reset" name="重置" id="">
</td>
</tr>
</table>
</body>
</html>
3 效果展示
3.1 任务一
3.2 任务二
3.3 任务三
3.4 任务四
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
