Web前端——表格表单练习
2024-04-10 16:13:23
文章目录
- 题目一：电子汇款单的制作
- 源代码及效果展示
- 题目二： 热门电影模板的制作
- 源代码及效果展示
- 题目三：用户注册页面的制作
- 源代码及效果展示
题目一：电子汇款单的制作
要求：
源代码及效果展示
网页源代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>工商银行电子汇款单</title><style type="text/css">.span{height: 10px;display: block; /*将span标签转化为块元素*/}table,td{margin: 0px;border: 2px solid black;border-collapse: collapse; /*设置单元格的边框合并为1*/}</style>
</head>
<body><h2>工商银行电子汇款单</h2><table><tr><td colspan="2"><b>回单类型</b></td><td>网上转账汇款</td><td colspan="2"><b>指令序号</b></td><td>HQH000000000013878172</td></tr><tr><td rowspan="4" style="text-align: center; width: 30px;"><b>收款人</b></td><td>户名</td><td>老牟</td><td rowspan="4" style="text-align: center; width: 30px;"><b>付款人</b></td><td>户名</td><td>老刘</td></tr><tr><td><b>卡号</b></td><td>000000000001</td><td><b>卡号</b></td><td>000000000002</td></tr><tr><td>地区</td><td>南京</td><td>地区</td><td>杭州</td></tr><tr><td><b>网点</b></td><td>工商江苏南京业务处理中心</td><td><b>网点</b></td><td>江苏徐州业务处理中心</td></tr><tr><td colspan="2"><b>币种</b></td><td>人民币</td><td colspan="2"><b>钞汇标志</b></td><td>钞票</td></tr><tr><td colspan="2"><b>金额</b></td><td>1.00元</td><td colspan="2"><b>手续费</b></td><td>0.57元</td></tr><tr><td colspan="2"><b>合计</b></td><td colspan="4">人民币（大写）：壹圆整</td></tr><tr><td colspan="2"><b>交易时间</b></td><td>2017年6月1日</td><td colspan="2"><b>时间戳</b></td><td><i>2017-06-01-13.00.00.00000</i></td></tr></table><div><span class="span">票据打印时间：2017-06-01 15:00:12</span><br><span class="span"><del>票据打印单位：江苏徐州业务中心</del></span><br><span class="span">操作员：大曾</span><br></div>
</body>
</html>
网页效果图：
题目二： 热门电影模板的制作
要求：
源代码及效果展示
网页源代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>热门电影模块</title><style type="text/css">.table1{border-right: none;border-left: none;
}
.td1{border: none;
}
.table2{border:none;}
.td2{border:none; padding-top: 20px;}</style>
</head>
<body><h3>热门电影板块</h3><table class="table1" border="1px" cellspacing="0" width="1110px" height="40px" class="table1" bordercolor="gray"><tr><td class="td1"><strong>最近热门电影</strong></td><td class="td1">热门</td><td class="td1">最新</td><td class="td1">豆瓣高分</td><td class="td1">冷门佳片</td><td class="td1">华语</td><td class="td1">欧美</td><td class="td1">韩国</td><td class="td1">日本</td><td style="text-align: right;" class="td1">更多>></td></tr></table><table border="1px" cellspacing="0" width="800px" height="40px" style="margin-top: 2px;" class="table2"><tr><td class="td2"><img src="E:\Web前端作业\project02\images\盲猜火车8.1.png"></td><td class="td2"><img src="E:\Web前端作业\project02\images\贝尔科实验.png"></td><td class="td2"><img src="E:\Web前端作业\project02\images\加州公路巡警.png"></td><td class="td2"><img src="E:\Web前端作业\project02\images\歌声不绝.png"></td></tr><tr><td class="td2">猜火车8.1</td><td class="td2">贝尔科实验</td><td class="td2">加州公路巡警</td><td class="td2">歌声不绝</td></tr><tr><td class="td2"><img src="E:\Web前端作业\project02\images\明日的我与昨日的我.png"></td><td class="td2"><img src="E:\Web前端作业\project02\images\速度与激情.png"></td><td class="td2"><img src="E:\Web前端作业\project02\images\极速特工.png"></td><td class="td2"><img src="E:\Web前端作业\project02\images\金刚狼3：殊死一战.png"></td></tr><tr><td class="td2">明日的我与昨日的我</td><td class="td2">速度与激情</td><td class="td2">极速特工</td><td class="td2">金刚狼3：殊死一战</td></tr></table>
</body>
</html>
网页效果图：
题目三：用户注册页面的制作
要求：
源代码及效果展示
网页源代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册</title>
</head>
<style type="text/css">#center{text-align: center;background-color: #8D8A86;
}
tr td,th{border:1px solid white;background-color: #DFDCD9;
}</style>
<body><form><table><tr><td colspan="2" id="center" >用户注册</td></tr><tr><td>用户名</td><td><input type="text" name="UserName" maxlength="20"></td></tr><tr><td>密码</td><td><input type="password" name="UserPass" maxlength="20"></td></tr><tr><td>性别</td><td><input type="radio" name="sex" checked="true" >男<input type="radio" name="sex">女</td></tr><tr><td>爱好</td><td><input type="checkbox" name="like">写作<input type="checkbox" name="like">听音乐<input type="checkbox" name="like">体育</td></tr><tr><td>省份</td><td><select><option value ="shaanxi" selected="selected">陕西省</option><option value ="shanx">山西省</option></select></td></tr><tr><td>自我介绍</td><td width="25px" height="5px" ><textarea name="intro" style="height: 50px; overflow-y: scroll;">这个家伙什么也没留下</textarea></td></tr><tr><td colspan="2" id="center"><input type="submit" name="send"><input type="reset" name="reset"></td></tr></table></form>
</body>
</html>
网页效果图：
Web前端——表格表单练习相关推荐
- web day02 表格 表单及HTML常用的表单控件
一. 表格的标签及属性 table属性 Width.height 宽高(单位是像素或百分比) align 对齐 border 外边框 bgcolor 背景色 background 背景图片 Cells ...
- web前端之表单验证（一）
表单验证之错误信息右方提示 说明 图1:简单效果图, 图2.3:当所有文本框都为空或者输入不符合要求时,会在右方提示错误. 效果图 html代码 <body><h2>注册用户: ...
- Web前端 | HTML表单form
✅作者简介:一位材料转码农的选手,希望一起努力,一起进步!
- 2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单 标签 图片 图片<img src="#" alt="文本说明 不能加载图片时显示" title= ...
- 从零开始学前端：表单制作 --- 今天你学习了吗？（CSS：Day05）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:表格制作 - 今天你学习了吗?(CSS:Day04) 文章目录 从零开始学前端:程序猿小白也可以完全掌握! ...
- web网页的表单排版利器--960css
表单排版样式 960css 前言 一般web网页的表单排版,大家都习惯用table排版,自己需要根据实际需要去定义TR和TD,很多时候对于TD的高宽度.是否合并行,合并列,都要去做一些处理,这些都是比 ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...
- 2020使用html、js、正则表达式做一个前端注册表单信息验证
使用html.js.正则表达式做一个前端注册表单信息验证 小小前端练手项目,主要运用正则表达式对用户名.密码.确认密码.电子邮箱.手机号码.生日.身份证号码的验证 1.用户名不正确(需由由英文字母和数 ...
- 【4001】通过html做一个静态页面的表格表单，嘿嘿。
学习目标: [ 1]学习前端第一天掌握 html(主要表单表格相关)入门知识,梳理今天的学习知识点: [ 2]通过已学知识做静态页面表格表单完成效果,效果图如下: 表单不加颜色是这样的,自己看着设计: ...
最新文章
- 这么设计，Redis 10亿数据量只需要100MB内存
- 信息系统项目管理师-项目成本管理考点笔记
- ubuntu 搜狗安装搜狗输入法(fcitx)亲测有用
- 艾诺迪亚4一次性完美刷经验刷金钱方法图解[亲测无需闪退游戏]
- maven自带clean_maven之clean、install命令
- （数据库系统概论|王珊）第二章关系数据库-第二节、第三节：关系操作和关系完整性
- Java中间MD5加密算法完整版
- 那些年我们踩过的坑-NSTimer
- It’s Android Time
- vlc_for_android(基于git-3.0.0)快速集成并播放电视节目直播
- 计算机无法打开浏览器,Internet选项打不开怎么办？IE浏览器internet选项无法打开解决方法...
- 时尚达人玩转短裤短裙凉鞋搭配
- 解决笔记本电脑外接显示器后声音播放不了的问题
- springboot多数据源配置导致mybatis的下划线转驼峰命名不起作用
- 这是我们公司总结的一些关于中文乱码问题的一些解决方案和经验和大家分享！
- 为什么 MySQL 采用 B+ 树作为索引？
- 计算机系统（八）：网络层（上篇）
- c# 获取两个时间之间的时间差
- 安全课堂｜关于小程序AppSecret密钥泄露漏洞官方
- 对话黑客：四款最佳的反监控移动APP