Web前端第一次作业

最新推荐文章于 2024-08-22 17:38:39 发布
最新推荐文章于 2024-08-22 17:38:39 发布
阅读量191 收藏
点赞数 2
文章标签： 前端 开发语言 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shayell/article/details/140304630
版权

第一题：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <form action="https：//www.baidu.com">
        <div style="background-color: rgb(179, 176, 176);width: 300px;height: 26px;text-align: center;border: 1px solid white;">用户注册</div>
        <div style="background-color: rgb(231, 228, 228);width: 300px;height: 26px;border: 1px solid white;">
            <table>
                <tr>
                    <td width="30%" align="right">用户名</td>
                    <td width="70%" align="left"><input type="text" maxlength="20"></td>
                </tr>
            </table>
        </div>
        <div style="background-color: rgb(231, 228, 228);width: 300px;height: 26px;text-align: center;border: 1px solid white;">
            <table>
                <tr>
                    <td width="30%" align="right">密码</td>
                    <td width="70%" align="left" ><input type="password"></td>
                </tr>
            </table>
        </div>
        <div style="background-color: rgb(231, 228, 228);width: 300px;height: 26px;text-align: center;border: 1px solid white;">
            <table>
                <tr>
                    <td width="72px" align="right">性别</td>
                    <td width="" align="left"><input type="radio" name="sex" checked>男<input type="radio" name="sex">女</td>
                </tr>
            </table>
        </div>
        <div style="background-color: rgb(231, 228, 228);width: 300px;height: 26px;text-align: center;border: 1px solid white;">
            <table>
                <tr>
                    <td width="72px" align="right">爱好</td>
                    <td width="" align="left"><input type="checkbox" name="like" value="写作">写作
                        <input type="checkbox" name="like" value="听音乐">听音乐
                        <input type="checkbox" name="like" value="体育">体育
                    </td>
                </tr>
            </table>
        </div>
        <div style="background-color: rgb(231, 228, 228);width: 300px;height: 26px;text-align: center;border: 1px solid white;">
            <table>
                <tr>
                    <td width="72px" align="right">省份</td>
                     <td width="" align="left">
                         <select name="province">
                            <option value="shaanxi">陕西省</option>
                            <option value="shhanx">山西省</option>
                            </select>
                    </td>
                </tr>
            </table>
        </div>
        <div style="background-color: rgb(231, 228, 228);width: 300px;height: 60px;text-align: center;border: 1px solid white;">
            <table height="60px">
                <tr line-height="60px">
                    <td width="72px" align="right">自我介绍</td>
                    <td width="25" height="5" align="left" line-height="60px" height="60px"><textarea name="introduce" height="80px"  cols="30" rows="3" placeholder="这个家伙什么也没有留下"></textarea></td>
                </tr>
            </table>
        </div>
        <div style="background-color: rgb(179, 176, 176);width: 300px;height: 26px;text-align: center;border: 1px solid white;">
            <table>
                <tr>
                    <td width="140px" align="right"><button type="button" value="send">提交</button></td>
                    <td width="" align="left"><button type="reset" value="resert">重置</button></td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

截图：

第二题：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span>
        <h1>工商银行电子汇款单</h1>
    </span>
    <table border="1px" cellspacing="0" width="900px" height="405px">
        <tr  height="45px">
            <td width="5%" colspan="2">袁成</td>
            <!-- <td width="10%"></td> -->
            <td width="35%"></td>
            <td width="5%" colspan="2">我cnm</td>
            <!-- <td width="10%"></td> -->
            <td width="35%"></td>
        </tr>       
        <tr height="45px">
            <td width="5%" rowspan="4"></td>
            <td width="10%"></td>
            <td width="35%"></td>
            <td width="5%" rowspan="4"></td>
            <td width="10%"></td>
            <td width="35%"></td>
        </tr>
        <tr height="45px">
            <!-- <td width="5%"></td> -->
            <td width="10%"></td>
            <td width="35%"></td>
            <!-- <td width="5%"></td> -->
            <td width="10%"></td>
            <td width="35%"></td>
        </tr>
        <tr height="45px">
            <!-- <td width="5%"></td> -->
            <td width="10%"></td>
            <td width="35%"></td>
            <!-- <td width="5%"></td> -->
            <td width="10%"></td>
            <td width="35%"></td>
        </tr>
        <tr height="45px">
            <!-- <td width="5%"></td> -->
            <td width="10%"></td>
            <td width="35%"></td>
            <!-- <td width="5%"></td> -->
            <td width="10%"></td>
            <td width="35%"></td>
        </tr>
        <tr height="45px">
            <td width="5%" colspan="2"></td>
            <!-- <td width="10%"></td> -->
            <td width="35%"></td>
            <td width="5%" colspan="2"></td>
            <!-- <td width="10%"></td> -->
            <td width="35%"></td>
        </tr>
        <tr height="45px">
            <td width="5%" colspan="2"></td>
            <!-- <td width="10%"></td> -->
            <td width="35%"></td>
            <td width="5%" colspan="2"></td>
            <!-- <td width="10%"></td> -->
            <td width="35%"></td>
        </tr>
        <tr height="45px">
            <td width="5%" colspan="2"></td>
            <!-- <td width="10%"></td> -->
            <td width="35%" colspan="4"></td>
            <!-- <td width="5%"></td> -->
            <!-- <td width="10%"></td> -->
            <!-- <td width="35%"></td> -->
        </tr>
        <tr height="45px">
            <td width="5%" colspan="2"></td>
            <!-- <td width="10%"></td> -->
            <td width="35%"></td>
            <td width="5%" colspan="2"></td>
            <!-- <td width="10%"></td> -->
            <td width="35%"></td>
        </tr>
    </table>
    <p>票据打印时间：2017-06-01 15:00:12</p>
    <p><del>票据打印单位：江苏徐州业务中心</del></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>Document</title>
</head>
<body>
    <div style="width:500px;height:65px;">
        <h1>将近酒<small>&nbsp;君不见黄河之水天上来</small></h1>
    </div>
    <table  width="650px" height="500px" >
        <tr>
            <td valign="top"><img src="https://ts1.cn.mm.bing.net/th/id/R-C.7f21b905ae1df9b243a06e59cc6c87ba?rik=AHFD2pLq7r3zfw&riu=http%3a%2f%2fpic.616pic.com%2fys_bnew_img%2f00%2f07%2f87%2fQOYEjZffn1.jpg&ehk=xAbtE9G6cBxze%2fa3PfboX36516l9iZsU58u8zkUg%2fu4%3d&risl=&pid=ImgRaw&r=0" width="280px"></td>
            <td width="70%" valign="top">
                    君不见黄河之水天上来，奔流到海不复回。
                    <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>

截图：

第四题：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>热门电影板块</h1>
    <hr>
    <table>
        <tr>
            
             <td width="360px"><big><b>最近热门电影</b></big></td>
             <td width="90px"><big>热门</big></td>
             <td width="90px"><big>最新</big></td>
             <td width="120px"><big>豆瓣高分</big></td>
             <td width="120px"><big>冷门佳片</big></td>
             <td width="90px"><big>华语</big></td>
             <td width="90px"><big>欧美</big></td>
             <td width="90px"><big>韩国</big></td>
             <td width="350px"><big>日本</big></td>
             <td width="70px"><big>更多>></big></td>
        </tr>
    </table>
    <hr>
    <table>
        <tr>
            <td width="200px"><img src="https://img.zcool.cn/community/0130215bf57cb3a80121ab5db623c5.jpg@2o.jpg" alt="" width="400px" height="600px"></td>
            <td width="200px"><img src="https://img.zcool.cn/community/0198425d33fa68a80120695c145f04.jpg@1280w_1l_2o_100sh.jpg" alt="" width="400px" height="600px"></td>
            <td width="200px"><img src="https://img.zcool.cn/community/011d3855685d790000012716399ff2.jpg@2o.jpg" alt="" width="400px" height="600px"></td>
            <td><img src="https://img.zcool.cn/community/010c3259802d63a8012156034f0295.jpg@1280w_1l_2o_100sh.jpg" alt="" width="400px" height="600px"></td>
        </tr>
        <tr>
            <td>死侍2</td>
            <td>寒战</td>
            <td>金刚狼</td>
            <td>战狼2</td>
        </tr>
        <tr>
            <td><img src="https://img.zcool.cn/community/01c1335d3ffa0fa8012187f4a957bc.jpg@1280w_1l_2o_100sh.jpg" alt="" width="400px" height="600px"></td>
            <td><img src="https://img.zcool.cn/community/0124e05c47fa99a801203d22e36935.jpg@1280w_1l_2o_100sh.jpg" alt="" width="400px" height="600px"></td>
            <td><img src="https://img.zcool.cn/community/010fb855ec5acc6ac7251df80ffcfd.jpg@1280w_1l_2o_100sh.jpg" alt="" width="400px" height="600px"></td>
            <td><img src="https://img.zcool.cn/community/013d155c184b96a801209252b7c631.jpg@1280w_1l_2o_100sh.jpg" alt="" width="400px" height="600px"></td>
        </tr>
        <tr>
            <td>烈火英雄</td>
            <td>流浪地球</td>
            <td>三体</td>
            <td>盗墓笔记</td>
        </tr>
    </table>
</body>
</html>

截图：

shayell
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
我的第一次web前端作业
03-09
我的第一次web前端作业
web第二次作业.zip 表单设计，web前端
11-01
"web第二次作业.zip"这个压缩包文件似乎包含了关于Web前端开发中表单设计的学习资料，具体分为三个部分：2_files、1_files和电影网_files。下面将对这些知识点进行详细解释。 1. **HTML表单基础**： HTML表单是...
web前端第一次作业
2301_80943978的博客
07-23 889
君不见黄河之水天上来
web前端 第一次作业
qq_68389880的博客
10-28 453
web，html，部分基本标签概述
Web前端第一次作业--电子汇款单练习
m0_75208155的博客
06-06 172
【代码】Web前端第一次作业--电子汇款单练习。
web前端html5网页作业,Web前端开发第一次作业
weixin_39957027的博客
06-21 774
(1)分别说出什么是HTML,XHTML,HTML5HTML为一种超文本标记语言,用这种语言浏览器几乎都能识别.独立于各种操作系统平台.XHTML为一种可扩展超文本标记语言,表现方式于超文本标记语言类似,不过语法比较严格.HTML5是用于取代HTMLH和XHTML的一个标准版本.(2)写出HTML的语法语法不区分字母大小写。(3)HTML中的注释和CSS中的注释HTML的注释:CSS注释:(4)C...
Web前端第四次作业
m0_75208155的博客
06-25 342
【代码】Web前端第四次作业。
Web前端第三次作业
shayell的博客
07-22 132
【代码】Web前端第三次作业。
web前端期末大作业（附有源码）
m0_74087268的博客
12-28 9673
这里使用的是Visual Studio Code（VSCode）设计的Web前端作业，包括了HTML、CSS和JavaScript。选用VSCode作为开发环境和工具来说有诸多优势之处，也给设计前端时带来了诸多益处。首先，是VSCode智能代码提示和补全。VSCode具备强大的代码提示功能，能够根据输入和上下文提供智能建议，减少拼写错误和语法问题，提高编码效率。其次，VSCode拥有丰富的扩展生态系统。
WEB前端——JS第一次作业
weixin_71169037的博客
03-22 118
WEB前端——JS第一次作业
Web前端技术第二次作业
Tmg3202915143的博客
11-12 346
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公司提供的一个用于开发企业级应用程序的平台，它...
前端字符串将其分割成长度为 32 的子字符串数组
人与人之间最小的差别是智商，最大的差别是坚持。
08-19 379
要实现这个需求，可以编写一个简单的 JavaScript 函数来处理字符串并将其分割成长度为 32 的子字符串数组。将字符串切割后，对list数据进行数据处理。
pywebview 入门
小小宾的博客
08-18 765
pywebview 是一个轻量级的 python 库，旨在简化桌面应用程序的开发。它利用系统的 WebView 组件，使得开发人员可以使用现代 Web 技术（HTML、CSS、JavaScript）来创建用户界面，同时使用 python 处理业务逻辑。pywebview 使得创建跨平台桌面应用程序变得更加简单和高效。
前端开发攻略---在Vue3项目中修改Element-Plus主题色
最新发布
nibabaoo的博客
08-22 174
在Vue3项目中修改Element-Plus主题色
理解现代前端开发：从HTML到React的进化之路
qq_62512874的博客
08-18 718
随着互联网的不断发展，前端开发已经经历了从静态页面到复杂单页应用（SPA）的转变。作为前端开发者，我们需要不断更新知识，掌握最新的技术栈，以应对日益复杂的开发需求。本篇文章将带你从前端的基础知识逐步深入，探索现代前端开发的关键技术，包括HTML、CSS、JavaScript，以及流行的框架如React。前端开发是一个不断演进的领域，新的工具和框架层出不穷。通过不断学习和实践，我们可以掌握最新的前端技术，构建高效、美观且功能丰富的现代Web应用。
简单web前端开发技术大作业
12-11
我选择了一个简单的web前端开发技术大作业，通过本次作业我学习了HTML、CSS、JavaScript等相关技术，并且熟悉了常用的前端开发工具和框架。在这个大作业中，我设计了一个简单的网页页面，实现了页面网格布局、CSS样式设计、JavaScript交互效果等功能。通过这个作业，我对web前端开发有了更深入的理解和实践，提高了我的编码能力和设计水平。 在项目开始之前，我首先进行了相关技术的学习和调研，了解了HTML5、CSS3和JavaScript的基本语法和用法，同时学习了一些常用的前端开发工具和框架，如VSCode、Bootstrap等。在项目的实际开发过程中，我通过HTML搭建了网页的基本结构，利用CSS进行页面的样式设计和布局，利用JavaScript实现了页面的交互效果，如点击按钮弹出提示框、表单验证等。 通过这个大作业，我不仅学会了如何构建一个简单的网页页面，还学会了如何优化页面代码，提高页面的加载速度和用户体验。同时我也深刻体会到了前端开发的重要性和复杂性，更加清楚了自己在前端领域的学习方向和目标。希望在未来的学习和工作中，能够不断提升自己的前端开发能力，成为一名优秀的web前端工程师。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值