【web前端】第一次作业

最新推荐文章于 2024-11-07 19:48:34 发布
最新推荐文章于 2024-11-07 19:48:34 发布
阅读量273 收藏
点赞数 3
文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79850619/article/details/140249497
版权

作业1：用户注册

代码

<!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>

运行截图

 

作业2：工商电子汇款

代码

<!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>

运行截图

 

 

作业3：李白诗词

代码

<!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="../00.作业/image.png" alt="">
    <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>

运行截图

 

作业4：豆瓣电影

代码

<!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="230" height="300">
    <p>猜火车 8.1</p>
    <img src="https://img1.ak.crunchyroll.com/i/spire1/df65bc966f9d5dd46062d168c604c53a1675657873_main.jpg" alt="" width="230" height="300">
    <p>铃芽之旅 9.0</p>
    <img id="gmzr" src="https://p0.itc.cn/images01/20210414/4ef90055bd3041c4b01704d393dff88b.jpeg" alt="" width="230" height="300 ">
    <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="230" height="300">
    <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="230" height="300">
    <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="230" height="300">
    <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="230" height="300">
    <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="230" height="300">
    <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="230" height="300">
    <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="230" height="300">
    <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="230" height="300">
    <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="230" height="300">
    <p style="position: absolute; bottom: 11.9%; left: 75%;">火星救援 9.2</p>
</body>
</html>

运行截图

 

 

Wriothesley_KAI66
关注
我最爱的诗
u014313427的专栏
03-28 630
君不见黄河之水天上来，奔流到海不复回！ 君不见高堂明镜悲白发，朝如青丝暮成雪！ 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我侧耳听。 钟鼓馔玉不足贵，但愿长醉不复醒。 古来圣贤皆寂寞，惟有饮者留其名。 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌
前端学习第一次作业——by 小贾
qq_51082388的博客
05-08 379
今天做出来的效果耶耶耶，希望一直能有这种心境以及时间来这样学习。即使是菜，那又怎么样，做出来的菜好吃就行了呗 ，绿色健康，绿色营养，好符合bgcolor <!DOCTYPE html> <html> <head> <!--1给网页加一个标题。--> <meta charset="utf-8"> <title>《敲代码比算三重积分好玩》</title> </head> <body bg
第一次web前端作业
weixin_51488330的博客
02-26 439
项目1 新生简易主页设计 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>新生简易主页设计</title> <style type="text/css"&g
web前端 第一次作业
qq_68389880的博客
10-28 506
web，html，部分基本标签概述
[Web前端]第一次作业
Kikuo_Mon的博客
11-04 290
1、什么是web前端？ —web前端就是网页制作。 2、什么是HTML？ —html就是超文本标记语言，说白了就是网页，给用户展示的界面。 3、本节课都学习了那些标签？ 文字加粗标签 ---文字斜体标签 ---u下划线标签，del删除下划线标签 ---换行标签 ---分割线标签 ---段落标签 ---文字下标 ---原样输出文本内容 ---标准行内输出 ---标题标签 ---标准的块标签 --图片标签">代码如下： 代码如下：
Web前端第一次作业
Fantasy543210的博客
07-08 959
这个家伙什么也没留下
web前端第一次作业
2301_80943978的博客
07-23 942
君不见黄河之水天上来
WEB前端第一次作业
2201_75677677的博客
10-18 205
【代码】WEB前端第一次作业。
Web前端第一次作业--电子汇款单练习
m0_75208155的博客
06-06 229
【代码】Web前端第一次作业--电子汇款单练习。
我的第一次web前端作业
03-09
我的第一次web前端作业
web第二次作业.zip 表单设计，web前端
11-01
"web第二次作业.zip"这个压缩包文件似乎包含了关于Web前端开发中表单设计的学习资料，具体分为三个部分：2_files、1_files和电影网_files。下面将对这些知识点进行详细解释。 1. **HTML表单基础**： HTML表单是...
web前端期末大作业 html+css+javascript化妆品网页设计实例 企业网站制作
08-10
综上所述，该HTML+CSS+JavaScript化妆品网页设计实例不仅是一次期末作业的展示，更是对学生前端技术掌握程度的一次全面检验。通过对这些技术知识点的学习和实践，可以帮助学生更好地理解和掌握前端开发的基本技能，...
web前端期末大作业——用HTML+CSS做一个漂亮简单的电影主题网站
QQ_____365392777的博客
08-14 1000
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
Vue实现登录功能
最新发布
qq_47296476的博客
11-07 270
总体来说，这段代码主要负责处理用户登录成功后的一系列操作，包括权限控制、路由跳转、消息提示和加载状态管理。方法用于获取有当前用户权限标识的路由数组，并进行对原路由的替换。方法用于设置递归过滤有权限的路由到 Pinia 的 routesList 中，并缓存多级嵌套数组处理后的一维数组。方法中创建的加载状态元素包含了一组加载动画的 HTML 结构，通过设置不同的类名和样式来展示加载效果。方法中，将创建的加载状态元素插入到页面的顶部，显示加载状态。这些方法共同实现了前端控制路由的权限管理和动态路由添加的功能。
Webserver(3.3)生产者消费者模型
学习历程记录和分享
11-05 319
解决该问题需要用互斥量确保线程同步，用条件变量或者信号量去解决生产者和消费者之间同步的问题，生产者把数据生产满了要通知消费者去消费。会产生数据安全问题，比如生产者还未生产出来，就去消费。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 189
vxe-grid新增空行，并且定位到空行位置。
【Java Web】JSP实现数据传递和保存（上）九大内置对象 request
m0_66584716的博客
11-07 471
JSP（JavaServer Pages）提供了九个内置对象，这些对象在JSP页面中可以直接使用，无需显式声明。这些内置对象提供了对请求、响应、会话等常用功能的访问，使得开发者可以更方便地处理Web应用程序中的各种任务。
前端性能优化2
Cwhat的博客
11-06 521
常见问题：首屏速度，白屏时间等。操作速度以及渲染速度。一打开网页时白屏，是因为还需要从服务器那边请求HTML、JS这些过来，加载下来后才有东西渲染首屏速度参考两方面：白屏时间（资源加载时间、首屏js执行）、渲染页面（首屏数据请求、Dom渲染）渲染页面是比较快的，所以大多数时间是花在了白屏时间上，而其中的资源加载时间是占比比较大的。
vue种ref跟reactive的区别?
renqq001的博客
11-07 394
vue种ref跟reactive的区别?
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wriothesley_KAI66

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值