web第一次作业

news2025/1/12 12:12:02

题1:

<form action="#" method="post">
  <table>
    <tr>
      <td>用户名:</td>
      <td><input type="text" name="UserName" maxlength="20" size="15"></td>
    </tr>
    <tr>
      <td>密码:</td>
      <td><input type="password" name="UserPass" maxlength="20" size="15"></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="shanx">山西省</option>
        </select></td>
    </tr>
    <tr>
      <td>自我介绍:</td>
      <td><textarea name="intro" rows="5" cols="25">这个家伙什么也没留下</textarea></td>
    </tr>
    <tr>
      <td></td>
      <td><input type="submit" name="send" value="提交">
        <input type="reset" name="reset" value="重置"></td>
    </tr>
  </table>
</form>

运行结果:

题目2:

<!DOCTYPE html>
<html>
<head>
  <title>将进酒</title>
  <style>
    h1 {
      font-weight: bold;
    }
    h5 {
      font-family: Arial, sans-serif;
      line-height: 2.8; /* 调整行高 */
    }
    img {
      float: left;
      margin-right: 10px;
      vertical-align: top;
    }
    .poem-container {
      display: inline-block;
    }
  </style>
</head>
<body>
  <h1>将进酒</h1>
  <img src="li_bai.png" alt="李白的图片">
  <h5>
    君不见,黄河之水天上来,奔流到海不复回。<br>
    君不见,高堂明镜悲白发,朝如青丝暮成雪。<br>
    人生得意须尽欢,莫使金樽空对月。<br>
    天生我材必有用,千金散尽还复来。<br>
    烹羊宰牛且为乐,会须一饮三百杯。<br>
    岑夫子,丹丘生,将进酒,杯莫停。<br>
    与君歌一曲,请君为我倾耳听。<br>
    钟鼓馔玉不足贵,但愿长醉不复醒。<br>
    古来圣贤皆寂寞,惟有饮者留其名。<br>
    陈王昔时宴平乐,斗酒十千恣欢谑。<br>
    主人何为言少钱,径须沽取对君酌。<br>
    五花马、千金裘,呼儿将出换美酒,与尔同销万古愁。<br>
  </h5>
</body>
</html>

运行结果:

题目3:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>工商银行电子汇款单</title>
  <style>
    table {
      border-collapse: collapse;
      margin: 20px;
    }
    
    caption {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    
    th, td {
      padding: 10px;
      text-align: left;
    }
    
    th {
      background-color: #f2f2f2;
    }
    
    tfoot td:nth-child(odd) {
      background-color: #f2f2f2;
    }
    
    tfoot td:nth-child(even) {
      text-align: right;
      font-weight: bold;
    }
    
    tfoot tr:first-child td {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <table width="1000" border="1" cellspacing="0">
    <caption><h1>工商银行电子汇款单</h1></caption>
    <thead>
      <tr>
        <th colspan="2">回单类型</th>
        <th>网上转账汇款</th>
        <th colspan="2">指令序号</th>
        <th>HQH0000000000000013878172</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="4">收款人</td>
        <th>户名</th>
        <td>老牟</td>
        <td rowspan="4">付款人</td>
        <th>户名</th>
        <td>老刘</td>
      </tr>
      <tr>
        <th>卡号</th>
        <td>000000000001</td>
        <th>卡号</th>
        <td>000000000002</td>
      </tr>
      <tr>
        <th>地区</th>
        <td>南京</td>
        <th>地区</th>
        <td>杭州</td>
      </tr>
      <tr>
        <th>网点</th>
        <td>工商江苏南京业务处理中心</td>
        <th>网点</th>
        <td>江苏徐州业务中心</td>
      </tr>
      <th colspan="2">币种</th>
      <td>人民币</td>
      <th colspan="2">秒汇标志</th>
      <td>钞票</td>
      </tr>
      <tr>
      <th colspan="2">金额</th>
      <td >1000000.00元</td>
      <th colspan="2">手续费</th>
      <td >100</td>
      </tr>
      <tr>
      <th colspan="2">合计</th>
      <td colspan="4">人民币(大写) : 壹佰万元整</td>
      </tr>
      <tr>
      <th colspan="2">时间</th>
      <td>2017年6月1日</td>
      <th colspan="2">时间戳</th>
      <td>江苏徐州业务中心</td>
      </tr>
     
    </tbody>
  </table>
  <p>票据打印时间: 2017-06-01 15:00:12</p>
<p><del>票据打印单位: 江苏徐州业务中心</del></p>
<p>操作员:大曾</p>

</body>
</html>

运行结果:

题目4:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>热门电影板块</title>
  <style>
    .movies-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
    .movie {
      width: 200px;
      margin: 10px;
      text-align: center;
    }
    .movie img {
      width: 100%;
      height: auto;
    }
    .movie-name {
      margin-top: 5px;
    }
    hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: none;
  height: 1px;
  background-color: black;
}
p:nth-of-type(2n) {
      margin-top: 30px;
}
  </style>
</head>
  <h1>热门电影板块</h1>
  <hr>
<p>
<span class="underline">最近电影</span>
    <span class="underline">热门</span>
    <span class="underline">最新</span>
    <span class="underline">豆瓣高分</span>
    <span class="underline">冷门佳片</span>
    <span class="underline">华语</span>
    <span class="underline">欧美</span>
    <span class="underline">韩国</span>
    <span class="underline">日本</span>
    <span class="underline">更多>></span>
    </p>
  <hr>
  <div class="movies-container">
    <div class="movie">
      <img src="movie1.png" alt="电影1">
      <div class="movie-name">猜火车 8.1</div>
    </div>
    <div class="movie">
      <img src="movie2.png" alt="电影2">
      <div class="movie-name">贝尔科的实验 6.0</div>
    </div>
    <div class="movie">
      <img src="movie3.png" alt="电影3">
      <div class="movie-name">加州公路巡警 6.8</div>
    </div>
    <div class="movie">
      <img src="movie4.png" alt="电影4">
      <div class="movie-name">歌声不绝 6.3</div>
    </div>
    <div class="movie">
      <img src="movie5.png" alt="电影5">
      <div class="movie-name">明日的我与昨日的我</div>
    </div>
    <div class="movie">
      <img src="movie6.png" alt="电影6">
      <div class="movie-name">速度与激情8</div>
    </div>
    <div class="movie">
      <img src="movie7.png" alt="电影7">
      <div class="movie-name">极速特工</div>
    </div>
    <div class="movie">
      <img src="movie8.png" alt="电影8">
      <div class="movie-name">金刚狼3:殊死一搏</div>
    </div>
  </div>
</body>
</html>

运行结果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1373130.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Windows启动MongoDB服务报错(错误 1053:服务没有及时响应启动或控制请求)

问题描述&#xff1a;修改MongoDB服务bin目录下的mongod.cfg&#xff0c;然后在任务管理器找到MongoDB服务-->右键-->点击【开始】&#xff0c;启动失败无提示&#xff1a; 右键点击任务管理器的MongoDB服务-->点击【打开服务】&#xff0c;跳转到服务页面-->找到M…

C# 使用Fleck创建WebSocket服务器

目录 写在前面 代码实现 服务端代码 客户端代码 调用示例 写在前面 Fleck 是 C# 实现的 WebSocket 服务器&#xff0c;通过 WebSocket API&#xff0c;浏览器和服务器只需要做一个握手的动作&#xff0c;然后浏览器和服务器之间就形成了一条快速通道&#xff1b;两者之间…

机器学习周刊第二期:300个机器学习应用案例集

大家好 前文&#xff1a;机器学习项目精选 第一期 继续分享我最近看过并觉得非常硬核的资源&#xff0c;包括Python、机器学习、深度学习、大模型等等。 1、Python编程挑战 地址&#xff1a;https://github.com/Asabeneh/30-Days-Of-Python 30天Python编程挑战是一个逐步学…

漫画演绎策略设计模式

引言 本篇主要通过一小篇漫画的形式给大家讲讲策略模式&#xff0c;由于策略模式本身不是很难&#xff0c;这里就不花太多的言辞描述了&#xff0c;一起看漫画吧 普通设计 从前有一个妈妈&#xff0c;她有一个叛逆的儿子&#xff0c;妈妈每天除了上下班就是要教育儿子&#…

【前端】使用javascript开发一个在线RGB颜色转换

欢迎来到《小5讲堂》 大家好&#xff0c;我是全栈小5。 这是是《前端》序列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对知识点的理解和掌…

海量数据处理数据结构之Hash与布隆过滤器

前言 随着网络和大数据时代的到来&#xff0c;我们如何从海量的数据中找到我们需要的数据就成为计算机技术中不可获取的一门技术&#xff0c;特别是近年来抖音&#xff0c;快手等热门短视频的兴起&#xff0c;我们如何设计算法来从大量的视频中获取当前最热门的视频信息呢&…

P1328 [NOIP2014 提高组] 生活大爆炸版石头剪刀布————C++

目录 [NOIP2014 提高组] 生活大爆炸版石头剪刀布题目背景题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 提示 解题思路Code调用函数的Code&#xff08;看起来简洁一点&#xff09;运行结果 [NOIP2014 提高组] 生活大爆炸版石头剪刀布 …

12.22 探探 数分 已HR面

岗位信息 1222 3.30PM 1面 40min 能感觉数据基建还不是很完善 因此 问了一些指标体系的问题还挺多 自我介绍能力考察1.说说你是怎么异常归因的以付费场景项目为例2.归因中如果遇到一个页面同时存在有3个实验在跑 无法归因出数据的异常是哪个改动造成的怎么办&#xff1f;3.讲…

服务器配置SSL证书到nginx基于Fdfs存储服务器或者直接阿里云绑定SSL

1.如果用FDFS存储服务器内置nginx设置SSL证书 1.验证当前nginx是否存在 http_ssl_modulehttp_ssl_module模块 如果存在直接配置就行 server {listen 80 default backlog2048;listen 443 ssl; server_name 域名; ssl_certificate /usr/local/nginx_fdfs/ssl/xxxx.top.crt; ssl…

Linux---gcc编译

目录 前言 一、gcc编译 二、程序的编译过程 三、gcc查看编译过程 1.预处理阶段 2.编译 3.汇编 4.链接 动静态库链接的内容 动静态库链接的优缺点 5.总结记忆 前言 在前面我们学会使用vim对文件进行编辑&#xff0c;如果是C或者C程序&#xff0c;我们编辑好了内容…

嵌入式-Stm32-江科大基于寄存器点亮LED灯

文章目录 前言&#xff1a;一&#xff1a;搭建基于寄存器控制LED的工程二&#xff1a;用江科大的STM32板子实现基于寄存器点亮LED灯三&#xff1a;用非江科大stm32板子实现基于寄存器点亮LED灯道友&#xff1a;一星陨落&#xff0c;黯淡不了星空灿烂&#xff1b;一花凋零&#…

脚本编程游戏引擎会遇到哪些问题

在游戏开发中&#xff0c;脚本编程已经成为了一种非常常见的方式&#xff0c;用来实现游戏逻辑和功能。但是脚本编程游戏引擎也可能会面临一些挑战和问题。下面简单的探讨一下都会遇到哪些问题&#xff0c;并且该如果做。 性能问题 脚本语言通常需要运行时解释执行&#xff0…

3.4 在开发中使用设计模式

现在&#xff0c;我们应该对设计模式的本质以及它们的组织方式有了初步的认识&#xff0c;并且能够理解ROPES过程在整体设计中的作用。通过之前章节对“体系结构”及其五个视图的探讨&#xff0c;我们打下了坚实的基础。初步了解了UML的基本构建模块后&#xff0c;我们现在可以…

计算机二级WPS Office考试须知、如何备考、备考建议

本文从计算机二级考试须知、如何备考、备考建议以及考试的注意事项等方面进行讲述&#xff0c;认认真真看&#xff0c;对你受益匪浅。 一、计算机二级考试须知 2021年3月27日至29日将举办第60次全国计算机等级考试&#xff08;NCRE&#xff09;&#xff0c;从今年起&#xff0…

python json模块

json是JavaScript对象表示法的缩写&#xff0c;是一种轻量级的数据交换格式&#xff0c;经常被用于Web应用程序中。python中的json库是用于解析和生成json数据格式的库。 import jsondata {"name": "张三","age": 18,"hobbies": [&q…

Gitlab-ci:从零开始的前端自动化部署

一.概念介绍 1.1 gitlab-ci && 自动化部署工具的运行机制 以gitlab-ci为例&#xff1a; (1) 通过在项目根目录下配置.gitlab-ci.yml文件&#xff0c;可以控制ci流程的不同阶段&#xff0c;例如install/检查/编译/部署服务器。gitlab平台会扫描.gitlab-ci.yml文件&…

遥感单通道图像保存为彩色图像

系列文章目录 第一章PIL单通道图像处理 文章目录 系列文章目录前言一、代码实现二、问题记录在这里插入图片描述 总结 前言 将单通道图像以彩色图像的形式进行保存主要使用了PIL库 一、代码实现 palette_data [***]&#xff1a;可以进行自定义设置 代码如下&#xff1a; fr…

字体图标操作步骤

网站 直接点击 进去后长这样&#xff0c;点免费的添加 保存下载 保存后解压 把fonts文件夹复制粘贴到我们自己项目 可以放在同images的路径下 引入 来源于 再style中粘贴 font-face {font-family: icomoon;src: url(fonts/icomoon.eot?jyg4cp);src: url(fonts/icomoo…

UVa12304 2D Geometry 110 in 1!

题目链接 UVa12304 2D Geometry 110 in 1! 题意 这是一个拥有6&#xff08;二进制是110&#xff09;个子问题的2D几何问题集。 1 CircumscribedCircle x1 y1 x2 y2 x3 y3&#xff1a;求三角形(x1,y1)-(x2,y2)-(x3,y3)的外接圆。这3点保证不共线。答案应格式化成(x,y,r…

C++从零基础到入门(1)

目录 一、输入输出 (iostream库) 1.标准输出流cout 2.标准输入流cin 3.标准库iostream &#xff08;1&#xff09;iostream中的窄字符&#xff08;char&#xff09; &#xff08;2&#xff09;iostream中的 宽字符&#xff08;wchar_t&#xff09; 二、变量与数据类型 …