wed前端的第一次作业

最新推荐文章于 2024-10-01 21:07:40 发布
最新推荐文章于 2024-10-01 21:07:40 发布
阅读量192 收藏
点赞数 1
分类专栏： wed前端 文章标签： xhtml 前端框架 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huatangqiu/article/details/139046538
版权

一 、第一项作业：用户界面

1）代码

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业1</title>
</head>
<body>
     <!-- 9*3 -->
     <table border="1px" width="400px" height="500px" align="center">
        <tr>
            <td bgcolor="grey" colspan="3" align="center"><b>用户注册</b></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <td bgcolor="grey" align="right">用户名</td>
            <td bgcolor="grey" colspan="2"><input type="text" name="UserName" width="15px" maxlength="20"></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td bgcolor="grey" align="right">密码</td>
            <td bgcolor="grey" colspan="2"><input type="password" name="UsePass" id="password" width="15px" maxlength="20"></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td bgcolor="grey" align="right">性别</td>
            <td bgcolor="grey" colspan="2">
                <input type="radio" name="sex" value="1"checked>男
                <input type="radio" name="ssex" value="2" >女
            </td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td bgcolor="grey" align="right">爱好</td>
            <td bgcolor="grey" colspan="2">
                <input type="checkbox" name="like" value="writing">写作
                <input type="checkbox" name="like " value="listening">听音乐
                <input type="checkbox" name="like" value="sports" checked>体育
            </td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td bgcolor="grey" align="right">省份</td>
            <td bgcolor="grey" colspan="2">
                <select name="province">
                    <option value="shaanxi" checked>陕西省</option>
                    <option value="hunan">湖南省</option>
                    <option value="shanx">山西省</option>
                </select>
            </td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td bgcolor="grey" rowspan="3" align="right">自我介绍</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <td bgcolor="grey" colspan="3" >
                <textarea name="intro" cols="25" rows="5" ></textarea>
            </td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <td bgcolor="grey" colspan="3" align="center">
                <button type="submit" name="send"><b>提交</b></button>
                <button type="reset" name="reset"><b>重置</b></button>
            </td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
            
    </table>
</body>
</html>

 2）运行截图

 二、第二项作业：银行汇款单

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业2</title>
</head>
<body>
    <!-- 9*8 -->
    <th><h2>工商银行电子汇款单</h2></th>
    <table border="1px" width="900px" height="400px">
        <tr>
            <td><b>回单类型</b></td>
            <!-- <td></td> -->
            <td colspan="3">网上转账汇款</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td><b>指令序号</b></td>
            <!-- <td></td> -->
            <td colspan="3" >HQH0000000000000013878172</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
            <td rowspan="4"><b>收款人</b></td>
            <td>户名</td>
            <td colspan="2">老牟</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td rowspan="4"><b>付款人</b></td>
            <td>户名</td>
            <td colspan="2" >老刘</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
            <!-- <td></td> -->
            <td><b>卡号</b></td>
            <td colspan="2">000000000001</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td><b>卡号</b></td>
            <td colspan="2">000000000002</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
           <!-- <td></td> -->
            <td>地区</td>
            <td colspan="2">南京</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td>地区</td>
            <td colspan="2">杭州</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        </tr>
            <!-- <td></td> -->
            <td><b>网点</b></td>
            <td colspan="2">工商江苏南京业务处理中心</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td><b>网点</b></td>
            <td colspan="2">江苏徐州业务中心</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        </tr>
            <td colspan="2"><b>币种</b></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td colspan="2">人民币</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td colspan="2"><b>钞汇标志</b></td>
            <!-- <td></td> -->
            <td colspan="2">钞票</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
            <td colspan="2"><b>金额</b></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td colspan="2">1.00元</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td colspan="2"><b>手续费</b></td>
            <!-- <td></td> -->
            <td colspan="2">0.57元</td>
           <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        </tr>
            <td colspan="2"><b>合计</b></td>
            <!-- <td></td> -->
            <td colspan="7">人民币：壹圆整</td>
           <!-- <td></td> -->
           <!-- <td></td> -->
           <!-- <td></td> -->
           <!-- <td></td> -->
           <!-- <td></td> -->
           <!-- <td></td> -->
           <!-- <td></td> -->
           <!-- <td></td> -->
        </tr>
        </tr>
            <td colspan="2"><b>交易时间</b></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td colspan="2">2017年6月1日</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td colspan="2"><b>时间戳</b></td>
            <!-- <td></td> -->
            <td colspan="2">2017-06-01-13.00.00.00000</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
    </table>

    <table>
        <th>
            <td align="left">票据打印时间 : 2017-06-01  15:00:12<br>
           <del>票据打印单位：江苏徐州业务中心<br></del>
            操作员：大曾<br></td> 
        </th>
    </table>
   
</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>
</head>
<body>
    <table align="left">
        <strong>
            <font size="20px">将进酒</font>
           &nbsp;&nbsp;&nbsp;&nbsp;
           <font size="6px">君不见黄河之水天上来</font>
       </strong>
    </table>
    
    
    <table align="center">
        <br>
        <br>

        <img src="李白.jpeg"  width=300px"   height="600px"  alt="图片走丢了"
        title="李白"
        align="left"
        vspace="10px"
        hspace="20px">

        <br>
        <br>
       
        <th align="left">
            <td>
                君不见黄河之水天上来，奔流到海不复回。<br><br>
                君不见高堂明镜悲白发，朝如青丝暮成雪。<br><br>
                人生得意须尽欢，莫使金樽空对月。<br><br>
                天生我材必有用，千金散尽还复来。<br><br>
                烹羊宰牛且为乐，会须一饮三百杯。<br><br>
                岑夫子，丹丘生，将进酒，杯莫停。<br><br>
                与君歌一曲，请君为我倾耳听。<br><br>
                钟鼓馔玉不足贵，但愿长醉不复醒。<br><br>
                古来圣贤皆寂寞，惟有饮者留其名。<br><br>
                陈王昔时宴平乐，斗酒十千恣欢谑。<br><br>
                主人何为言少钱，径须沽取对君酌。<br><br>
                五花马、千金裘，<br><br>
                呼儿将出换美酒，与尔同销万古愁。<br><br>
            </td>
        </th>
    </table>
    
</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>作业4</title>

    <style>
        div{
        width: 50%;
        height: 0;
        padding-bottom:66.66%;
        overflow:hidden;
    }
    </style>
    
</head>
<body>
    <table>
        <hr>

            <tr>
                <h1>热门电影板块</h1>
            </tr>
        <hr>
            <tr>
                <font size="3px"><b>最近热门电影</b></font>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                热门&nbsp;&nbsp;&nbsp;&nbsp;
                最新&nbsp;&nbsp;&nbsp;&nbsp;
                豆瓣高分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                冷门佳片&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                华语&nbsp;&nbsp;&nbsp;
                欧美&nbsp;&nbsp;&nbsp;
                韩国&nbsp;&nbsp;&nbsp;
                日本&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                更多>>
            </tr>
        <hr> 
    </table>

    <!--4*4的表格-->
    <table  width="1200px" height="950px" cellpadding="10px" cellspacing="10px align="center">
        <tr>
            <th background="初音未来.jpg" align="center"></th>
            <th background="荒川之主.jpg" align="center"></th>
            <th background="紧那罗.jpg" align="center"></th>
            <th background="铃彦姬.jpg" align="center"></th>
        </tr>
        <tr>
            <td height="25px">初音未来</td>
            <td height="25px">荒川之主</td>
            <td height="25px">紧那罗</td>
            <td height="25px">铃彦姬</td>
        </tr>
        <tr>
            <th background="千姬.jpg" align="center"></th>
            <th background="神代终局.jpg" align="center"></th>
            <th background="神启荒.jpg" align="center"></th>
            <th background="伊邪那美.jpg" align="center"></th>
        </tr>
        <tr>
            <td height="25px">千姬</td>
            <td height="25px">神代终局</td>
            <td height="25px">神启荒</td>
            <td height="25px">伊邪那美</td>
        </tr>
    </table>

</body>
</html>

该代码有部分多余的部分，不太完整（图片的像素大小以及css的引入不太熟练仍需要学习）

以上就是本次的作业。 

画堂秋
关注
专栏目录
web前端开发实践，wed前端开发好学吗
m0_60125017的博客
07-24 143
包管理器又称软件包管理系统，它是在电脑中自动安装、配制、卸载和升级软件包的工具组合，在各种系统软件和应用软件的安装管理中均有广泛应用。对于我们业务开发也很受益，相同的东西不必重复去造轮子。 每个工具或者开发语言都有相应的包管理器，好比 Ubuntu 的 apt-get、Centos 的 yum、Java 的 Maven 仓库等等。Node.js 中目前最出名的包管理器为 NPM 也是生态最好的。 什么是 NPM？ NPM 是 Node.js 中的包管理器。允许我们为 Node.js 安装各种模块，这个包管理
学习wed前端的路与第一小结的感受
Scorpion_Yang_Li的博客
06-21 510
到这周为止，目前已经基本学习完了wed前端的一部分基础课程，包括HTML基础以及大部分的CSS和初步的SACC工程化。在这不到两个月的时间，想想过得挺快的，虽然会有人说两个月了，才学这么一点，进度很慢呀，但是快和慢各有各的优点，慢的话学的更清晰，仔细，更详细，对知识点的掌握更牢固。同时一步步的加快学习进度，学习理解的难度。对于我这种已经离开学校快两年的人来说，是非常适合的。毕竟以前在学校也不是学的计算机相关专业，学的农学板块，对计算机的认识和了解还只是，处于聊天、看电视、电影和玩游戏的阶段，哈哈。 当初第一
Wed前端的第二次作业
huatangqiu的博客
05-27 297
【代码】Wed前端的第二次作业。
第七次培训作业
m0_63552939的博客
02-10 425
1.简介 javascript是一种具有面向对象能力的，解释型的程序设计语言。更具体一点，它是基于对象驱动并具有相对安全性的客户段脚本语言，他的主要目的是，验证发往服务器端的数据，增加wed互动，加强用户的体验度等 1.1.1对象 对象是加javascript的核心概念，也是最重要的数据模型，javascript的所有数据都可以被视为对象，javascript提供多各内勤对象，对象是具有属性和方法的特殊数据类型，简单说，所谓对象，就是一种无序的数据集合，由若干个见直对构成，通过javascript我们
web前端期末大作业——开心旅游网站设计与实现(HTML+CSS+JavaScript)
wx___BJ050106的博客
08-12 4881
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的......
Web前端开发技术课程大作业——南京旅游景点介绍网页代码html+css+javascript
QQ_____365392777的博客
12-10 786
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
11个精美网页——Web前端开发技术课程大作业，期末考试，Dreamweaver简单网页制作
STU网页设计
12-27 308
精彩专栏推荐👇🏻👇🏻👇🏻👇🏻 ❤ 【作者主页——获取更多优质源码】 ❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Websto
Web大作业.网页
qq_63079423的博客
07-21 2457
大一暑假web编程考试内容为大作业形式，主要包括爬虫+网页，本文主要介绍网页部分。由于接触网页的时间有限，对前端的各种框架都不太熟悉，所以就没有用任何的前端框架。get请求也是直接用JS原生的fetch函数，听说JQuery已经被淘汰了???（所以可能不打算接触它了）后端主要是用express框架，感觉用起来蛮简单的一路做下来还是蛮曲折的，毕竟很多函数都是第一次用，希望能做的越来越好吧。下面附几张网站图像httpshttps。...
web编程期末大作业
往事随风
06-26 1930
web编程期末大作业
ASP.Net实现学生信息管理系统前端WEB程序
桂花載酒
07-21 6327
实现效果展示 登陆界面： 注冊界面 主界面 和 功能界面 （這兩個其實完全可以合并，但前端第一次學，我不知道功能上應該和後臺的窗體程序有什麽區別，同時也想練練手，於是產生了兩個頁面）. 操作界面就做的比較樸素了，個人感覺這樣才有嚴肅的工作感。 然後皮卡丘前面的歡迎來到Hape WEB其實也是自嘲，自我感覺還是比不上已經先走了好多年的那些同學，做得程序就像傻逼（四川話 hape）一樣。 总...
基于web的员工信息管理系统
qq_45134058的博客
05-08 2652
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 基于web的简单信息管理系统前言一、项目需求二、项目搭建项目目录搭建2.项目资源引入3.数据库的创建4.项目开发用户登录的controller用上述的导入的jar文件创建的验证码controller分页查询的controller分页在jsp中的核心代码实现如下page页面的核心配置信息添加员工的insertcontroller修改员工信息的controller查询单个员工信息的controller删除员工信息的contoller三、项目效.
Vuex的todos案例
Qiuxuntao的博客
12-31 1116
项目创建 创建的时候记得勾上vuex vue create vuex-todos 配置App根组件 <template> <div id="app"> <a-input placeholder="请输入任务" class="my_ipt" /> <a-button type="primary">添加事项</a-button> <a-list bordered :dataSource="list" class=
Flask之旅《Flask Web开发：基于Python的Web应用开发实战》学习笔记
热门推荐
非梦的花朵 (Kevin QQ)
06-06 5万+
Flask 搭建博客网站 用户自定义头像 数据库模型，自动产生EER
XHTML学习
大河之犬的博客
09-20 562
XHTML是一个严格遵循 XML语法规则的 HTML 标准。它是 HTML4 的一种重构版本，结合了 HTML 的灵活性和 XML 的严格性，如今XHTML已经得到了所有主流浏览器的支持文档结构XHTML DOCTYPE 是强制性的中的 XML namespace 属性是强制性的、、 以及 也是强制性的元素语法XHTML 元素必须正确嵌套XHTML 元素必须始终关闭XHTML 元素必须小写XHTML 文档必须有一个根元素。
前端框架对比与选择
致未来的你。的博客
09-27 1219
在前端开发中，选择合适的前端框架对于开发效率和项目的长期维护非常重要。你可以根据项目需求、团队经验和生态系统选择最适合的前端框架。如果有具体的项目场景，我也可以提供更详细的建议。
前端框架的选择与考量：一场技术的盛宴
liao3399084的博客
09-27 658
React由Facebook开发，以其组件化、JSX和虚拟DOM等特性闻名。React的生态系统极为丰富，包括Redux、React Router等众多库和工具，非常适合构建大型复杂应用。React Native还支持跨平台开发，使得一套代码可以同时运行在Web和移动端。
前端框架对比和选择
weixin_42462436的博客
09-28 323
【代码】前端框架对比和选择。
前端框架中@路径别名原理和配置
最新发布
逐梦
10-01 464
查阅相关框架配置，找到路径别名的设置项配置tsconfig.json，加入别名的查找路径还报错就检查一下配置的tsconfig中include是否是包含了所有业务代码文件，如果没有，说明可能使用了reference，去有相应include的配置文件中添加上一步的配置。
wed前端图片和文字在一行
03-12
在wed前端中，可以使用CSS的display属性来实现图片和文字在同一行显示。例如，可以将图片和文字都放在一个div容器中，然后设置该容器的display属性为inline-block或flex。这样就可以让图片和文字在同一行显示了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值