Web前端第一次作业

已于 2024-07-08 20:33:00 修改
阅读量896 收藏 17
点赞数 23
文章标签： 前端
于 2024-07-08 16:27:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fantasy543210/article/details/140269045
版权

作业一：用户注册

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <form>

        <table>

            <tr>

                <td>用户名：</td>

                <td><input type="text" name="UserName" length="15" maxlength="20"></td>

            </tr>

            <tr>

                <td>密码：</td>

                <td><input type="password" name="UserPass" length="15" maxlength="20"></td>

            </tr>

            <tr>

                <td>性别：</td>

                <td>

                    <input type="radio" name="sex" value="男" checked>男

                    <input type="radio" name="sex" value="女">女

                </td>

            </tr>

            <tr>

                <td>爱好：</td>

                <td>

                    <input type="checkbox" name="like" value="写作">写作

                    <input type="checkbox" name="like" value="听音乐">听音乐

                    <input type="checkbox" name="like" value="体育">体育

                </td>

            </tr>

            <tr>

                <td>省份：</td>

                <td>

                    <select name="province">

                        <option value="shaanxi" selected>陕西省</option>

                        <option value="shanxi">山西省</option>

                    </select>

                </td>

            </tr>

            <tr>

                <td>自我介绍：</td>

                <td><textarea name="intro" cols="25" rows="5">这个家伙什么也没留下</textarea></td>

            </tr>

            <tr>

                <td></td>

                <td><input type="submit" name="send" value="提交"></td>

            </tr>

            <tr>

                <td></td>

                <td><input type="reset" name="reset" value="重置"></td>

            </tr>

        </table>

    </form>

</body>

</html>

代码截图：

运行截图：

作业二：工商银行电子汇款单

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>工商银行电子汇款单</title>

</head>

<body>

    <!--标题-->

    <h1>工商银行电子汇款单</h1>

    <!--建表格-->

    <table

    border="1px"

    height="650px"

    width="1600px"

    align="center"

    cellspacing="5px"

    >

        <tr>

            <td width="100px" colspan="3"><b>回单类型</b></td>

            <!-- <td width="100px"></td>

            <td width="100px"></td> -->

            <td width="900px">网上转账汇款</td>

            <td width="100px" colspan="3"><b>指令序号</b></td>

            <!-- <td width="100px"></td>

            <td width="100px"></td> -->

            <td width="900px">HQH0000000000013878172</td>

        </tr>

        <tr>

            <td width="100px" rowspan="4"><b>收款人</b></td>

            <td width="100px" colspan="2">户名</td>

            <!-- <td width="100px"></td> -->

            <td width="900px">老牟</td>

            <td width="100px"  rowspan="4"><b>付款人</b></td>

            <td width="100px" colspan="2">户名</td>

            <!-- <td width="100px"></td> -->

            <td width="900px">老刘</td>

        </tr>

        <tr>

            <!-- <td width="100px"></td> -->

            <td width="100px" colspan="2"><b>卡号</b></td>

            <!-- <td width="100px"></td> -->

            <td width="900px">000000000001</td>

            <!-- <td width="100px"></td> -->

            <td width="100px" colspan="2"><b>卡号</b></td>

            <!-- <td width="100px"></td> -->

            <td width="900px">000000000002</td>

        </tr>

        <tr>

            <!-- <td width="100px"></td> -->

            <td width="100px" colspan="2">地区</td>

            <!-- <td width="100px"></td> -->

            <td width="900px">南京</td>

            <!-- <td width="100px"></td> -->

            <td width="100px" colspan="2">地区</td>

            <!-- <td width="100px"></td> -->

            <td width="900px">杭州</td>

        </tr>

        <tr>

            <!-- <td width="100px"></td> -->

            <td width="100px" colspan="2"><b>网点</b></td>

            <!-- <td width="100px"></td> -->

            <td width="900px">工商江苏南京业务处理中心</td>

            <!-- <td width="100px"></td> -->

            <td width="100px" colspan="2"><b>网点</b></td>

            <!-- <td width="100px"></td> -->

            <td width="900px">江苏徐州业务中心</td>

        </tr>

        <tr>

            <td width="100px" colspan="3"><b>币种</b></td>

            <!-- <td width="100px"></td>

            <td width="100px"></td> -->

            <td width="900px">人民币</td>

            <td width="100px" colspan="3"><b>钞汇标志</b></td>

            <!-- <td width="100px"></td>

            <td width="100px"></td> -->

            <td width="900px">钞票</td>

        </tr>

        <tr>

            <td width="100px" colspan="3"><b>金额</b></td>

            <!-- <td width="100px"></td>

            <td width="100px"></td> -->

            <td width="900px">1.00元</td>

            <td width="100px" colspan="3"><b>手续费</b></td>

            <!-- <td width="100px"></td>

            <td width="100px"></td> -->

            <td width="900px">0.57元</td>

        </tr>

        <tr>

            <td width="100px" colspan="3"><b>合计</b></td>

            <!-- <td></td>

            <td></td> -->

            <td width="900px" colspan="5">人民币（大写）：壹圆整</td>

            <!-- <td></td>

            <td></td>

            <td></td>

            <td></td> -->

        </tr>

        <tr>

            <td width="100px" colspan="3"><b>交易时间</b></td>

            <!-- <td width="100px"></td>

            <td width="100px"></td> -->

            <td width="900px"><i>2017年6月1日</i></td>

            <td width="100px" colspan="3"><b>时间戳</b></td>

            <!-- <td width="100px"></td>

            <td width="100px"></td> -->

            <td width="900px"><i>2017-06-01-13.00.00.00000</i></td>

        </tr>

    </table>

    <p>票据打印时间：2017-06-01 15:00:12</p>

    <p><s>票据打印单位：江苏徐州业务中心</s></p>

    <p>操作员：大曾</p>

</body>

</html>

代码截图：

运行截图：

作业三：李白《将进酒》

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>将进酒</title>

    <style>

        body{

            font-size: 25px;

        }

    </style>

</head>

<body>

    <h1>《将进酒》 <small>君不见黄河之水天上来</small></h1>

    <img src="https://img1.baidu.com/it/u=2884756389,2369719209&fm=253&fmt=auto&app=138&f=JPEG?w=423&h=640" alt="图片" style="float:left">

    <pre style="position: absolute; top: 70%; left: 60%; transform: translate(-80%, -80%);">

        <b>君不见黄河之水天上来，奔流到海不复回。</b>

        <b>君不见高堂明镜悲白发，朝如青丝暮成雪。</b>

        <b>人生得意须尽欢，莫使金樽空对月。</b>

        <b>天生我材必有用，千金散尽还复来。</b>

        <b>烹羊宰牛且为乐，会须一饮三百杯。</b>

        <b>岑夫子，丹丘生，将进酒，杯莫停。</b>

        <b>与君歌一曲，请君为我侧耳听。</b>

        <b>钟鼓馔玉不足贵，但愿长醉不复醒。</b>

        <b>古来圣贤皆寂真，惟有饮者留其名。</b>

        <b>陈王昔时宴平乐，斗酒十干恣欢谑。</b>

        <b>主人何为言少钱，径须沽取对君酌。</b>

        <b>五花马，千金裘，</b>

        <b>呼儿将出换美酒，与尔同销万古愁。</b>

    </pre>

</body>

</html>

代码截图：

运行截图：

作业四：豆瓣电影

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>豆瓣电影</title>

    <style>

        #gmzr{

            position: absolute;

            bottom: 53.7%;

            left: 15%;

        }

        #eroyier{

            position: absolute;

            bottom: 53.7%;

            left: 30%;

        }

        #jxs{

            position: absolute;

            bottom: 53.7%;

            left: 45%;

        }

        #afd{

            position: absolute;

            bottom: 53.7%;

            left: 60%;

        }

        #earth{

            position: absolute;

            bottom: 53.7%;

            left: 75%;

        }

        #xsk{

            position: absolute;

            bottom: 17.2%;

            left: 15%;

        }

        #cjh{

            position: absolute;

            bottom: 17.2%;

            left: 30%;

        }

        #alt{

            position: absolute;

            bottom: 17.2%;

            left: 45%;

        }

        #xjcy{

            position: absolute;

            bottom: 17.2%;

            left: 60%;

        }

        #hxjy{

            position: absolute;

            bottom: 17.2%;

            left: 75%;

        }

    </style>

</head>

<body>

    <h1>热门电影板块</h1>

    <hr>

    <p>

        <b style="font-size: larger;">

            最近热门电影

        </b>

        <pre style="position: absolute; left: 25%;top: 9%; font-size: large;">

            热门    最新    豆瓣高分    冷门佳片    华语    欧美    韩国    日本

        </pre>

        <small style="position: absolute; left: 90%; top: 10%; font-size: large;">

            更多>>    

        </small>

    </p>

    <hr>

    <img src="https://pica.zhimg.com/v2-a1d97c745dc0ea31cae7d2f1e584d246_r.jpg?source=1940ef5c" alt="" width="220" height="280">

    <p>猜火车 8.1</p>

    <img src="https://img1.ak.crunchyroll.com/i/spire1/df65bc966f9d5dd46062d168c604c53a1675657873_main.jpg" alt="" width="220" height="280">

    <p>铃芽之旅 9.0</p>

    <img id="gmzr" src="https://p0.itc.cn/images01/20210414/4ef90055bd3041c4b01704d393dff88b.jpeg" alt="" width="220" height="280 ">

    <p style="position: absolute; bottom: 47.9%; left: 15%;">鬼灭之刃无限列车篇 9.2</p>

    <img id="eroyier" src="https://www.mlito.com/wp-content/uploads/2017/02/IMG_2868.jpg" alt="" width="220" height="280">

    <p style="position: absolute; bottom: 47.9%; left: 30%;">2012 9.0</p>

    <img id="jxs" src="https://puui.qpic.cn/vcover_vt_pic/0/piegqd6mz97tr8b1559743696/0" alt="" width="220" height="280">

    <p style="position: absolute; bottom: 47.9%; left: 45%;">机械师 8.7</p>

    <img id="afd" src="https://p1.ssl.qhimg.com/t017600ed3fab15f67c.jpg" alt="" width="220" height="280">

    <p style="position: absolute; bottom: 47.9%; left: 60%;">阿凡达 9.8</p>

    <img id="earth" src="https://img.zcool.cn/community/0190d95c482013a801213f26396e68.jpg@2o.jpg" alt="" width="220" height="280">

    <p style="position: absolute; bottom: 47.9%; left: 75%;">流浪地球 8.4</p>

    <img id="xsk" src="https://img.doooor.com/img/forum/201706/23/022947ezlaemy1u4zg1dkd.jpg" alt="" width="220" height="280">

    <p style="position: absolute; bottom: 11.9%; left: 15%;">肖申克的救赎 8.9</p>

    <img id="cjh" src="https://n.sinaimg.cn/sinakd10111/39/w939h1500/20210712/02ce-f21bc3dd9a220a82fbc27434abb0e10e.jpg" alt="" width="220" height="280">

    <p style="position: absolute; bottom: 11.9%; left: 30%;">长津湖 8.7</p>

    <img id="alt" src="https://img.zcool.cn/community/01a1df5cde64dea8012141680f1f36.jpg@1280w_1l_2o_100sh.jpg" alt="" width="220" height="280">

    <p style="position: absolute; bottom: 11.9%; left: 45%;">阿丽塔战斗天使 8.9</p>

    <img id="xjcy" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.9Sb7ZVbxjKeVmf320jjedAAAAA?rs=1&pid=ImgDetMain" alt="" width="220" height="280">

    <p style="position: absolute; bottom: 11.9%; left: 60%;">星际穿越 9.7</p>

    <img id="hxjy" src="https://gd-hbimg.huaban.com/0dda05d0b855805fce7ce4227011b3da953ff77547bac-DyXsZR_fw658" alt="" width="220" height="280">

    <p style="position: absolute; bottom: 11.9%; left: 75%;">火星救援 9.2</p>

</body>

</html>

代码截图：

运行截图：

Fantasy丶夜雨笙歌
关注
  • 23
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
我的第一次web前端作业
03-09
我的第一次web前端作业
web第二次作业.zip 表单设计，web前端
11-01
"web第二次作业.zip"这个压缩包文件似乎包含了关于Web前端开发中表单设计的学习资料，具体分为三个部分：2_files、1_files和电影网_files。下面将对这些知识点进行详细解释。 1. **HTML表单基础**： HTML表单是...
horiseonhmwk:第一次作业
05-23
本周的作业涉及Web开发的一个非常重要的方面：可访问性。 前端和初级开发人员最常见的任务之一是采用现有代码并对其进行重构（记得重构代码就是在不更改其功能的情况下对其进行改进），以符合特定的标准集或实施一...
第⼆次作业1
08-03
在本次的第二次作业中，我们关注的是一个基于Spring框架构建的微服务系统，其中包括User Service、Admin Service以及Eureka Server。这些组件共同协作，实现了用户管理功能，包括用户注册、验证以及服务之间的通信。...
ebook-shop:javaEE 第一次作业
04-08
在本项目"ebook-shop:javaEE 第一次作业"中，我们主要关注的是基于JavaEE技术栈开发的一个在线电子书商店。JavaEE（Java Platform, Enterprise Edition）是Oracle公司提供的一个用于开发企业级应用程序的平台，它...
JAVA-WEB资源配置
caryeko的专栏
08-15 157
用JAVA进行编写WEB项目时，我们一般需要对WEB进行统一配置，例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 224
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 761
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
提升前端性能的JavaScript技巧
han2434的博客
08-14 780
一个快速响应、高效运行的Web页面不仅能提升用户体验，还能在一定程度上影响网站的SEO排名。本文汇总了一系列JavaScript技巧，以帮助开发者提升前端性能，并提供实际的代码示例。
playwright链接本地浏览器，实现自动登录。
qq_38880880的博客
08-12 169
【代码】playwright链接本地浏览器，实现自动登录。
微信小程序电话号码授权
qq_36022463的博客
08-16 63
文档：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/user-info/phone-number/getPhoneNumber.html。文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html。掉这个获取电话号码，需要先获取access_token。获取token，有效期是两小时，需要缓存，
总结常见报错信息
m0_68903702的博客
08-16 118
在@Controller注解中，返回的是字符串或者是字符串匹配的模板名称，即直接渲染视图，与html页面配合使用的，java后端的代码要结合html的情况进行渲染,使用model对象（或者modelandview）的数据将填充user视图中的相关属性，然后展示到浏览器；而在@RestController中，返回的应该是一个对象，即return一个user对象，这时，在没有页面的情况下，也能看到返回的是一个user对象对应的json字符串。情形一：若前端传入Json格式，后端使用。
Web语义化及实际应用
沐爸的博客
08-13 1024
Web语义化是什么？有什么作用？实际开发中如何运用呢？一起了解下吧！
CSS继承、盒子模型、float浮动、定位、diaplay
最新发布
2301_80034711的博客
08-16 637
注：如果没有设置box-sizing属性，一个盒子的最终大小为content+padding+border，也是background-color的区域。②多参数：参数个数，按【上 -> 右 -> 下 -> 左】顺时针顺序，没有指定到的边则和。②多参数：参数个数，按【上 -> 右 -> 下 -> 左】顺时针顺序，没有指定到的边则和。②多参数：参数个数，按【上 -> 右 -> 下 -> 左】顺时针顺序，没有指定到的边则和。①元素移动后，原来的位置不会空出来，所以新元素不会占领原来的位置。
NVDLA专题4：具体模块介绍——Convolution DMA
fangfanglovezhou的博客
08-14 446
NVDLA专题4：具体模块介绍——Convolution DMA
前端实现接口调用进度百分比
qq_42072014的博客
08-14 161
通过本文，我们学习了如何使用 XMLHttpRequest 和 Fetch API 在前端实现接口调用进度百分比的显示。这些技术可以帮助提升用户体验，特别是在涉及文件上传或大型数据传输的场景中。如果你在实现过程中遇到任何问题，欢迎随时提问。
WebRTC音视频开发读书笔记（二）
ch_s_t的专栏
08-15 879
视频分辨率是指视频所成图像内包含的像素数量．通常视频在同样大小的屏幕下，分辨率越高，所包含的像素就越多，视频画面就越细腻、越清晰。常见分高清７２０Ｐ： １２８０＊７２０超清１０８０Ｐ： １９２０＊１０８０。
在Vite+TypeScript项目中导入组件时会报找不到模块的声明文件
qq_59625204的博客
08-13 374
在使用Vite创建Vue3项目时，遇到找不到模块“@/components/***.vue”的错误。解决方法包括在src下的vite-env.d.ts文件中添加特定代码，或者如果文件不存在，则在根目录创建env.d.ts或者vite-env.d.ts文件并追加相应代码，从而完美解决此类模块导入问题。
前端开发TS ts
qq_41910413的博客
08-13 184
ts基础
简单web前端开发技术大作业
12-11
我选择了一个简单的web前端开发技术大作业，通过本次作业我学习了HTML、CSS、JavaScript等相关技术，并且熟悉了常用的前端开发工具和框架。在这个大作业中，我设计了一个简单的网页页面，实现了页面网格布局、CSS...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值