web第一次作业

于 2024-07-10 15:52:40 发布
阅读量139 收藏
点赞数 4
文章标签： 前端 javascript 开发语言 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_81731997/article/details/140325661
版权

作业1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        td{
            width: 100px;
            height: 25px;
        }
        thead td{
            background-color: #ccc;
        }
        tbody td{
            background-color: #ddd;
        }
        tfoot td{
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <form method="get">
        <table>
            <thead>
                <tr>
                    <td colspan="2" align="center">用户注册</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>用户名</td>
                    <td><input type="text" name="用户名"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" password="密码"></td>   
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" name="性别">男
                        <input type="radio" name="性别">
                    </td>
                    </tr>
                    <tr>
                    <tr>爱好</tr>
                    <td>
                    <td><input type="checkbox" name="写作"></td>
                    <td><input type="checkbox" name="听音乐"></td>
                    <td><input type="checkbox" name="体育"></td>
                </td>
                </tr>
                <tr>
                    <td>省份</td>
                    <td>
                        <select name="省份">
                            <option value="四川">四川</option>
                            <option value="新疆">新疆</option>
                            <option value="陕西">陕西</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>自我介绍</td>
                    <td><textarea name="自我介绍" cols="30" rows="10"></textarea></td>
                </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td align="center" colspan="2">
                            <input type="submit">
                            <input type="reset">
                        </td>
                    </tr>
                </tfoot>
        </table>
    </form>
</body>
</html>

页面展示：

作业2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工行汇款单</title>
<style>
    td{
        height: 15px;
        width: 200px;
        font-size: 20px;
        padding: 10px;
    }
    .one{
        width: 350px;
    }
    .two{
        width: 5px;
    }
</style>
</head>
<body initial-scale="100%">
    <div>
        <div class="top">
            <h1>工商银行电子汇款单</h1>
        </div>
        <div>
            <table border="1px" cellspacing="0">
                <tr>
                    <td colspan="2">
                      <h3>回单类型</h3>
                    </td>
                    <td class="one">
                        网上转账汇款
                    </td>
                    <td colspan="2">
                        <h3>指令序号</h3>
                    </td>
                    <td class="one">
                        HQH0000000000000013878172
                    </td>
                </tr>

                <tr>
                    <td rowspan="4" class="two">
                        <h3>收款人</h3>
                    </td>
                    <td>
                        户名
                    </td>
                    <td class="one">
                        老牟
                    </td>
                    <td rowspan="4" class="two">
                        <h3>付款人</h3>
                    </td>
                    <td>
                         户名
                    </td>
                    <td class="one">
                        老刘
                    </td>
                </tr>

                <tr>


                    <td>
                        <h3>卡号</h3>
                    </td>
                    <td class="one">
                        000000000001
                    </td>

                    <td>
                        <h3>卡号</h3>
                    </td>
                    <td class="one">
                        000000000002
                    </td>
                </tr>

                <tr>

                    <td>
                        地区
                    </td>
                    <td class="one">
                        南京
                    </td>

                    <td>
                        地区
                    </td>
                    <td class="one">
                        杭州
                    </td>
                </tr>

                <tr>

                    <td>
                        <h3>网点</h3>
                    </td>
                    <td class="one">
                        工商江苏南京业务处理中心
                    </td>

                    <td>
                        <h3>网点</h3>
                    </td>
                    <td class="one">
                        江苏徐州业务中心
                    </td>
                </tr>
                    
                <tr>
                    <td colspan="2">
                       <h3>币种</h3>
                    </td>
                    <td class="one">
                        人民币
                    </td>
                    <td colspan="2">
                        <h3>钞汇标志</h3>
                    </td>
                    <td class="one">
                        钞票
                    </td>
                </tr>

                <tr>
                    <td colspan="2">
                        <h3>金额</h3>
                    </td>
                    <td class="one">
                        1.00元
                    </td>
                    <td colspan="2">
                        <h3>手续费</h3>
                    </td>
                    <td class="one">
                        0.57元
                    </td>
                </tr>

                <tr>
                    <td colspan="2">
                        <h3>合计</h3>
                    </td>
                    <td colspan="4">
                        人民币(大写):壹元整
                    </td>
                </tr>

                <tr>
                    <td colspan="2">
                        <h3>交易时间</h3>
                    </td>
                    <td class="one">
                        <i>2017年6月1日</i>
                    </td>
                    <td colspan="2">
                        <h3>时间戳</h3>
                    </td>
                    <td class="one">
                       <i>2017-06-01-13.00.00,00000</i>
                    </td>
                </tr>
            </table>
        </div>
    </div>
        <p>票据打印时间:2017-06-01 15:00:12</p>
        <p><del>票据打印单位：江苏徐州业务中心</del></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>
</head>
<body>
 <h1>将进酒 <small>君不见黄河之水天上来</small></h1>
 <table>       
 <td><img src="https://ts1.cn.mm.bing.net/th/id/R-C.970a46a72448009ba29be752382b6b18?rik=SbztlOUDEO4%2bgQ&riu=http%3a%2f%2fimg.ifeng.com%2fres%2f200710%2f1029_213567.jpg&ehk=dum6UIWDDJlyK6V%2f%2fX%2bZWYyl1aW1ozoAk0UW%2blzSWeE%3d&risl=&pid=ImgRaw&r=0" alt='' width="150"
 height="200"></td>    
                   <td><p>
                          君不见黄河之水天上来，奔流到海不复回。<br>
                          君不见高堂明镜悲白发，朝如青丝暮成雪。<br>
                          人生得意须尽欢，莫使金樽空对月。<br>
                          天生我材必有用，千金散尽还复来。<br>
                          烹羊宰牛且为乐，会须一饮三百杯。<br>
                          岑夫子，丹丘生，将进酒，杯莫停。<br>
                          与君歌一曲，请君为我侧耳听。<br>
                          钟鼓馔玉不足贵，但愿长醉不复醒。<br>
                          古来圣贤皆寂真，惟有饮者留其名。<br>
                          陈王昔时宴平乐，斗酒十干恣欢谑。<br>
                          主人何为言少钱，径须沽取对君酌。<br>
                          五花马，千金裘，<br>
                          呼儿将出换美酒，与尔同销万古愁。<br></p></td>
                    </table>
</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>
        td{
            width: 80px;
        }
        img{
            width: 200px;
            height: 290px;
        }
    </style>
</head>
<body>
    <div>
        <div class="top">
        <h1>
            热门电影板块
        </h1>
        </div>
    <hr>
    <div class="mid">
        <table>
            <tr>
                <td style="width: 200px;">
                <h3>最近热门电影</h3>
                </td>
                <td>
                    热门
                </td>
                <td>
                    最新
                </td>
                <td style="width: 100px;">
                豆瓣高分
                </td>
                <td style="width: 100px;">
                冷门佳片
                </td>
                <td>
                    华语
                </td>
                <td>
                    欧美
                </td>
                <td>
                    韩国
                </td>
                <td style="width: 250px;">
                日本
                </td>
                <td>
                    更多>>
                </td>
            </tr>
        </table>
        <hr>
        <div>
            <table>
                <tr>
                    <td>
                        <div>
                            <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Q9KgWriRN1Ep6HR2iOpO6QAAAA?rs=1&pid=ImgDetMain">
                            <p>神偷奶爸4</p>
                        </div>
                    </td>
                    <td>
                        <div>
                            <img src="https://img-nos.yiyouliao.com/alph/8018e49cd581b3809fcd27bc20a6c9dd.jpeg?yiyouliao_channel=msn_image">
                            <p>默杀</p>
                        </div>
                    </td>
                    <td>
                        <div>
                            <img src="https://img.zcool.cn/community/01tcfhbpxxku70bcjrheqx3435.jpeg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100">
                            <p>云边有个小卖部</p>
                        </div>
                    </td>
                    <td>
                        <div>
                            <img src="https://ts1.cn.mm.bing.net/th/id/R-C.6fb1ffeb2a34c33e07292267edabf5f7?rik=qL3ObCpO2V%2fQbw&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20240112s%2f266%2fw1600h2666%2f20240112%2fc0bd-c0c4f96dd4c19eb74bd1f7ebbd80ad40.jpg&ehk=BsmctUzW3kw4IM5AG3Z%2fFlcG5fLi7F5P2KreGFjhyD8%3d&risl=&pid=ImgRaw&r=0">
                            <p>第二十条</p>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td>
                        <div>
                            <img src="https://ts1.cn.mm.bing.net/th/id/R-C.89a52ac81c4f6d149257cb2433049f1d?rik=rWf6WwfUj8q5fg&riu=http%3a%2f%2fv.toodiancao.com%2fwp-content%2fuploads%2f2024%2f04%2ff11f3a292df5e0fe76e42f670ef7f0a55fdf7279.jpeg%40f_auto.jpg&ehk=SwceRNHdRgzm6hTymaYN8UTFW204b4hwNEIW83jNKng%3d&risl=&pid=ImgRaw&r=0">
                            <p>你想活出怎样的人生</p>
                        </div>
                    </td>
                    <td>
                        <div>
                            <img src="https://ts1.cn.mm.bing.net/th/id/R-C.b631b833f2e5668e6a85544605b4306f?rik=0XsZrOY2p3q86g&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20230218ac%2f300%2fw1080h1620%2f20230218%2f55f2-252ec0fe38359d4f9bfbd9e580d125fc.jpg&ehk=oZLsQzGuxaGR4%2boJonDz%2bHJRQUOW%2b89qBMYRva05ilY%3d&risl=&pid=ImgRaw&r=0">
                            <p>穿过月亮的旅行</p>
                        </div>
                    </td>
                    <td>
                        <div>
                            <img src="https://img2.jiemian.com/101/original/20230125/167457861579568000_a700xH.jpeg">
                            <p>满江红</p>
                        </div>
                    </td>
                    <td>
                        <div>
                            <img src="https://imgs.tom.com/gossip/202401/1692606411/CONTENT838ae1261367820b.jpg">
                            <p>飞驰人生2</p>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

页面展示：

nn7354
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
大屏上下滚动特效
05-22
插件描述：当前流行的大屏上下滚动，当前遇到效果最好的一个. 参考示例：http://www.jq22.com/jquery-info4598
ScrollText 大屏幕 滚动字幕
01-28
ScrollText 大屏幕 滚动字幕
我最爱的诗
u014313427的专栏
03-28 575
君不见黄河之水天上来，奔流到海不复回！ 君不见高堂明镜悲白发，朝如青丝暮成雪！ 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我侧耳听。 钟鼓馔玉不足贵，但愿长醉不复醒。 古来圣贤皆寂寞，惟有饮者留其名。 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌
前端学习第一次作业——by 小贾
qq_51082388的博客
05-08 333
今天做出来的效果耶耶耶，希望一直能有这种心境以及时间来这样学习。即使是菜，那又怎么样，做出来的菜好吃就行了呗 ，绿色健康，绿色营养，好符合bgcolor <!DOCTYPE html> <html> <head> <!--1给网页加一个标题。--> <meta charset="utf-8"> <title>《敲代码比算三重积分好玩》</title> </head> <body bg
文字向上屏幕滚动
weixin_34096182的博客
06-06 207
<title>文字滚动</title> <styletype="text/css"> #rollText{font:12px/20pxverdana;} </style><divid="rollAD"style="height:40px;position:relative;overflow:hidden;"&...
第一次作业
08-02
【标题】：“第一次作业” 这篇“第一次作业”可能是一份针对初学者或新手的IT学习任务，旨在引导他们深入理解编程或IT工具的使用。由于没有具体的描述，我们可以推测这可能是一个涵盖基础概念和实践操作的项目。...
大数据第一次作业1
08-08
段是爬行过程中的临时存储单元，每个段包含了一次抓取循环中获取的网页及其索引。根据Web DB生成的抓取列表（Fetch List），Fetcher抓取URL对应的网页，构建索引后存储在段中。段的生命周期有限，随着新抓取的发生，...
Web技术第一次网上作业.doc
04-18
Web 技术第一次网上作业答案 本资源摘要信息涵盖了 Web 技术第一次网上作业的所有问题和答案，涵盖了 Web 技术的基础知识点，包括WWW 服务器、网页设计、HTML 语言、动态网页技术、网页 Elements 等。 一、WWW ...
我的第一次web前端作业
03-09
我的第一次web前端作业
horiseonhmwk:第一次作业
05-23
本周的作业涉及Web开发的一个非常重要的方面：可访问性。 前端和初级开发人员最常见的任务之一是采用现有代码并对其进行重构（记得重构代码就是在不更改其功能的情况下对其进行改进），以符合特定的标准集或实施一...
文字循环滚动 LED屏效果
08-25
自己做的文字循环滚动，类似LED条屏效果，显示内容读取“通知.txt"里面的文字。
大屏滚动显示源码 C#
04-01
大屏显示系统，VS2005 SQLSERVER2008,实现大屏滚动显示，无闪烁,效果不错
winform 实现屏幕（字幕）上下滚动（来回滚动）
06-06
winform实现窗体界面 字幕上下来回滚动。可随意控制显示内容的大小，可随意控制窗体界面大小。代码简单易懂。这里是用的.NET 4.0版本，如果你只安装别这个更低的版本，只需要把代码用记事本打开，copy代码，就行了 同时需要更改invoke为beginInvoke就ok了。
屏幕文本滚动播出事例
01-13
屏幕文本滚动播出，类似QQ音乐歌词效果，C++语言开发，很早之前一个国外网站实现的效果！
Angular实战项目记录（二）------ 大屏文字滚动（css3实现）
m0_46684624的博客
01-08 411
大屏文字滚动 html代码 在要滚动的后面添加一个一模一样的展示部分 <body> <div class="list"> <div class="cc rowup"> <div class="item">1111</div> <div class="item">222</div> <div class="item">3
数字滚动特效-大屏
最新发布
qq_36523196的博客
04-28 888
大屏数字滚动特效，进行单个数字的滚动特效实现。
文字滚动
Zartillery的博客
12-22 199
页面代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link href="css/global.css" rel=&quo
<marquee>滚动文字</marquee>
mzfly的博客
11-25 219
&lt;marquee&gt;滚动文字&lt;/marquee&gt; &lt;marquee&gt;滚动文字&lt;/marquee&gt; 水平滚动： &lt;marquee direction="left" align="bottom" height="25" width="100%" onmouse
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值